_source/plugins/templates/dialogs/templates.js

   1 /*\r
   2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 (function()\r
   7 {\r
   8         var doc = CKEDITOR.document;\r
   9 \r
  10         CKEDITOR.dialog.add( 'templates', function( editor )\r
  11                 {\r
  12                         // Constructs the HTML view of the specified templates data.\r
  13                         function renderTemplatesList( container, templatesDefinitions )\r
  14                         {\r
  15                                 // clear loading wait text.\r
  16                                 container.setHtml( '' );\r
  17 \r
  18                                 for ( var i = 0 ; i < templatesDefinitions.length ; i++ )\r
  19                                 {\r
  20                                         var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),\r
  21                                                 imagesPath = definition.imagesPath,\r
  22                                                 templates = definition.templates,\r
  23                                                 count = templates.length;\r
  24 \r
  25                                         for ( var j = 0 ; j < count ; j++ )\r
  26                                         {\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
  32                                         }\r
  33                                 }\r
  34                         }\r
  35 \r
  36                         function createTemplateItem( template, imagesPath )\r
  37                         {\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
  41                                                 '</a>' );\r
  42 \r
  43                                 // Build the inner HTML of our new item DIV.\r
  44                                 var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';\r
  45 \r
  46                                 if ( template.image && imagesPath )\r
  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>';\r
  48 \r
  49                                 html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';\r
  50 \r
  51                                 if ( template.description )\r
  52                                         html += '<span>' + template.description + '</span>';\r
  53 \r
  54                                 html += '</td></tr></table>';\r
  55 \r
  56                                 item.getFirst().setHtml( html );\r
  57 \r
  58                                 item.on( 'click', function() { insertTemplate( template.html ); } );\r
  59 \r
  60                                 return item;\r
  61                         }\r
  62 \r
  63                         /**\r
  64                          * Insert the specified template content into editor.\r
  65                          * @param {Number} index\r
  66                          */\r
  67                         function insertTemplate( html )\r
  68                         {\r
  69                                 var dialog = CKEDITOR.dialog.getCurrent(),\r
  70                                         isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );\r
  71 \r
  72                                 if ( isInsert )\r
  73                                 {\r
  74                                         // Everything should happen after the document is loaded (#4073).\r
  75                                         editor.on( 'contentDom', function( evt )\r
  76                                         {\r
  77                                                 evt.removeListener();\r
  78                                                 dialog.hide();\r
  79 \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
  85                                                 {\r
  86                                                         editor.fire( 'saveSnapshot' );\r
  87                                                 }, 0 );\r
  88                                         } );\r
  89 \r
  90                                         editor.fire( 'saveSnapshot' );\r
  91                                         editor.setData( html );\r
  92                                 }\r
  93                                 else\r
  94                                 {\r
  95                                         editor.insertHtml( html );\r
  96                                         dialog.hide();\r
  97                                 }\r
  98                         }\r
  99 \r
 100                         function keyNavigation( evt )\r
 101                         {\r
 102                                 var target = evt.data.getTarget(),\r
 103                                                 onList = listContainer.equals( target );\r
 104 \r
 105                                 // Keyboard navigation for template list.\r
 106                                 if (  onList || listContainer.contains( target ) )\r
 107                                 {\r
 108                                         var keystroke = evt.data.getKeystroke(),\r
 109                                                 items = listContainer.getElementsByTag( 'a' ),\r
 110                                                 focusItem;\r
 111 \r
 112                                         if ( items )\r
 113                                         {\r
 114                                                 // Focus not yet onto list items?\r
 115                                                 if ( onList )\r
 116                                                         focusItem = items.getItem( 0 );\r
 117                                                 else\r
 118                                                 {\r
 119                                                         switch ( keystroke )\r
 120                                                         {\r
 121                                                                 case 40 :                                       // ARROW-DOWN\r
 122                                                                         focusItem = target.getNext();\r
 123                                                                         break;\r
 124 \r
 125                                                                 case 38 :                                       // ARROW-UP\r
 126                                                                         focusItem = target.getPrevious();\r
 127                                                                         break;\r
 128 \r
 129                                                                 case 13 :                                       // ENTER\r
 130                                                                 case 32 :                                       // SPACE\r
 131                                                                         target.fire( 'click' );\r
 132                                                         }\r
 133                                                 }\r
 134 \r
 135                                                 if ( focusItem )\r
 136                                                 {\r
 137                                                         focusItem.focus();\r
 138                                                         evt.data.preventDefault();\r
 139                                                 }\r
 140                                         }\r
 141                                 }\r
 142                         }\r
 143 \r
 144                         // Load skin at first.\r
 145                         CKEDITOR.skins.load( editor, 'templates' );\r
 146 \r
 147                         var listContainer;\r
 148 \r
 149                         return {\r
 150                                 title :editor.lang.templates.title,\r
 151 \r
 152                                 minWidth : CKEDITOR.env.ie ? 440 : 400,\r
 153                                 minHeight : 340,\r
 154 \r
 155                                 contents :\r
 156                                 [\r
 157                                         {\r
 158                                                 id :'selectTpl',\r
 159                                                 label : editor.lang.templates.title,\r
 160                                                 elements :\r
 161                                                 [\r
 162                                                         {\r
 163                                                                 type : 'vbox',\r
 164                                                                 padding : 5,\r
 165                                                                 children :\r
 166                                                                 [\r
 167                                                                         {\r
 168                                                                                 type : 'html',\r
 169                                                                                 html :\r
 170                                                                                         '<span>'  +\r
 171                                                                                                 editor.lang.templates.selectPromptMsg +\r
 172                                                                                         '</span>'\r
 173                                                                         },\r
 174                                                                         {\r
 175                                                                                 id : "templatesList",\r
 176                                                                                 type : 'html',\r
 177                                                                                 focus: true,\r
 178                                                                                 html :\r
 179                                                                                         '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="cke_tpl_list_label">' +\r
 180                                                                                                 '<div class="cke_tpl_loading"><span></span></div>' +\r
 181                                                                                         '</div>' +\r
 182                                                                                         '<span class="cke_voice_label" id="cke_tpl_list_label">' + editor.lang.templates.options+ '</span>'\r
 183                                                                         },\r
 184                                                                         {\r
 185                                                                                 id : 'chkInsertOpt',\r
 186                                                                                 type : 'checkbox',\r
 187                                                                                 label : editor.lang.templates.insertOption,\r
 188                                                                                 'default' : editor.config.templates_replaceContent\r
 189                                                                         }\r
 190                                                                 ]\r
 191                                                         }\r
 192                                                 ]\r
 193                                         }\r
 194                                 ],\r
 195 \r
 196                                 buttons : [ CKEDITOR.dialog.cancelButton ],\r
 197 \r
 198                                 onShow : function()\r
 199                                 {\r
 200                                         var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );\r
 201                                         listContainer = templatesListField.getElement();\r
 202 \r
 203                                         CKEDITOR.loadTemplates( editor.config.templates_files, function()\r
 204                                                 {\r
 205                                                         var templates = editor.config.templates.split( ',' );\r
 206 \r
 207                                                         if ( templates.length )\r
 208                                                         {\r
 209                                                                 renderTemplatesList( listContainer, templates );\r
 210                                                                 templatesListField.focus();\r
 211                                                         }\r
 212                                                         else\r
 213                                                         {\r
 214                                                                 listContainer.setHtml(\r
 215                                                                         '<div class="cke_tpl_empty">' +\r
 216                                                                                 '<span>' + editor.lang.templates.emptyListMsg + '</span>' +\r
 217                                                                         '</div>' );\r
 218                                                         }\r
 219                                                 });\r
 220 \r
 221                                         this._.element.on( 'keydown', keyNavigation );\r
 222                                 },\r
 223 \r
 224                                 onHide : function ()\r
 225                                 {\r
 226                                         this._.element.removeListener( 'keydown', keyNavigation );\r
 227                                 }\r
 228                         };\r
 229                 });\r
 230 })();\r