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