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