diff options
Diffstat (limited to 'sources/plugins/templates/dialogs')
-rw-r--r-- | sources/plugins/templates/dialogs/templates.css | 84 | ||||
-rw-r--r-- | sources/plugins/templates/dialogs/templates.js | 199 |
2 files changed, 283 insertions, 0 deletions
diff --git a/sources/plugins/templates/dialogs/templates.css b/sources/plugins/templates/dialogs/templates.css new file mode 100644 index 00000000..7fc4a1bc --- /dev/null +++ b/sources/plugins/templates/dialogs/templates.css | |||
@@ -0,0 +1,84 @@ | |||
1 | /* | ||
2 | Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. | ||
3 | For licensing, see LICENSE.md or http://ckeditor.com/license | ||
4 | */ | ||
5 | |||
6 | .cke_tpl_list | ||
7 | { | ||
8 | border: #dcdcdc 2px solid; | ||
9 | background-color: #ffffff; | ||
10 | overflow-y: auto; | ||
11 | overflow-x: hidden; | ||
12 | width: 100%; | ||
13 | height: 220px; | ||
14 | } | ||
15 | |||
16 | .cke_tpl_item | ||
17 | { | ||
18 | margin: 5px; | ||
19 | padding: 7px; | ||
20 | border: #eeeeee 1px solid; | ||
21 | *width: 88%; | ||
22 | } | ||
23 | |||
24 | .cke_tpl_preview | ||
25 | { | ||
26 | border-collapse: separate; | ||
27 | text-indent:0; | ||
28 | width: 100%; | ||
29 | } | ||
30 | .cke_tpl_preview td | ||
31 | { | ||
32 | padding: 2px; | ||
33 | vertical-align: middle; | ||
34 | } | ||
35 | .cke_tpl_preview .cke_tpl_preview_img | ||
36 | { | ||
37 | width: 100px; | ||
38 | } | ||
39 | .cke_tpl_preview span | ||
40 | { | ||
41 | white-space: normal; | ||
42 | } | ||
43 | |||
44 | .cke_tpl_title | ||
45 | { | ||
46 | font-weight: bold; | ||
47 | } | ||
48 | |||
49 | .cke_tpl_list a:hover .cke_tpl_item, | ||
50 | .cke_tpl_list a:focus .cke_tpl_item, | ||
51 | .cke_tpl_list a:active .cke_tpl_item | ||
52 | { | ||
53 | border: #ff9933 1px solid; | ||
54 | background-color: #fffacd; | ||
55 | } | ||
56 | |||
57 | .cke_tpl_list a:hover *, | ||
58 | .cke_tpl_list a:focus *, | ||
59 | .cke_tpl_list a:active * | ||
60 | { | ||
61 | cursor: pointer; | ||
62 | } | ||
63 | |||
64 | /* IE Quirks contextual selectors children will not get :hover transition until | ||
65 | the hover style of the link itself contains certain CSS declarations. */ | ||
66 | .cke_browser_quirks .cke_tpl_list a:active, | ||
67 | .cke_browser_quirks .cke_tpl_list a:hover, | ||
68 | .cke_browser_quirks .cke_tpl_list a:focus | ||
69 | { | ||
70 | background-position: 0 0; | ||
71 | } | ||
72 | |||
73 | .cke_hc .cke_tpl_list a:hover .cke_tpl_item, | ||
74 | .cke_hc .cke_tpl_list a:focus .cke_tpl_item, | ||
75 | .cke_hc .cke_tpl_list a:active .cke_tpl_item | ||
76 | { | ||
77 | border-width: 3px; | ||
78 | } | ||
79 | |||
80 | .cke_tpl_empty, .cke_tpl_loading | ||
81 | { | ||
82 | text-align: center; | ||
83 | padding: 5px; | ||
84 | } | ||
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 | } )(); | ||