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