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