1 /*
  2 Copyright (c) 2003-2012, 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 	CKEDITOR.dialog.add( 'templates', function( editor )
 11 		{
 12 			// Constructs the HTML view of the specified templates data.
 13 			function renderTemplatesList( container, templatesDefinitions )
 14 			{
 15 				// clear loading wait text.
 16 				container.setHtml( '' );
 17 
 18 				for ( var i = 0, totalDefs = templatesDefinitions.length ; i < totalDefs ; i++ )
 19 				{
 20 					var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
 21 						imagesPath = definition.imagesPath,
 22 						templates = definition.templates,
 23 						count = templates.length;
 24 
 25 					for ( var j = 0 ; j < count ; j++ )
 26 					{
 27 						var template = templates[ j ],
 28 							item =  createTemplateItem( template, imagesPath );
 29 						item.setAttribute( 'aria-posinset', j + 1 );
 30 						item.setAttribute( 'aria-setsize', count );
 31 						container.append( item );
 32 					}
 33 				}
 34 			}
 35 
 36 			function createTemplateItem( template, imagesPath )
 37 			{
 38 				var item = CKEDITOR.dom.element.createFromHtml(
 39 						'<a href="javascript:void(0)" tabIndex="-1" role="option" >' +
 40 							'<div class="cke_tpl_item"></div>' +
 41 						'</a>' );
 42 
 43 				// Build the inner HTML of our new item DIV.
 44 				var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';
 45 
 46 				if ( template.image && imagesPath )
 47 					html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"' + ( CKEDITOR.env.ie6Compat ? ' onload="this.width=this.width"' : '' ) + ' alt="" title=""></td>';
 48 
 49 				html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
 50 
 51 				if ( template.description )
 52 					html += '<span>' + template.description + '</span>';
 53 
 54 				html += '</td></tr></table>';
 55 
 56 				item.getFirst().setHtml( html );
 57 
 58 				item.on( 'click', function() { insertTemplate( template.html ); } );
 59 
 60 				return item;
 61 			}
 62 
 63 			/**
 64 			 * Insert the specified template content into editor.
 65 			 * @param {Number} index
 66 			 */
 67 			function insertTemplate( html )
 68 			{
 69 				var dialog = CKEDITOR.dialog.getCurrent(),
 70 					isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
 71 
 72 				if ( isInsert )
 73 				{
 74 					// Everything should happen after the document is loaded (#4073).
 75 					editor.on( 'contentDom', function( evt )
 76 					{
 77 						evt.removeListener();
 78 						dialog.hide();
 79 
 80 						// Place the cursor at the first editable place.
 81 						var range = new CKEDITOR.dom.range( editor.document );
 82 						range.moveToElementEditStart( editor.document.getBody() );
 83 						range.select( 1 );
 84 						setTimeout( function()
 85 						{
 86 							editor.fire( 'saveSnapshot' );
 87 						}, 0 );
 88 					});
 89 
 90 					editor.fire( 'saveSnapshot' );
 91 					editor.setData( html );
 92 				}
 93 				else
 94 				{
 95 					editor.insertHtml( html );
 96 					dialog.hide();
 97 				}
 98 			}
 99 
100 			function keyNavigation( evt )
101 			{
102 				var target = evt.data.getTarget(),
103 						onList = listContainer.equals( target );
104 
105 				// Keyboard navigation for template list.
106 				if (  onList || listContainer.contains( target ) )
107 				{
108 					var keystroke = evt.data.getKeystroke(),
109 						items = listContainer.getElementsByTag( 'a' ),
110 						focusItem;
111 
112 					if ( items )
113 					{
114 						// Focus not yet onto list items?
115 						if ( onList )
116 							focusItem = items.getItem( 0 );
117 						else
118 						{
119 							switch ( keystroke )
120 							{
121 								case 40 :					// ARROW-DOWN
122 									focusItem = target.getNext();
123 									break;
124 
125 								case 38 :					// ARROW-UP
126 									focusItem = target.getPrevious();
127 									break;
128 
129 								case 13 :					// ENTER
130 								case 32 :					// SPACE
131 									target.fire( 'click' );
132 							}
133 						}
134 
135 						if ( focusItem )
136 						{
137 							focusItem.focus();
138 							evt.data.preventDefault();
139 						}
140 					}
141 				}
142 			}
143 
144 			// Load skin at first.
145 			CKEDITOR.skins.load( editor, 'templates' );
146 
147 			var listContainer;
148 
149 			var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),
150 				lang = editor.lang.templates,
151 				config = editor.config;
152 			return {
153 				title :editor.lang.templates.title,
154 
155 				minWidth : CKEDITOR.env.ie ? 440 : 400,
156 				minHeight : 340,
157 
158 				contents :
159 				[
160 					{
161 						id :'selectTpl',
162 						label : lang.title,
163 						elements :
164 						[
165 							{
166 								type : 'vbox',
167 								padding : 5,
168 								children :
169 								[
170 									{
171 										id : 'selectTplText',
172 										type : 'html',
173 										html :
174 											'<span>'  +
175 												lang.selectPromptMsg +
176 											'</span>'
177 									},
178 									{
179 										id : 'templatesList',
180 										type : 'html',
181 										focus: true,
182 										html :
183 											'<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="' + templateListLabelId+ '">' +
184 												'<div class="cke_tpl_loading"><span></span></div>' +
185 											'</div>' +
186 											'<span class="cke_voice_label" id="' + templateListLabelId + '">' + lang.options+ '</span>'
187 									},
188 									{
189 										id : 'chkInsertOpt',
190 										type : 'checkbox',
191 										label : lang.insertOption,
192 										'default' : config.templates_replaceContent
193 									}
194 								]
195 							}
196 						]
197 					}
198 				],
199 
200 				buttons : [ CKEDITOR.dialog.cancelButton ],
201 
202 				onShow : function()
203 				{
204 					var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
205 					listContainer = templatesListField.getElement();
206 
207 					CKEDITOR.loadTemplates( config.templates_files, function()
208 						{
209 							var templates = ( config.templates || 'default' ).split( ',' );
210 
211 							if ( templates.length )
212 							{
213 								renderTemplatesList( listContainer, templates );
214 								templatesListField.focus();
215 							}
216 							else
217 							{
218 								listContainer.setHtml(
219 									'<div class="cke_tpl_empty">' +
220 										'<span>' + lang.emptyListMsg + '</span>' +
221 									'</div>' );
222 							}
223 						});
224 
225 					this._.element.on( 'keydown', keyNavigation );
226 				},
227 
228 				onHide : function()
229 				{
230 					this._.element.removeListener( 'keydown', keyNavigation );
231 				}
232 			};
233 		});
234 })();
235