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