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