ckeditor/_source/plugins/templates/dialogs/templates.js

   1 /*
   2 Copyright (c) 2003-2010, 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 ; i < templatesDefinitions.length ; 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( true );
  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                         return {
 150                                 title :editor.lang.templates.title,
 151
 152                                 minWidth : CKEDITOR.env.ie ? 440 : 400,
 153                                 minHeight : 340,
 154
 155                                 contents :
 156                                 [
 157                                         {
 158                                                 id :'selectTpl',
 159                                                 label : editor.lang.templates.title,
 160                                                 elements :
 161                                                 [
 162                                                         {
 163                                                                 type : 'vbox',
 164                                                                 padding : 5,
 165                                                                 children :
 166                                                                 [
 167                                                                         {
 168                                                                                 type : 'html',
 169                                                                                 html :
 170                                                                                         '<span>'  +
 171                                                                                                 editor.lang.templates.selectPromptMsg +
 172                                                                                         '</span>'
 173                                                                         },
 174                                                                         {
 175                                                                                 id : "templatesList",
 176                                                                                 type : 'html',
 177                                                                                 focus: true,
 178                                                                                 html :
 179                                                                                         '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="cke_tpl_list_label">' +
 180                                                                                                 '<div class="cke_tpl_loading"><span></span></div>' +
 181                                                                                         '</div>' +
 182                                                                                         '<span class="cke_voice_label" id="cke_tpl_list_label">' + editor.lang.templates.options+ '</span>'
 183                                                                         },
 184                                                                         {
 185                                                                                 id : 'chkInsertOpt',
 186                                                                                 type : 'checkbox',
 187                                                                                 label : editor.lang.templates.insertOption,
 188                                                                                 'default' : editor.config.templates_replaceContent
 189                                                                         }
 190                                                                 ]
 191                                                         }
 192                                                 ]
 193                                         }
 194                                 ],
 195
 196                                 buttons : [ CKEDITOR.dialog.cancelButton ],
 197
 198                                 onShow : function()
 199                                 {
 200                                         var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
 201                                         listContainer = templatesListField.getElement();
 202
 203                                         CKEDITOR.loadTemplates( editor.config.templates_files, function()
 204                                                 {
 205                                                         var templates = editor.config.templates.split( ',' );
 206
 207                                                         if ( templates.length )
 208                                                         {
 209                                                                 renderTemplatesList( listContainer, templates );
 210                                                                 templatesListField.focus();
 211                                                         }
 212                                                         else
 213                                                         {
 214                                                                 listContainer.setHtml(
 215                                                                         '<div class="cke_tpl_empty">' +
 216                                                                                 '<span>' + editor.lang.templates.emptyListMsg + '</span>' +
 217                                                                         '</div>' );
 218                                                         }
 219                                                 });
 220
 221                                         this._.element.on( 'keydown', keyNavigation );
 222                                 },
 223
 224                                 onHide : function ()
 225                                 {
 226                                         this._.element.removeListener( 'keydown', keyNavigation );
 227                                 }
 228                         };
 229                 });
 230 })();