2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
8 CKEDITOR.dialog.add( 'templates', function( editor ) {
9 // Constructs the HTML view of the specified templates data.
10 function renderTemplatesList( container, templatesDefinitions ) {
11 // clear loading wait text.
12 container.setHtml( '' );
14 for ( var i = 0, totalDefs = templatesDefinitions.length; i < totalDefs; i++ ) {
15 var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
16 imagesPath = definition.imagesPath,
17 templates = definition.templates,
18 count = templates.length;
20 for ( var j = 0; j < count; j++ ) {
21 var template = templates[ j ],
22 item = createTemplateItem( template, imagesPath );
23 item.setAttribute( 'aria-posinset', j + 1 );
24 item.setAttribute( 'aria-setsize', count );
25 container.append( item );
30 function createTemplateItem( template, imagesPath ) {
31 var item = CKEDITOR.dom.element.createFromHtml( '<a href="javascript:void(0)" tabIndex="-1" role="option" >' +
32 '<div class="cke_tpl_item"></div>' +
35 // Build the inner HTML of our new item DIV.
36 var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';
38 if ( template.image && imagesPath ) {
39 html += '<td class="cke_tpl_preview_img"><img src="' +
40 CKEDITOR.getUrl( imagesPath + template.image ) + '"' +
41 ( CKEDITOR.env.ie6Compat ? ' onload="this.width=this.width"' : '' ) + ' alt="" title=""></td>';
44 html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
46 if ( template.description )
47 html += '<span>' + template.description + '</span>';
49 html += '</td></tr></table>';
51 item.getFirst().setHtml( html );
53 item.on( 'click', function() {
54 insertTemplate( template.html );
60 // Insert the specified template content into editor.
61 // @param {Number} index
62 function insertTemplate( html ) {
63 var dialog = CKEDITOR.dialog.getCurrent(),
64 isReplace = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
67 editor.fire( 'saveSnapshot' );
68 // Everything should happen after the document is loaded (#4073).
69 editor.setData( html, function() {
72 // Place the cursor at the first editable place.
73 var range = editor.createRange();
74 range.moveToElementEditStart( editor.editable() );
76 setTimeout( function() {
77 editor.fire( 'saveSnapshot' );
82 editor.insertHtml( html );
87 function keyNavigation( evt ) {
88 var target = evt.data.getTarget(),
89 onList = listContainer.equals( target );
91 // Keyboard navigation for template list.
92 if ( onList || listContainer.contains( target ) ) {
93 var keystroke = evt.data.getKeystroke(),
94 items = listContainer.getElementsByTag( 'a' ),
98 // Focus not yet onto list items?
100 focusItem = items.getItem( 0 );
102 switch ( keystroke ) {
103 case 40: // ARROW-DOWN
104 focusItem = target.getNext();
108 focusItem = target.getPrevious();
113 target.fire( 'click' );
119 evt.data.preventDefault();
125 // Load skin at first.
126 var plugin = CKEDITOR.plugins.get( 'templates' );
127 CKEDITOR.document.appendStyleSheet( CKEDITOR.getUrl( plugin.path + 'dialogs/templates.css' ) );
132 var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),
133 lang = editor.lang.templates,
134 config = editor.config;
136 title: editor.lang.templates.title,
138 minWidth: CKEDITOR.env.ie ? 440 : 400,
151 lang.selectPromptMsg +
158 html: '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="' + templateListLabelId + '">' +
159 '<div class="cke_tpl_loading"><span></span></div>' +
161 '<span class="cke_voice_label" id="' + templateListLabelId + '">' + lang.options + '</span>'
166 label: lang.insertOption,
167 'default': config.templates_replaceContent
172 buttons: [ CKEDITOR.dialog.cancelButton ],
175 var templatesListField = this.getContentElement( 'selectTpl', 'templatesList' );
176 listContainer = templatesListField.getElement();
178 CKEDITOR.loadTemplates( config.templates_files, function() {
179 var templates = ( config.templates || 'default' ).split( ',' );
181 if ( templates.length ) {
182 renderTemplatesList( listContainer, templates );
183 templatesListField.focus();
185 listContainer.setHtml( '<div class="cke_tpl_empty">' +
186 '<span>' + lang.emptyListMsg + '</span>' +
191 this._.element.on( 'keydown', keyNavigation );
195 this._.element.removeListener( 'keydown', keyNavigation );