_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         var listId = 'cke' + CKEDITOR.tools.getNextNumber();\r
  11 \r
  12         // Constructs the HTML view of the specified templates data.\r
  13         function renderTemplatesList( editor, templatesDefinitions )\r
  14         {\r
  15                 var listDiv = doc.getById( listId );\r
  16 \r
  17                 // clear loading wait text.\r
  18                 listDiv.setHtml( '' );\r
  19 \r
  20                 for ( var i = 0 ; i < templatesDefinitions.length ; i++ )\r
  21                 {\r
  22                         var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),\r
  23                                 imagesPath = definition.imagesPath,\r
  24                                 templates = definition.templates;\r
  25 \r
  26                         for ( var j = 0 ; j < templates.length ; j++ )\r
  27                         {\r
  28                                 var template = templates[ j ];\r
  29                                 listDiv.append( createTemplateItem( editor, template, imagesPath ) );\r
  30                         }\r
  31                 }\r
  32         }\r
  33 \r
  34         function createTemplateItem( editor, template, imagesPath )\r
  35         {\r
  36                 var div = doc.createElement( 'div' );\r
  37                 div.setAttribute( 'class', 'cke_tpl_item' );\r
  38 \r
  39                 // Build the inner HTML of our new item DIV.\r
  40                 var html = '<table style="width:350px;" class="cke_tpl_preview"><tr>';\r
  41 \r
  42                 if( template.image && imagesPath )\r
  43                         html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"></td>';\r
  44 \r
  45                 html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';\r
  46 \r
  47                 if( template.description )\r
  48                         html += '<span>' + template.description + '</span>';\r
  49 \r
  50                 html += '</td></tr></table>';\r
  51 \r
  52                 div.setHtml( html );\r
  53 \r
  54                 div.on( 'mouseover', function()\r
  55                         {\r
  56                                 div.addClass( 'cke_tpl_hover' );\r
  57                         });\r
  58 \r
  59                 div.on( 'mouseout', function()\r
  60                         {\r
  61                                 div.removeClass( 'cke_tpl_hover' );\r
  62                         });\r
  63 \r
  64                 div.on( 'click', function()\r
  65                         {\r
  66                                 insertTemplate( editor, template.html );\r
  67                         });\r
  68 \r
  69                 return div;\r
  70         }\r
  71 \r
  72         /**\r
  73          * Insert the specified template content\r
  74          * to document.\r
  75          * @param {Number} index\r
  76          */\r
  77         function insertTemplate( editor, html )\r
  78         {\r
  79                 var dialog = CKEDITOR.dialog.getCurrent(),\r
  80                         isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );\r
  81 \r
  82                 if( isInsert )\r
  83                 {\r
  84                         // Everything should happen after the document is loaded (#4073).\r
  85                         editor.on( 'contentDom', function( evt )\r
  86                         {\r
  87                                 evt.removeListener();\r
  88                                 dialog.hide();\r
  89 \r
  90                                 // Place the cursor at the first editable place.\r
  91                                 var range = new CKEDITOR.dom.range( editor.document );\r
  92                                 range.moveToElementEditStart( editor.document.getBody() );\r
  93                                 range.select( true );\r
  94                         } );\r
  95                         editor.setData( html );\r
  96                 }\r
  97                 else\r
  98                 {\r
  99                         editor.insertHtml( html );\r
 100                         dialog.hide();\r
 101                 }\r
 102         }\r
 103 \r
 104         CKEDITOR.dialog.add( 'templates', function( editor )\r
 105                 {\r
 106                         // Load skin at first.\r
 107                         CKEDITOR.skins.load( editor, 'templates' );\r
 108 \r
 109                         /**\r
 110                          * Load templates once.\r
 111                          */\r
 112                         var isLoaded = false;\r
 113 \r
 114                         return {\r
 115                                 title :editor.lang.templates.title,\r
 116 \r
 117                                 minWidth : CKEDITOR.env.ie ? 440 : 400,\r
 118                                 minHeight : 340,\r
 119 \r
 120                                 contents :\r
 121                                 [\r
 122                                         {\r
 123                                                 id :'selectTpl',\r
 124                                                 label : editor.lang.templates.title,\r
 125                                                 elements :\r
 126                                                 [\r
 127                                                         {\r
 128                                                                 type : 'vbox',\r
 129                                                                 padding : 5,\r
 130                                                                 children :\r
 131                                                                 [\r
 132                                                                         {\r
 133                                                                                 type : 'html',\r
 134                                                                                 html :\r
 135                                                                                         '<span>'  +\r
 136                                                                                                 editor.lang.templates.selectPromptMsg +\r
 137                                                                                         '</span>'\r
 138                                                                         },\r
 139                                                                         {\r
 140                                                                                 type : 'html',\r
 141                                                                                 html :\r
 142                                                                                         '<div id="' + listId + '" class="cke_tpl_list">' +\r
 143                                                                                                 '<div class="cke_tpl_loading"><span></span></div>' +\r
 144                                                                                         '</div>'\r
 145                                                                         },\r
 146                                                                         {\r
 147                                                                                 id : 'chkInsertOpt',\r
 148                                                                                 type : 'checkbox',\r
 149                                                                                 label : editor.lang.templates.insertOption,\r
 150                                                                                 'default' : editor.config.templates_replaceContent\r
 151                                                                         }\r
 152                                                                 ]\r
 153                                                         }\r
 154                                                 ]\r
 155                                         }\r
 156                                 ],\r
 157 \r
 158                                 buttons : [ CKEDITOR.dialog.cancelButton ],\r
 159 \r
 160                                 onShow : function()\r
 161                                 {\r
 162                                         CKEDITOR.loadTemplates( editor.config.templates_files, function()\r
 163                                                 {\r
 164                                                         var templates = editor.config.templates.split( ',' );\r
 165 \r
 166                                                         if ( templates.length )\r
 167                                                                 renderTemplatesList( editor, templates );\r
 168                                                         else\r
 169                                                         {\r
 170                                                                 var listCtEl = doc.getById( listId );\r
 171                                                                 listCtEl.setHtml(\r
 172                                                                         '<div class="cke_tpl_empty">' +\r
 173                                                                                 '<span>' + editor.lang.templates.emptyListMsg + '</span>' +\r
 174                                                                         '</div>' );\r
 175                                                         }\r
 176                                                 });\r
 177                                 }\r
 178                         };\r
 179                 });\r
 180 })();\r