On prépare de quoi se concentrer sur les images incorporées.
[ckeditor.git] / skins / ckeditor / _source / plugins / templates / dialogs / templates.js
1 /*
2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
4 */
5
6 (function()
7 {
8 var doc = CKEDITOR.document;
9
10 CKEDITOR.dialog.add( 'templates', function( editor )
11 {
12 // Constructs the HTML view of the specified templates data.
13 function renderTemplatesList( container, templatesDefinitions )
14 {
15 // clear loading wait text.
16 container.setHtml( '' );
17
18 for ( var i = 0, totalDefs = templatesDefinitions.length ; i < totalDefs ; i++ )
19 {
20 var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
21 imagesPath = definition.imagesPath,
22 templates = definition.templates,
23 count = templates.length;
24
25 for ( var j = 0 ; j < count ; j++ )
26 {
27 var template = templates[ j ],
28 item = createTemplateItem( template, imagesPath );
29 item.setAttribute( 'aria-posinset', j + 1 );
30 item.setAttribute( 'aria-setsize', count );
31 container.append( item );
32 }
33 }
34 }
35
36 function createTemplateItem( template, imagesPath )
37 {
38 var item = CKEDITOR.dom.element.createFromHtml(
39 '<a href="javascript:void(0)" tabIndex="-1" role="option" >' +
40 '<div class="cke_tpl_item"></div>' +
41 '</a>' );
42
43 // Build the inner HTML of our new item DIV.
44 var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';
45
46 if ( template.image && imagesPath )
47 html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"' + ( CKEDITOR.env.ie6Compat ? ' onload="this.width=this.width"' : '' ) + ' alt="" title=""></td>';
48
49 html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
50
51 if ( template.description )
52 html += '<span>' + template.description + '</span>';
53
54 html += '</td></tr></table>';
55
56 item.getFirst().setHtml( html );
57
58 item.on( 'click', function() { insertTemplate( template.html ); } );
59
60 return item;
61 }
62
63 /**
64 * Insert the specified template content into editor.
65 * @param {Number} index
66 */
67 function insertTemplate( html )
68 {
69 var dialog = CKEDITOR.dialog.getCurrent(),
70 isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
71
72 if ( isInsert )
73 {
74 // Everything should happen after the document is loaded (#4073).
75 editor.on( 'contentDom', function( evt )
76 {
77 evt.removeListener();
78 dialog.hide();
79
80 // Place the cursor at the first editable place.
81 var range = new CKEDITOR.dom.range( editor.document );
82 range.moveToElementEditStart( editor.document.getBody() );
83 range.select( 1 );
84 setTimeout( function()
85 {
86 editor.fire( 'saveSnapshot' );
87 }, 0 );
88 });
89
90 editor.fire( 'saveSnapshot' );
91 editor.setData( html );
92 }
93 else
94 {
95 editor.insertHtml( html );
96 dialog.hide();
97 }
98 }
99
100 function keyNavigation( evt )
101 {
102 var target = evt.data.getTarget(),
103 onList = listContainer.equals( target );
104
105 // Keyboard navigation for template list.
106 if ( onList || listContainer.contains( target ) )
107 {
108 var keystroke = evt.data.getKeystroke(),
109 items = listContainer.getElementsByTag( 'a' ),
110 focusItem;
111
112 if ( items )
113 {
114 // Focus not yet onto list items?
115 if ( onList )
116 focusItem = items.getItem( 0 );
117 else
118 {
119 switch ( keystroke )
120 {
121 case 40 : // ARROW-DOWN
122 focusItem = target.getNext();
123 break;
124
125 case 38 : // ARROW-UP
126 focusItem = target.getPrevious();
127 break;
128
129 case 13 : // ENTER
130 case 32 : // SPACE
131 target.fire( 'click' );
132 }
133 }
134
135 if ( focusItem )
136 {
137 focusItem.focus();
138 evt.data.preventDefault();
139 }
140 }
141 }
142 }
143
144 // Load skin at first.
145 CKEDITOR.skins.load( editor, 'templates' );
146
147 var listContainer;
148
149 var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),
150 lang = editor.lang.templates,
151 config = editor.config;
152 return {
153 title :editor.lang.templates.title,
154
155 minWidth : CKEDITOR.env.ie ? 440 : 400,
156 minHeight : 340,
157
158 contents :
159 [
160 {
161 id :'selectTpl',
162 label : lang.title,
163 elements :
164 [
165 {
166 type : 'vbox',
167 padding : 5,
168 children :
169 [
170 {
171 id : 'selectTplText',
172 type : 'html',
173 html :
174 '<span>' +
175 lang.selectPromptMsg +
176 '</span>'
177 },
178 {
179 id : 'templatesList',
180 type : 'html',
181 focus: true,
182 html :
183 '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="' + templateListLabelId+ '">' +
184 '<div class="cke_tpl_loading"><span></span></div>' +
185 '</div>' +
186 '<span class="cke_voice_label" id="' + templateListLabelId + '">' + lang.options+ '</span>'
187 },
188 {
189 id : 'chkInsertOpt',
190 type : 'checkbox',
191 label : lang.insertOption,
192 'default' : config.templates_replaceContent
193 }
194 ]
195 }
196 ]
197 }
198 ],
199
200 buttons : [ CKEDITOR.dialog.cancelButton ],
201
202 onShow : function()
203 {
204 var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
205 listContainer = templatesListField.getElement();
206
207 CKEDITOR.loadTemplates( config.templates_files, function()
208 {
209 var templates = ( config.templates || 'default' ).split( ',' );
210
211 if ( templates.length )
212 {
213 renderTemplatesList( listContainer, templates );
214 templatesListField.focus();
215 }
216 else
217 {
218 listContainer.setHtml(
219 '<div class="cke_tpl_empty">' +
220 '<span>' + lang.emptyListMsg + '</span>' +
221 '</div>' );
222 }
223 });
224
225 this._.element.on( 'keydown', keyNavigation );
226 },
227
228 onHide : function()
229 {
230 this._.element.removeListener( 'keydown', keyNavigation );
231 }
232 };
233 });
234 })();