diff options
Diffstat (limited to 'sources/plugins/smiley/dialogs/smiley.js')
-rw-r--r-- | sources/plugins/smiley/dialogs/smiley.js | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/sources/plugins/smiley/dialogs/smiley.js b/sources/plugins/smiley/dialogs/smiley.js new file mode 100644 index 00000000..4d9a2723 --- /dev/null +++ b/sources/plugins/smiley/dialogs/smiley.js | |||
@@ -0,0 +1,193 @@ | |||
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( 'smiley', function( editor ) { | ||
7 | var config = editor.config, | ||
8 | lang = editor.lang.smiley, | ||
9 | images = config.smiley_images, | ||
10 | columns = config.smiley_columns || 8, | ||
11 | i; | ||
12 | |||
13 | // Simulate "this" of a dialog for non-dialog events. | ||
14 | // @type {CKEDITOR.dialog} | ||
15 | var dialog; | ||
16 | var onClick = function( evt ) { | ||
17 | var target = evt.data.getTarget(), | ||
18 | targetName = target.getName(); | ||
19 | |||
20 | if ( targetName == 'a' ) | ||
21 | target = target.getChild( 0 ); | ||
22 | else if ( targetName != 'img' ) | ||
23 | return; | ||
24 | |||
25 | var src = target.getAttribute( 'cke_src' ), | ||
26 | title = target.getAttribute( 'title' ); | ||
27 | |||
28 | var img = editor.document.createElement( 'img', { | ||
29 | attributes: { | ||
30 | src: src, | ||
31 | 'data-cke-saved-src': src, | ||
32 | title: title, | ||
33 | alt: title, | ||
34 | width: target.$.width, | ||
35 | height: target.$.height | ||
36 | } | ||
37 | } ); | ||
38 | |||
39 | editor.insertElement( img ); | ||
40 | |||
41 | dialog.hide(); | ||
42 | evt.data.preventDefault(); | ||
43 | }; | ||
44 | |||
45 | var onKeydown = CKEDITOR.tools.addFunction( function( ev, element ) { | ||
46 | ev = new CKEDITOR.dom.event( ev ); | ||
47 | element = new CKEDITOR.dom.element( element ); | ||
48 | var relative, nodeToMove; | ||
49 | |||
50 | var keystroke = ev.getKeystroke(), | ||
51 | rtl = editor.lang.dir == 'rtl'; | ||
52 | switch ( keystroke ) { | ||
53 | // UP-ARROW | ||
54 | case 38: | ||
55 | // relative is TR | ||
56 | if ( ( relative = element.getParent().getParent().getPrevious() ) ) { | ||
57 | nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] ); | ||
58 | nodeToMove.focus(); | ||
59 | } | ||
60 | ev.preventDefault(); | ||
61 | break; | ||
62 | // DOWN-ARROW | ||
63 | case 40: | ||
64 | // relative is TR | ||
65 | if ( ( relative = element.getParent().getParent().getNext() ) ) { | ||
66 | nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] ); | ||
67 | if ( nodeToMove ) | ||
68 | nodeToMove.focus(); | ||
69 | } | ||
70 | ev.preventDefault(); | ||
71 | break; | ||
72 | // ENTER | ||
73 | // SPACE | ||
74 | case 32: | ||
75 | onClick( { data: ev } ); | ||
76 | ev.preventDefault(); | ||
77 | break; | ||
78 | |||
79 | // RIGHT-ARROW | ||
80 | case rtl ? 37 : 39: | ||
81 | // relative is TD | ||
82 | if ( ( relative = element.getParent().getNext() ) ) { | ||
83 | nodeToMove = relative.getChild( 0 ); | ||
84 | nodeToMove.focus(); | ||
85 | ev.preventDefault( true ); | ||
86 | } | ||
87 | // relative is TR | ||
88 | else if ( ( relative = element.getParent().getParent().getNext() ) ) { | ||
89 | nodeToMove = relative.getChild( [ 0, 0 ] ); | ||
90 | if ( nodeToMove ) | ||
91 | nodeToMove.focus(); | ||
92 | ev.preventDefault( true ); | ||
93 | } | ||
94 | break; | ||
95 | |||
96 | // LEFT-ARROW | ||
97 | case rtl ? 39 : 37: | ||
98 | // relative is TD | ||
99 | if ( ( relative = element.getParent().getPrevious() ) ) { | ||
100 | nodeToMove = relative.getChild( 0 ); | ||
101 | nodeToMove.focus(); | ||
102 | ev.preventDefault( true ); | ||
103 | } | ||
104 | // relative is TR | ||
105 | else if ( ( relative = element.getParent().getParent().getPrevious() ) ) { | ||
106 | nodeToMove = relative.getLast().getChild( 0 ); | ||
107 | nodeToMove.focus(); | ||
108 | ev.preventDefault( true ); | ||
109 | } | ||
110 | break; | ||
111 | default: | ||
112 | // Do not stop not handled events. | ||
113 | return; | ||
114 | } | ||
115 | } ); | ||
116 | |||
117 | // Build the HTML for the smiley images table. | ||
118 | var labelId = CKEDITOR.tools.getNextId() + '_smiley_emtions_label'; | ||
119 | var html = [ | ||
120 | '<div>' + | ||
121 | '<span id="' + labelId + '" class="cke_voice_label">' + lang.options + '</span>', | ||
122 | '<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%;border-collapse:separate;" cellspacing="2" cellpadding="2"', | ||
123 | CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '', | ||
124 | '><tbody>' | ||
125 | ]; | ||
126 | |||
127 | var size = images.length; | ||
128 | for ( i = 0; i < size; i++ ) { | ||
129 | if ( i % columns === 0 ) | ||
130 | html.push( '<tr role="presentation">' ); | ||
131 | |||
132 | var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber(); | ||
133 | html.push( | ||
134 | '<td class="cke_dark_background cke_centered" style="vertical-align: middle;" role="presentation">' + | ||
135 | '<a href="javascript:void(0)" role="option"', ' aria-posinset="' + ( i + 1 ) + '"', ' aria-setsize="' + size + '"', ' aria-labelledby="' + smileyLabelId + '"', | ||
136 | ' class="cke_smile cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">', | ||
137 | '<img class="cke_hand" title="', config.smiley_descriptions[ i ], '"' + | ||
138 | ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[ i ], '"', | ||
139 | ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"', | ||
140 | // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct. | ||
141 | ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ), '>' + | ||
142 | '<span id="' + smileyLabelId + '" class="cke_voice_label">' + config.smiley_descriptions[ i ] + '</span>' + | ||
143 | '</a>', '</td>' | ||
144 | ); | ||
145 | |||
146 | if ( i % columns == columns - 1 ) | ||
147 | html.push( '</tr>' ); | ||
148 | } | ||
149 | |||
150 | if ( i < columns - 1 ) { | ||
151 | for ( ; i < columns - 1; i++ ) | ||
152 | html.push( '<td></td>' ); | ||
153 | html.push( '</tr>' ); | ||
154 | } | ||
155 | |||
156 | html.push( '</tbody></table></div>' ); | ||
157 | |||
158 | var smileySelector = { | ||
159 | type: 'html', | ||
160 | id: 'smileySelector', | ||
161 | html: html.join( '' ), | ||
162 | onLoad: function( event ) { | ||
163 | dialog = event.sender; | ||
164 | }, | ||
165 | focus: function() { | ||
166 | var self = this; | ||
167 | // IE need a while to move the focus (#6539). | ||
168 | setTimeout( function() { | ||
169 | var firstSmile = self.getElement().getElementsByTag( 'a' ).getItem( 0 ); | ||
170 | firstSmile.focus(); | ||
171 | }, 0 ); | ||
172 | }, | ||
173 | onClick: onClick, | ||
174 | style: 'width: 100%; border-collapse: separate;' | ||
175 | }; | ||
176 | |||
177 | return { | ||
178 | title: editor.lang.smiley.title, | ||
179 | minWidth: 270, | ||
180 | minHeight: 120, | ||
181 | contents: [ { | ||
182 | id: 'tab1', | ||
183 | label: '', | ||
184 | title: '', | ||
185 | expand: true, | ||
186 | padding: 0, | ||
187 | elements: [ | ||
188 | smileySelector | ||
189 | ] | ||
190 | } ], | ||
191 | buttons: [ CKEDITOR.dialog.cancelButton ] | ||
192 | }; | ||
193 | } ); | ||