2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
8 var doc = CKEDITOR.document;
\r
10 CKEDITOR.dialog.add( 'templates', function( editor )
\r
12 // Constructs the HTML view of the specified templates data.
\r
13 function renderTemplatesList( container, templatesDefinitions )
\r
15 // clear loading wait text.
\r
16 container.setHtml( '' );
\r
18 for ( var i = 0 ; i < templatesDefinitions.length ; i++ )
\r
20 var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
\r
21 imagesPath = definition.imagesPath,
\r
22 templates = definition.templates,
\r
23 count = templates.length;
\r
25 for ( var j = 0 ; j < count ; j++ )
\r
27 var template = templates[ j ],
\r
28 item = createTemplateItem( template, imagesPath );
\r
29 item.setAttribute( 'aria-posinset', j + 1 );
\r
30 item.setAttribute( 'aria-setsize', count );
\r
31 container.append( item );
\r
36 function createTemplateItem( template, imagesPath )
\r
38 var item = CKEDITOR.dom.element.createFromHtml(
\r
39 '<a href="javascript:void(0)" tabIndex="-1" role="option" >' +
\r
40 '<div class="cke_tpl_item"></div>' +
\r
43 // Build the inner HTML of our new item DIV.
\r
44 var html = '<table style="width:350px;" class="cke_tpl_preview"><tr>';
\r
46 if ( template.image && imagesPath )
\r
47 html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"></td>';
\r
49 html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
\r
51 if ( template.description )
\r
52 html += '<span>' + template.description + '</span>';
\r
54 html += '</td></tr></table>';
\r
56 item.getFirst().setHtml( html );
\r
58 item.on( 'click', function() { insertTemplate( template.html ); } );
\r
64 * Insert the specified template content into editor.
\r
65 * @param {Number} index
\r
67 function insertTemplate( html )
\r
69 var dialog = CKEDITOR.dialog.getCurrent(),
\r
70 isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
\r
74 // Everything should happen after the document is loaded (#4073).
\r
75 editor.on( 'contentDom', function( evt )
\r
77 evt.removeListener();
\r
80 // Place the cursor at the first editable place.
\r
81 var range = new CKEDITOR.dom.range( editor.document );
\r
82 range.moveToElementEditStart( editor.document.getBody() );
\r
83 range.select( true );
\r
84 setTimeout( function ()
\r
86 editor.fire( 'saveSnapshot' );
\r
90 editor.fire( 'saveSnapshot' );
\r
91 editor.setData( html );
\r
95 editor.insertHtml( html );
\r
100 function keyNavigation( evt )
\r
102 var target = evt.data.getTarget(),
\r
103 position = listContainer.getPosition( target );
\r
105 // Keyboard navigation for template list.
\r
106 if ( position > CKEDITOR.POSITION_CONTAINS )
\r
108 var keystroke = evt.data.getKeystroke(),
\r
109 items = listContainer.getElementsByTag( 'a' ),
\r
114 switch ( keystroke )
\r
116 case 40 : // ARROW-DOWN
\r
117 focusItem = target.getNext();
\r
120 case 38 : // ARROW-UP
\r
121 focusItem = target.getPrevious();
\r
126 target.fire( 'click' );
\r
132 evt.data.preventDefault();
\r
138 // Load skin at first.
\r
139 CKEDITOR.skins.load( editor, 'templates' );
\r
144 title :editor.lang.templates.title,
\r
146 minWidth : CKEDITOR.env.ie ? 440 : 400,
\r
153 label : editor.lang.templates.title,
\r
165 editor.lang.templates.selectPromptMsg +
\r
169 id : "templatesList",
\r
173 // Move focus to the first list item if available.
\r
174 try { this.getElement().getElementsByTag( 'a' ).getItem( 0 ).focus(); }
\r
178 '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="cke_tpl_list_label">' +
\r
179 '<div class="cke_tpl_loading"><span></span></div>' +
\r
181 '<span class="cke_voice_label" id="cke_tpl_list_label">' + editor.lang.common.options+ '</span>'
\r
184 id : 'chkInsertOpt',
\r
186 label : editor.lang.templates.insertOption,
\r
187 'default' : editor.config.templates_replaceContent
\r
195 buttons : [ CKEDITOR.dialog.cancelButton ],
\r
197 onShow : function()
\r
199 var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
\r
200 listContainer = templatesListField.getElement();
\r
202 CKEDITOR.loadTemplates( editor.config.templates_files, function()
\r
204 var templates = editor.config.templates.split( ',' );
\r
206 if ( templates.length )
\r
208 renderTemplatesList( listContainer, templates );
\r
209 templatesListField.focus();
\r
213 listContainer.setHtml(
\r
214 '<div class="cke_tpl_empty">' +
\r
215 '<span>' + editor.lang.templates.emptyListMsg + '</span>' +
\r
220 this._.element.on( 'keydown', keyNavigation );
\r
223 onHide : function ()
\r
225 this._.element.removeListener( 'keydown', keyNavigation );
\r