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