vanilla ckeditor-3.0

[ckeditor.git] / _source / plugins / templates / dialogs / templates.js

diff --git a/_source/plugins/templates/dialogs/templates.js b/_source/plugins/templates/dialogs/templates.js
new file mode 100644 (file)
index 0000000..752e7be
--- /dev/null
+++ b/_source/plugins/templates/dialogs/templates.js
@@ -0,0 +1,170 @@
+/*\r
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+\r
+(function()\r
+{\r
+       var doc = CKEDITOR.document;\r
+\r
+       var listId = 'cke' + CKEDITOR.tools.getNextNumber();\r
+\r
+       // Constructs the HTML view of the specified templates data.\r
+       function renderTemplatesList( editor, templatesDefinitions )\r
+       {\r
+               var listDiv = doc.getById( listId );\r
+\r
+               // clear loading wait text.\r
+               listDiv.setHtml( '' );\r
+\r
+               for ( var i = 0 ; i < templatesDefinitions.length ; i++ )\r
+               {\r
+                       var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),\r
+                               imagesPath = definition.imagesPath,\r
+                               templates = definition.templates;\r
+\r
+                       for ( var j = 0 ; j < templates.length ; j++ )\r
+                       {\r
+                               var template = templates[ j ];\r
+                               listDiv.append( createTemplateItem( editor, template, imagesPath ) );\r
+                       }\r
+               }\r
+       }\r
+\r
+       function createTemplateItem( editor, template, imagesPath )\r
+       {\r
+               var div = doc.createElement( 'div' );\r
+               div.setAttribute( 'class', 'cke_tpl_item' );\r
+\r
+               // Build the inner HTML of our new item DIV.\r
+               var html = '<table style="width:350px;" class="cke_tpl_preview"><tr>';\r
+\r
+               if( template.image && imagesPath )\r
+                       html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"></td>';\r
+\r
+               html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';\r
+\r
+               if( template.description )\r
+                       html += '<span>' + template.description + '</span>';\r
+\r
+               html += '</td></tr></table>';\r
+\r
+               div.setHtml( html );\r
+\r
+               div.on( 'mouseover', function()\r
+                       {\r
+                               div.addClass( 'cke_tpl_hover' );\r
+                       });\r
+\r
+               div.on( 'mouseout', function()\r
+                       {\r
+                               div.removeClass( 'cke_tpl_hover' );\r
+                       });\r
+\r
+               div.on( 'click', function()\r
+                       {\r
+                               insertTemplate( editor, template.html );\r
+                       });\r
+\r
+               return div;\r
+       }\r
+\r
+       /**\r
+        * Insert the specified template content\r
+        * to document.\r
+        * @param {Number} index\r
+        */\r
+       function insertTemplate( editor, html )\r
+       {\r
+               var dialog = CKEDITOR.dialog.getCurrent(),\r
+                       isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );\r
+\r
+               if( isInsert )\r
+               {\r
+                       editor.setData( html );\r
+               }\r
+               else\r
+               {\r
+                       editor.insertHtml( html );\r
+               }\r
+\r
+               dialog.hide();\r
+       }\r
+\r
+       CKEDITOR.dialog.add( 'templates', function( editor )\r
+               {\r
+                       // Load skin at first.\r
+                       CKEDITOR.skins.load( editor, 'templates' );\r
+\r
+                       /**\r
+                        * Load templates once.\r
+                        */\r
+                       var isLoaded = false;\r
+\r
+                       return {\r
+                               title :editor.lang.templates.title,\r
+\r
+                               minWidth : CKEDITOR.env.ie ? 440 : 400,\r
+                               minHeight : 340,\r
+\r
+                               contents :\r
+                               [\r
+                                       {\r
+                                               id :'selectTpl',\r
+                                               label : editor.lang.templates.title,\r
+                                               elements :\r
+                                               [\r
+                                                       {\r
+                                                               type : 'vbox',\r
+                                                               padding : 5,\r
+                                                               children :\r
+                                                               [\r
+                                                                       {\r
+                                                                               type : 'html',\r
+                                                                               html :\r
+                                                                                       '<span>'  +\r
+                                                                                               editor.lang.templates.selectPromptMsg +\r
+                                                                                       '</span>'\r
+                                                                       },\r
+                                                                       {\r
+                                                                               type : 'html',\r
+                                                                               html :\r
+                                                                                       '<div id="' + listId + '" class="cke_tpl_list">' +\r
+                                                                                               '<div class="cke_tpl_loading"><span></span></div>' +\r
+                                                                                       '</div>'\r
+                                                                       },\r
+                                                                       {\r
+                                                                               id : 'chkInsertOpt',\r
+                                                                               type : 'checkbox',\r
+                                                                               label : editor.lang.templates.insertOption,\r
+                                                                               'default' : editor.config.templates_replaceContent\r
+                                                                       }\r
+                                                               ]\r
+                                                       }\r
+                                               ]\r
+                                       }\r
+                               ],\r
+\r
+                               buttons : [ CKEDITOR.dialog.cancelButton ],\r
+\r
+                               onShow : function()\r
+                               {\r
+                                       CKEDITOR.loadTemplates( editor.config.templates_files, function()\r
+                                               {\r
+                                                       var templates = editor.config.templates.split( ',' );\r
+\r
+                                                       if ( templates.length )\r
+                                                               renderTemplatesList( editor, templates );\r
+                                                       else\r
+                                                       {\r
+                                                               var listCtEl = doc.getById( listId );\r
+                                                               listCtEl.setHtml(\r
+                                                                       '<div class="cke_tpl_empty">' +\r
+                                                                               '<span>' + editor.lang.templates.emptyListMsg + '</span>' +\r
+                                                                       '</div>' );\r
+                                                       }\r
+                                               });\r
+                               }\r
+                       };\r
+               });\r
+})();\r