diff options
Diffstat (limited to 'sources/plugins/specialchar/dialogs/specialchar.js')
-rw-r--r-- | sources/plugins/specialchar/dialogs/specialchar.js | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/sources/plugins/specialchar/dialogs/specialchar.js b/sources/plugins/specialchar/dialogs/specialchar.js new file mode 100644 index 00000000..101d4ddc --- /dev/null +++ b/sources/plugins/specialchar/dialogs/specialchar.js | |||
@@ -0,0 +1,297 @@ | |||
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 | CKEDITOR.dialog.add( 'specialchar', function( editor ) { | ||
7 | // Simulate "this" of a dialog for non-dialog events. | ||
8 | // @type {CKEDITOR.dialog} | ||
9 | var dialog, | ||
10 | lang = editor.lang.specialchar; | ||
11 | |||
12 | var onChoice = function( evt ) { | ||
13 | var target, value; | ||
14 | if ( evt.data ) | ||
15 | target = evt.data.getTarget(); | ||
16 | else | ||
17 | target = new CKEDITOR.dom.element( evt ); | ||
18 | |||
19 | if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) ) { | ||
20 | target.removeClass( 'cke_light_background' ); | ||
21 | dialog.hide(); | ||
22 | |||
23 | // We must use "insertText" here to keep text styled. | ||
24 | var span = editor.document.createElement( 'span' ); | ||
25 | span.setHtml( value ); | ||
26 | editor.insertText( span.getText() ); | ||
27 | } | ||
28 | }; | ||
29 | |||
30 | var onClick = CKEDITOR.tools.addFunction( onChoice ); | ||
31 | |||
32 | var focusedNode; | ||
33 | |||
34 | var onFocus = function( evt, target ) { | ||
35 | var value; | ||
36 | target = target || evt.data.getTarget(); | ||
37 | |||
38 | if ( target.getName() == 'span' ) | ||
39 | target = target.getParent(); | ||
40 | |||
41 | if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) ) { | ||
42 | // Trigger blur manually if there is focused node. | ||
43 | if ( focusedNode ) | ||
44 | onBlur( null, focusedNode ); | ||
45 | |||
46 | var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement(); | ||
47 | |||
48 | dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( value ); | ||
49 | htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) ); | ||
50 | target.getParent().addClass( 'cke_light_background' ); | ||
51 | |||
52 | // Memorize focused node. | ||
53 | focusedNode = target; | ||
54 | } | ||
55 | }; | ||
56 | |||
57 | var onBlur = function( evt, target ) { | ||
58 | target = target || evt.data.getTarget(); | ||
59 | |||
60 | if ( target.getName() == 'span' ) | ||
61 | target = target.getParent(); | ||
62 | |||
63 | if ( target.getName() == 'a' ) { | ||
64 | dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( ' ' ); | ||
65 | dialog.getContentElement( 'info', 'htmlPreview' ).getElement().setHtml( ' ' ); | ||
66 | target.getParent().removeClass( 'cke_light_background' ); | ||
67 | |||
68 | focusedNode = undefined; | ||
69 | } | ||
70 | }; | ||
71 | |||
72 | var onKeydown = CKEDITOR.tools.addFunction( function( ev ) { | ||
73 | ev = new CKEDITOR.dom.event( ev ); | ||
74 | |||
75 | // Get an Anchor element. | ||
76 | var element = ev.getTarget(); | ||
77 | var relative, nodeToMove; | ||
78 | var keystroke = ev.getKeystroke(), | ||
79 | rtl = editor.lang.dir == 'rtl'; | ||
80 | |||
81 | switch ( keystroke ) { | ||
82 | // UP-ARROW | ||
83 | case 38: | ||
84 | // relative is TR | ||
85 | if ( ( relative = element.getParent().getParent().getPrevious() ) ) { | ||
86 | nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] ); | ||
87 | nodeToMove.focus(); | ||
88 | onBlur( null, element ); | ||
89 | onFocus( null, nodeToMove ); | ||
90 | } | ||
91 | ev.preventDefault(); | ||
92 | break; | ||
93 | // DOWN-ARROW | ||
94 | case 40: | ||
95 | // relative is TR | ||
96 | if ( ( relative = element.getParent().getParent().getNext() ) ) { | ||
97 | nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] ); | ||
98 | if ( nodeToMove && nodeToMove.type == 1 ) { | ||
99 | nodeToMove.focus(); | ||
100 | onBlur( null, element ); | ||
101 | onFocus( null, nodeToMove ); | ||
102 | } | ||
103 | } | ||
104 | ev.preventDefault(); | ||
105 | break; | ||
106 | // SPACE | ||
107 | // ENTER is already handled as onClick | ||
108 | case 32: | ||
109 | onChoice( { data: ev } ); | ||
110 | ev.preventDefault(); | ||
111 | break; | ||
112 | |||
113 | // RIGHT-ARROW | ||
114 | case rtl ? 37 : 39: | ||
115 | // relative is TD | ||
116 | if ( ( relative = element.getParent().getNext() ) ) { | ||
117 | nodeToMove = relative.getChild( 0 ); | ||
118 | if ( nodeToMove.type == 1 ) { | ||
119 | nodeToMove.focus(); | ||
120 | onBlur( null, element ); | ||
121 | onFocus( null, nodeToMove ); | ||
122 | ev.preventDefault( true ); | ||
123 | } else { | ||
124 | onBlur( null, element ); | ||
125 | } | ||
126 | } | ||
127 | // relative is TR | ||
128 | else if ( ( relative = element.getParent().getParent().getNext() ) ) { | ||
129 | nodeToMove = relative.getChild( [ 0, 0 ] ); | ||
130 | if ( nodeToMove && nodeToMove.type == 1 ) { | ||
131 | nodeToMove.focus(); | ||
132 | onBlur( null, element ); | ||
133 | onFocus( null, nodeToMove ); | ||
134 | ev.preventDefault( true ); | ||
135 | } else { | ||
136 | onBlur( null, element ); | ||
137 | } | ||
138 | } | ||
139 | break; | ||
140 | |||
141 | // LEFT-ARROW | ||
142 | case rtl ? 39 : 37: | ||
143 | // relative is TD | ||
144 | if ( ( relative = element.getParent().getPrevious() ) ) { | ||
145 | nodeToMove = relative.getChild( 0 ); | ||
146 | nodeToMove.focus(); | ||
147 | onBlur( null, element ); | ||
148 | onFocus( null, nodeToMove ); | ||
149 | ev.preventDefault( true ); | ||
150 | } | ||
151 | // relative is TR | ||
152 | else if ( ( relative = element.getParent().getParent().getPrevious() ) ) { | ||
153 | nodeToMove = relative.getLast().getChild( 0 ); | ||
154 | nodeToMove.focus(); | ||
155 | onBlur( null, element ); | ||
156 | onFocus( null, nodeToMove ); | ||
157 | ev.preventDefault( true ); | ||
158 | } else { | ||
159 | onBlur( null, element ); | ||
160 | } | ||
161 | break; | ||
162 | default: | ||
163 | // Do not stop not handled events. | ||
164 | return; | ||
165 | } | ||
166 | } ); | ||
167 | |||
168 | return { | ||
169 | title: lang.title, | ||
170 | minWidth: 430, | ||
171 | minHeight: 280, | ||
172 | buttons: [ CKEDITOR.dialog.cancelButton ], | ||
173 | charColumns: 17, | ||
174 | onLoad: function() { | ||
175 | var columns = this.definition.charColumns, | ||
176 | chars = editor.config.specialChars; | ||
177 | |||
178 | var charsTableLabel = CKEDITOR.tools.getNextId() + '_specialchar_table_label'; | ||
179 | var html = [ '<table role="listbox" aria-labelledby="' + charsTableLabel + '"' + | ||
180 | ' style="width: 320px; height: 100%; border-collapse: separate;"' + | ||
181 | ' align="center" cellspacing="2" cellpadding="2" border="0">' ]; | ||
182 | |||
183 | var i = 0, | ||
184 | size = chars.length, | ||
185 | character, charDesc; | ||
186 | |||
187 | while ( i < size ) { | ||
188 | html.push( '<tr role="presentation">' ); | ||
189 | |||
190 | for ( var j = 0; j < columns; j++, i++ ) { | ||
191 | if ( ( character = chars[ i ] ) ) { | ||
192 | charDesc = ''; | ||
193 | |||
194 | if ( character instanceof Array ) { | ||
195 | charDesc = character[ 1 ]; | ||
196 | character = character[ 0 ]; | ||
197 | } else { | ||
198 | var _tmpName = character.replace( '&', '' ).replace( ';', '' ).replace( '#', '' ); | ||
199 | |||
200 | // Use character in case description unavailable. | ||
201 | charDesc = lang[ _tmpName ] || character; | ||
202 | } | ||
203 | |||
204 | var charLabelId = 'cke_specialchar_label_' + i + '_' + CKEDITOR.tools.getNextNumber(); | ||
205 | |||
206 | html.push( '<td class="cke_dark_background" style="cursor: default" role="presentation">' + | ||
207 | '<a href="javascript: void(0);" role="option"' + | ||
208 | ' aria-posinset="' + ( i + 1 ) + '"', ' aria-setsize="' + size + '"', ' aria-labelledby="' + charLabelId + '"', ' class="cke_specialchar" title="', CKEDITOR.tools.htmlEncode( charDesc ), '"' + | ||
209 | ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydown + ', event, this )"' + | ||
210 | ' onclick="CKEDITOR.tools.callFunction(' + onClick + ', this); return false;"' + | ||
211 | ' tabindex="-1">' + | ||
212 | '<span style="margin: 0 auto;cursor: inherit">' + | ||
213 | character + | ||
214 | '</span>' + | ||
215 | '<span class="cke_voice_label" id="' + charLabelId + '">' + | ||
216 | charDesc + | ||
217 | '</span></a>' ); | ||
218 | } else { | ||
219 | html.push( '<td class="cke_dark_background"> ' ); | ||
220 | } | ||
221 | |||
222 | html.push( '</td>' ); | ||
223 | } | ||
224 | html.push( '</tr>' ); | ||
225 | } | ||
226 | |||
227 | html.push( '</tbody></table>', '<span id="' + charsTableLabel + '" class="cke_voice_label">' + lang.options + '</span>' ); | ||
228 | |||
229 | this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) ); | ||
230 | }, | ||
231 | contents: [ { | ||
232 | id: 'info', | ||
233 | label: editor.lang.common.generalTab, | ||
234 | title: editor.lang.common.generalTab, | ||
235 | padding: 0, | ||
236 | align: 'top', | ||
237 | elements: [ { | ||
238 | type: 'hbox', | ||
239 | align: 'top', | ||
240 | widths: [ '320px', '90px' ], | ||
241 | children: [ { | ||
242 | type: 'html', | ||
243 | id: 'charContainer', | ||
244 | html: '', | ||
245 | onMouseover: onFocus, | ||
246 | onMouseout: onBlur, | ||
247 | focus: function() { | ||
248 | var firstChar = this.getElement().getElementsByTag( 'a' ).getItem( 0 ); | ||
249 | setTimeout( function() { | ||
250 | firstChar.focus(); | ||
251 | onFocus( null, firstChar ); | ||
252 | }, 0 ); | ||
253 | }, | ||
254 | onShow: function() { | ||
255 | var firstChar = this.getElement().getChild( [ 0, 0, 0, 0, 0 ] ); | ||
256 | setTimeout( function() { | ||
257 | firstChar.focus(); | ||
258 | onFocus( null, firstChar ); | ||
259 | }, 0 ); | ||
260 | }, | ||
261 | onLoad: function( event ) { | ||
262 | dialog = event.sender; | ||
263 | } | ||
264 | }, | ||
265 | { | ||
266 | type: 'hbox', | ||
267 | align: 'top', | ||
268 | widths: [ '100%' ], | ||
269 | children: [ { | ||
270 | type: 'vbox', | ||
271 | align: 'top', | ||
272 | children: [ | ||
273 | { | ||
274 | type: 'html', | ||
275 | html: '<div></div>' | ||
276 | }, | ||
277 | { | ||
278 | type: 'html', | ||
279 | id: 'charPreview', | ||
280 | className: 'cke_dark_background', | ||
281 | style: 'border:1px solid #eeeeee;font-size:28px;height:40px;width:70px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;', | ||
282 | html: '<div> </div>' | ||
283 | }, | ||
284 | { | ||
285 | type: 'html', | ||
286 | id: 'htmlPreview', | ||
287 | className: 'cke_dark_background', | ||
288 | style: 'border:1px solid #eeeeee;font-size:14px;height:20px;width:70px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;', | ||
289 | html: '<div> </div>' | ||
290 | } | ||
291 | ] | ||
292 | } ] | ||
293 | } ] | ||
294 | } ] | ||
295 | } ] | ||
296 | }; | ||
297 | } ); | ||