sources/plugins/templates/dialogs/templates.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 ( function() {
   7
   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( '' );
  13
  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;
  19
  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 );
  26                                 }
  27                         }
  28                 }
  29
  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>' +
  33                                 '</a>' );
  34
  35                         // Build the inner HTML of our new item DIV.
  36                         var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';
  37
  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>';
  42                         }
  43
  44                         html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
  45
  46                         if ( template.description )
  47                                 html += '<span>' + template.description + '</span>';
  48
  49                         html += '</td></tr></table>';
  50
  51                         item.getFirst().setHtml( html );
  52
  53                         item.on( 'click', function() {
  54                                 insertTemplate( template.html );
  55                         } );
  56
  57                         return item;
  58                 }
  59
  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' );
  65
  66                         if ( isReplace ) {
  67                                 editor.fire( 'saveSnapshot' );
  68                                 // Everything should happen after the document is loaded (#4073).
  69                                 editor.setData( html, function() {
  70                                         dialog.hide();
  71
  72                                         // Place the cursor at the first editable place.
  73                                         var range = editor.createRange();
  74                                         range.moveToElementEditStart( editor.editable() );
  75                                         range.select();
  76                                         setTimeout( function() {
  77                                                 editor.fire( 'saveSnapshot' );
  78                                         }, 0 );
  79
  80                                 } );
  81                         } else {
  82                                 editor.insertHtml( html );
  83                                 dialog.hide();
  84                         }
  85                 }
  86
  87                 function keyNavigation( evt ) {
  88                         var target = evt.data.getTarget(),
  89                                 onList = listContainer.equals( target );
  90
  91                         // Keyboard navigation for template list.
  92                         if ( onList || listContainer.contains( target ) ) {
  93                                 var keystroke = evt.data.getKeystroke(),
  94                                         items = listContainer.getElementsByTag( 'a' ),
  95                                         focusItem;
  96
  97                                 if ( items ) {
  98                                         // Focus not yet onto list items?
  99                                         if ( onList )
 100                                                 focusItem = items.getItem( 0 );
 101                                         else {
 102                                                 switch ( keystroke ) {
 103                                                         case 40: // ARROW-DOWN
 104                                                                 focusItem = target.getNext();
 105                                                                 break;
 106
 107                                                         case 38: // ARROW-UP
 108                                                                 focusItem = target.getPrevious();
 109                                                                 break;
 110
 111                                                         case 13: // ENTER
 112                                                         case 32: // SPACE
 113                                                                 target.fire( 'click' );
 114                                                 }
 115                                         }
 116
 117                                         if ( focusItem ) {
 118                                                 focusItem.focus();
 119                                                 evt.data.preventDefault();
 120                                         }
 121                                 }
 122                         }
 123                 }
 124
 125                 // Load skin at first.
 126                 var plugin = CKEDITOR.plugins.get( 'templates' );
 127                 CKEDITOR.document.appendStyleSheet( CKEDITOR.getUrl( plugin.path + 'dialogs/templates.css' ) );
 128
 129
 130                 var listContainer;
 131
 132                 var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),
 133                         lang = editor.lang.templates,
 134                         config = editor.config;
 135                 return {
 136                         title: editor.lang.templates.title,
 137
 138                         minWidth: CKEDITOR.env.ie ? 440 : 400,
 139                         minHeight: 340,
 140
 141                         contents: [ {
 142                                 id: 'selectTpl',
 143                                 label: lang.title,
 144                                 elements: [ {
 145                                         type: 'vbox',
 146                                         padding: 5,
 147                                         children: [ {
 148                                                 id: 'selectTplText',
 149                                                 type: 'html',
 150                                                 html: '<span>' +
 151                                                         lang.selectPromptMsg +
 152                                                         '</span>'
 153                                         },
 154                                         {
 155                                                 id: 'templatesList',
 156                                                 type: 'html',
 157                                                 focus: true,
 158                                                 html: '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="' + templateListLabelId + '">' +
 159                                                                 '<div class="cke_tpl_loading"><span></span></div>' +
 160                                                         '</div>' +
 161                                                         '<span class="cke_voice_label" id="' + templateListLabelId + '">' + lang.options + '</span>'
 162                                         },
 163                                         {
 164                                                 id: 'chkInsertOpt',
 165                                                 type: 'checkbox',
 166                                                 label: lang.insertOption,
 167                                                 'default': config.templates_replaceContent
 168                                         } ]
 169                                 } ]
 170                         } ],
 171
 172                         buttons: [ CKEDITOR.dialog.cancelButton ],
 173
 174                         onShow: function() {
 175                                 var templatesListField = this.getContentElement( 'selectTpl', 'templatesList' );
 176                                 listContainer = templatesListField.getElement();
 177
 178                                 CKEDITOR.loadTemplates( config.templates_files, function() {
 179                                         var templates = ( config.templates || 'default' ).split( ',' );
 180
 181                                         if ( templates.length ) {
 182                                                 renderTemplatesList( listContainer, templates );
 183                                                 templatesListField.focus();
 184                                         } else {
 185                                                 listContainer.setHtml( '<div class="cke_tpl_empty">' +
 186                                                         '<span>' + lang.emptyListMsg + '</span>' +
 187                                                         '</div>' );
 188                                         }
 189                                 } );
 190
 191                                 this._.element.on( 'keydown', keyNavigation );
 192                         },
 193
 194                         onHide: function() {
 195                                 this._.element.removeListener( 'keydown', keyNavigation );
 196                         }
 197                 };
 198         } );
 199 } )();