_source/plugins/templates/dialogs/templates.js

   1 /*\r
   2 Copyright (c) 2003-2009, 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                         editor.setData( html );\r
  85                 }\r
  86                 else\r
  87                 {\r
  88                         editor.insertHtml( html );\r
  89                 }\r
  90 \r
  91                 dialog.hide();\r
  92         }\r
  93 \r
  94         CKEDITOR.dialog.add( 'templates', function( editor )\r
  95                 {\r
  96                         // Load skin at first.\r
  97                         CKEDITOR.skins.load( editor, 'templates' );\r
  98 \r
  99                         /**\r
 100                          * Load templates once.\r
 101                          */\r
 102                         var isLoaded = false;\r
 103 \r
 104                         return {\r
 105                                 title :editor.lang.templates.title,\r
 106 \r
 107                                 minWidth : CKEDITOR.env.ie ? 440 : 400,\r
 108                                 minHeight : 340,\r
 109 \r
 110                                 contents :\r
 111                                 [\r
 112                                         {\r
 113                                                 id :'selectTpl',\r
 114                                                 label : editor.lang.templates.title,\r
 115                                                 elements :\r
 116                                                 [\r
 117                                                         {\r
 118                                                                 type : 'vbox',\r
 119                                                                 padding : 5,\r
 120                                                                 children :\r
 121                                                                 [\r
 122                                                                         {\r
 123                                                                                 type : 'html',\r
 124                                                                                 html :\r
 125                                                                                         '<span>'  +\r
 126                                                                                                 editor.lang.templates.selectPromptMsg +\r
 127                                                                                         '</span>'\r
 128                                                                         },\r
 129                                                                         {\r
 130                                                                                 type : 'html',\r
 131                                                                                 html :\r
 132                                                                                         '<div id="' + listId + '" class="cke_tpl_list">' +\r
 133                                                                                                 '<div class="cke_tpl_loading"><span></span></div>' +\r
 134                                                                                         '</div>'\r
 135                                                                         },\r
 136                                                                         {\r
 137                                                                                 id : 'chkInsertOpt',\r
 138                                                                                 type : 'checkbox',\r
 139                                                                                 label : editor.lang.templates.insertOption,\r
 140                                                                                 'default' : editor.config.templates_replaceContent\r
 141                                                                         }\r
 142                                                                 ]\r
 143                                                         }\r
 144                                                 ]\r
 145                                         }\r
 146                                 ],\r
 147 \r
 148                                 buttons : [ CKEDITOR.dialog.cancelButton ],\r
 149 \r
 150                                 onShow : function()\r
 151                                 {\r
 152                                         CKEDITOR.loadTemplates( editor.config.templates_files, function()\r
 153                                                 {\r
 154                                                         var templates = editor.config.templates.split( ',' );\r
 155 \r
 156                                                         if ( templates.length )\r
 157                                                                 renderTemplatesList( editor, templates );\r
 158                                                         else\r
 159                                                         {\r
 160                                                                 var listCtEl = doc.getById( listId );\r
 161                                                                 listCtEl.setHtml(\r
 162                                                                         '<div class="cke_tpl_empty">' +\r
 163                                                                                 '<span>' + editor.lang.templates.emptyListMsg + '</span>' +\r
 164                                                                         '</div>' );\r
 165                                                         }\r
 166                                                 });\r
 167                                 }\r
 168                         };\r
 169                 });\r
 170 })();\r