diff options
Diffstat (limited to 'sources/plugins/colordialog/dialogs/colordialog.js')
-rw-r--r-- | sources/plugins/colordialog/dialogs/colordialog.js | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/sources/plugins/colordialog/dialogs/colordialog.js b/sources/plugins/colordialog/dialogs/colordialog.js new file mode 100644 index 00000000..f5ecd483 --- /dev/null +++ b/sources/plugins/colordialog/dialogs/colordialog.js | |||
@@ -0,0 +1,327 @@ | |||
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( 'colordialog', function( editor ) { | ||
7 | // Define some shorthands. | ||
8 | var $el = CKEDITOR.dom.element, | ||
9 | $doc = CKEDITOR.document, | ||
10 | lang = editor.lang.colordialog; | ||
11 | |||
12 | // Reference the dialog. | ||
13 | var dialog; | ||
14 | |||
15 | var spacer = { | ||
16 | type: 'html', | ||
17 | html: ' ' | ||
18 | }; | ||
19 | |||
20 | var selected; | ||
21 | |||
22 | function clearSelected() { | ||
23 | $doc.getById( selHiColorId ).removeStyle( 'background-color' ); | ||
24 | dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' ); | ||
25 | selected && selected.removeAttribute( 'aria-selected' ); | ||
26 | selected = null; | ||
27 | } | ||
28 | |||
29 | function updateSelected( evt ) { | ||
30 | var target = evt.data.getTarget(), | ||
31 | color; | ||
32 | |||
33 | if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) ) { | ||
34 | selected = target; | ||
35 | selected.setAttribute( 'aria-selected', true ); | ||
36 | dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color ); | ||
37 | } | ||
38 | } | ||
39 | |||
40 | // Basing black-white decision off of luma scheme using the Rec. 709 version | ||
41 | function whiteOrBlack( color ) { | ||
42 | color = color.replace( /^#/, '' ); | ||
43 | for ( var i = 0, rgb = []; i <= 2; i++ ) | ||
44 | rgb[ i ] = parseInt( color.substr( i * 2, 2 ), 16 ); | ||
45 | var luma = ( 0.2126 * rgb[ 0 ] ) + ( 0.7152 * rgb[ 1 ] ) + ( 0.0722 * rgb[ 2 ] ); | ||
46 | return '#' + ( luma >= 165 ? '000' : 'fff' ); | ||
47 | } | ||
48 | |||
49 | // Distinguish focused and hover states. | ||
50 | var focused, hovered; | ||
51 | |||
52 | // Apply highlight style. | ||
53 | function updateHighlight( event ) { | ||
54 | // Convert to event. | ||
55 | !event.name && ( event = new CKEDITOR.event( event ) ); | ||
56 | |||
57 | var isFocus = !( /mouse/ ).test( event.name ), | ||
58 | target = event.data.getTarget(), | ||
59 | color; | ||
60 | |||
61 | if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) ) { | ||
62 | removeHighlight( event ); | ||
63 | |||
64 | isFocus ? focused = target : hovered = target; | ||
65 | |||
66 | // Apply outline style to show focus. | ||
67 | if ( isFocus ) { | ||
68 | target.setStyle( 'border-color', whiteOrBlack( color ) ); | ||
69 | target.setStyle( 'border-style', 'dotted' ); | ||
70 | } | ||
71 | |||
72 | $doc.getById( hicolorId ).setStyle( 'background-color', color ); | ||
73 | $doc.getById( hicolorTextId ).setHtml( color ); | ||
74 | } | ||
75 | } | ||
76 | |||
77 | function clearHighlight() { | ||
78 | var color = focused.getChild( 0 ).getHtml(); | ||
79 | focused.setStyle( 'border-color', color ); | ||
80 | focused.setStyle( 'border-style', 'solid' ); | ||
81 | $doc.getById( hicolorId ).removeStyle( 'background-color' ); | ||
82 | $doc.getById( hicolorTextId ).setHtml( ' ' ); | ||
83 | focused = null; | ||
84 | } | ||
85 | |||
86 | // Remove previously focused style. | ||
87 | function removeHighlight( event ) { | ||
88 | var isFocus = !( /mouse/ ).test( event.name ), | ||
89 | target = isFocus && focused; | ||
90 | |||
91 | if ( target ) { | ||
92 | var color = target.getChild( 0 ).getHtml(); | ||
93 | target.setStyle( 'border-color', color ); | ||
94 | target.setStyle( 'border-style', 'solid' ); | ||
95 | } | ||
96 | |||
97 | if ( !( focused || hovered ) ) { | ||
98 | $doc.getById( hicolorId ).removeStyle( 'background-color' ); | ||
99 | $doc.getById( hicolorTextId ).setHtml( ' ' ); | ||
100 | } | ||
101 | } | ||
102 | |||
103 | function onKeyStrokes( evt ) { | ||
104 | var domEvt = evt.data; | ||
105 | |||
106 | var element = domEvt.getTarget(); | ||
107 | var relative, nodeToMove; | ||
108 | var keystroke = domEvt.getKeystroke(), | ||
109 | rtl = editor.lang.dir == 'rtl'; | ||
110 | |||
111 | switch ( keystroke ) { | ||
112 | // UP-ARROW | ||
113 | case 38: | ||
114 | // relative is TR | ||
115 | if ( ( relative = element.getParent().getPrevious() ) ) { | ||
116 | nodeToMove = relative.getChild( [ element.getIndex() ] ); | ||
117 | nodeToMove.focus(); | ||
118 | } | ||
119 | domEvt.preventDefault(); | ||
120 | break; | ||
121 | // DOWN-ARROW | ||
122 | case 40: | ||
123 | // relative is TR | ||
124 | if ( ( relative = element.getParent().getNext() ) ) { | ||
125 | nodeToMove = relative.getChild( [ element.getIndex() ] ); | ||
126 | if ( nodeToMove && nodeToMove.type == 1 ) | ||
127 | nodeToMove.focus(); | ||
128 | |||
129 | } | ||
130 | domEvt.preventDefault(); | ||
131 | break; | ||
132 | |||
133 | // SPACE | ||
134 | // ENTER | ||
135 | case 32: | ||
136 | case 13: | ||
137 | updateSelected( evt ); | ||
138 | domEvt.preventDefault(); | ||
139 | break; | ||
140 | |||
141 | // RIGHT-ARROW | ||
142 | case rtl ? 37 : 39: | ||
143 | // relative is TD | ||
144 | if ( ( nodeToMove = element.getNext() ) ) { | ||
145 | if ( nodeToMove.type == 1 ) { | ||
146 | nodeToMove.focus(); | ||
147 | domEvt.preventDefault( true ); | ||
148 | } | ||
149 | } | ||
150 | // relative is TR | ||
151 | else if ( ( relative = element.getParent().getNext() ) ) { | ||
152 | nodeToMove = relative.getChild( [ 0 ] ); | ||
153 | if ( nodeToMove && nodeToMove.type == 1 ) { | ||
154 | nodeToMove.focus(); | ||
155 | domEvt.preventDefault( true ); | ||
156 | } | ||
157 | } | ||
158 | break; | ||
159 | |||
160 | // LEFT-ARROW | ||
161 | case rtl ? 39 : 37: | ||
162 | // relative is TD | ||
163 | if ( ( nodeToMove = element.getPrevious() ) ) { | ||
164 | nodeToMove.focus(); | ||
165 | domEvt.preventDefault( true ); | ||
166 | } | ||
167 | // relative is TR | ||
168 | else if ( ( relative = element.getParent().getPrevious() ) ) { | ||
169 | nodeToMove = relative.getLast(); | ||
170 | nodeToMove.focus(); | ||
171 | domEvt.preventDefault( true ); | ||
172 | } | ||
173 | break; | ||
174 | default: | ||
175 | // Do not stop not handled events. | ||
176 | return; | ||
177 | } | ||
178 | } | ||
179 | |||
180 | function createColorTable() { | ||
181 | table = CKEDITOR.dom.element.createFromHtml( '<table tabIndex="-1" aria-label="' + lang.options + '"' + | ||
182 | ' role="grid" style="border-collapse:separate;" cellspacing="0">' + | ||
183 | '<caption class="cke_voice_label">' + lang.options + '</caption>' + | ||
184 | '<tbody role="presentation"></tbody></table>' ); | ||
185 | |||
186 | table.on( 'mouseover', updateHighlight ); | ||
187 | table.on( 'mouseout', removeHighlight ); | ||
188 | |||
189 | // Create the base colors array. | ||
190 | var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ]; | ||
191 | |||
192 | // This function combines two ranges of three values from the color array into a row. | ||
193 | function appendColorRow( rangeA, rangeB ) { | ||
194 | for ( var i = rangeA; i < rangeA + 3; i++ ) { | ||
195 | var row = new $el( table.$.insertRow( -1 ) ); | ||
196 | row.setAttribute( 'role', 'row' ); | ||
197 | |||
198 | for ( var j = rangeB; j < rangeB + 3; j++ ) { | ||
199 | for ( var n = 0; n < 6; n++ ) { | ||
200 | appendColorCell( row.$, '#' + aColors[ j ] + aColors[ n ] + aColors[ i ] ); | ||
201 | } | ||
202 | } | ||
203 | } | ||
204 | } | ||
205 | |||
206 | // This function create a single color cell in the color table. | ||
207 | function appendColorCell( targetRow, color ) { | ||
208 | var cell = new $el( targetRow.insertCell( -1 ) ); | ||
209 | cell.setAttribute( 'class', 'ColorCell' ); | ||
210 | cell.setAttribute( 'tabIndex', -1 ); | ||
211 | cell.setAttribute( 'role', 'gridcell' ); | ||
212 | |||
213 | cell.on( 'keydown', onKeyStrokes ); | ||
214 | cell.on( 'click', updateSelected ); | ||
215 | cell.on( 'focus', updateHighlight ); | ||
216 | cell.on( 'blur', removeHighlight ); | ||
217 | |||
218 | cell.setStyle( 'background-color', color ); | ||
219 | cell.setStyle( 'border', '1px solid ' + color ); | ||
220 | |||
221 | cell.setStyle( 'width', '14px' ); | ||
222 | cell.setStyle( 'height', '14px' ); | ||
223 | |||
224 | var colorLabel = numbering( 'color_table_cell' ); | ||
225 | cell.setAttribute( 'aria-labelledby', colorLabel ); | ||
226 | cell.append( CKEDITOR.dom.element.createFromHtml( '<span id="' + colorLabel + '" class="cke_voice_label">' + color + '</span>', CKEDITOR.document ) ); | ||
227 | } | ||
228 | |||
229 | appendColorRow( 0, 0 ); | ||
230 | appendColorRow( 3, 0 ); | ||
231 | appendColorRow( 0, 3 ); | ||
232 | appendColorRow( 3, 3 ); | ||
233 | |||
234 | // Create the last row. | ||
235 | var oRow = new $el( table.$.insertRow( -1 ) ); | ||
236 | oRow.setAttribute( 'role', 'row' ); | ||
237 | |||
238 | // Create the gray scale colors cells. | ||
239 | appendColorCell( oRow.$, '#000000' ); | ||
240 | for ( var n = 0; n < 16; n++ ) { | ||
241 | var c = n.toString( 16 ); | ||
242 | appendColorCell( oRow.$, '#' + c + c + c + c + c + c ); | ||
243 | } | ||
244 | appendColorCell( oRow.$, '#ffffff' ); | ||
245 | } | ||
246 | |||
247 | var numbering = function( id ) { | ||
248 | return CKEDITOR.tools.getNextId() + '_' + id; | ||
249 | }, | ||
250 | hicolorId = numbering( 'hicolor' ), | ||
251 | hicolorTextId = numbering( 'hicolortext' ), | ||
252 | selHiColorId = numbering( 'selhicolor' ), | ||
253 | table; | ||
254 | |||
255 | createColorTable(); | ||
256 | |||
257 | return { | ||
258 | title: lang.title, | ||
259 | minWidth: 360, | ||
260 | minHeight: 220, | ||
261 | onLoad: function() { | ||
262 | // Update reference. | ||
263 | dialog = this; | ||
264 | }, | ||
265 | onHide: function() { | ||
266 | clearSelected(); | ||
267 | clearHighlight(); | ||
268 | }, | ||
269 | contents: [ { | ||
270 | id: 'picker', | ||
271 | label: lang.title, | ||
272 | accessKey: 'I', | ||
273 | elements: [ { | ||
274 | type: 'hbox', | ||
275 | padding: 0, | ||
276 | widths: [ '70%', '10%', '30%' ], | ||
277 | children: [ { | ||
278 | type: 'html', | ||
279 | html: '<div></div>', | ||
280 | onLoad: function() { | ||
281 | CKEDITOR.document.getById( this.domId ).append( table ); | ||
282 | }, | ||
283 | focus: function() { | ||
284 | // Restore the previously focused cell, | ||
285 | // otherwise put the initial focus on the first table cell. | ||
286 | ( focused || this.getElement().getElementsByTag( 'td' ).getItem( 0 ) ).focus(); | ||
287 | } | ||
288 | }, | ||
289 | spacer, | ||
290 | { | ||
291 | type: 'vbox', | ||
292 | padding: 0, | ||
293 | widths: [ '70%', '5%', '25%' ], | ||
294 | children: [ { | ||
295 | type: 'html', | ||
296 | html: '<span>' + lang.highlight + '</span>' + | ||
297 | '<div id="' + hicolorId + '" style="border: 1px solid; height: 74px; width: 74px;"></div>' + | ||
298 | '<div id="' + hicolorTextId + '"> </div><span>' + lang.selected + '</span>' + | ||
299 | '<div id="' + selHiColorId + '" style="border: 1px solid; height: 20px; width: 74px;"></div>' | ||
300 | }, | ||
301 | { | ||
302 | type: 'text', | ||
303 | label: lang.selected, | ||
304 | labelStyle: 'display:none', | ||
305 | id: 'selectedColor', | ||
306 | style: 'width: 76px;margin-top:4px', | ||
307 | onChange: function() { | ||
308 | // Try to update color preview with new value. If fails, then set it no none. | ||
309 | try { | ||
310 | $doc.getById( selHiColorId ).setStyle( 'background-color', this.getValue() ); | ||
311 | } catch ( e ) { | ||
312 | clearSelected(); | ||
313 | } | ||
314 | } | ||
315 | }, | ||
316 | spacer, | ||
317 | { | ||
318 | type: 'button', | ||
319 | id: 'clear', | ||
320 | label: lang.clear, | ||
321 | onClick: clearSelected | ||
322 | } ] | ||
323 | } ] | ||
324 | } ] | ||
325 | } ] | ||
326 | }; | ||
327 | } ); | ||