[Summary view] [Print] [Text view]

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