IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
|
|
|
8 | 8 | // Define some shorthands. |
9 | 9 | var $el = CKEDITOR.dom.element, |
10 | 10 | $doc = CKEDITOR.document, |
11 | | $tools = CKEDITOR.tools, |
12 | 11 | lang = editor.lang.colordialog; |
13 | 12 | |
14 | 13 | // Reference the dialog. |
… |
… |
|
20 | 19 | html : ' ' |
21 | 20 | }; |
22 | 21 | |
| 22 | var selected; |
| 23 | |
23 | 24 | function clearSelected() |
24 | 25 | { |
25 | 26 | $doc.getById( selHiColorId ).removeStyle( 'background-color' ); |
26 | 27 | dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' ); |
| 28 | selected && selected.removeAttribute( 'aria-selected' ); |
| 29 | selected = null; |
27 | 30 | } |
28 | 31 | |
29 | 32 | function updateSelected( evt ) |
30 | 33 | { |
31 | | if ( ! ( evt instanceof CKEDITOR.dom.event ) ) |
32 | | evt = new CKEDITOR.dom.event( evt ); |
33 | | |
34 | 34 | var target = evt.getTarget(), |
35 | 35 | color; |
36 | 36 | |
37 | | if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) ) |
| 37 | if ( target.getName() == 'td' && |
| 38 | ( color = target.getChild( 0 ).getHtml() ) ) |
| 39 | { |
| 40 | selected = target; |
| 41 | selected.setAttribute( 'aria-selected', true ); |
38 | 42 | dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color ); |
39 | | } |
| 43 | } |
| 44 | } |
40 | 45 | |
| 46 | // Basing black-white decision off of luma scheme using the Rec. 709 version |
| 47 | function whiteOrBlack( color ) |
| 48 | { |
| 49 | color = color.replace( /^#/, '' ); |
| 50 | for ( var i = 0, rgb = []; i <= 2; i++ ) |
| 51 | rgb[i] = parseInt( color.substr( i * 2, 2 ), 16 ); |
| 52 | var luma = (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); |
| 53 | return '#' + ( luma >= 165 ? '000' : 'fff' ); |
| 54 | } |
| 55 | |
| 56 | // Distinguish focused and hover states. |
| 57 | var focused, hovered; |
| 58 | |
| 59 | // Apply highlight style. |
41 | 60 | function updateHighlight( event ) |
42 | 61 | { |
43 | | if ( ! ( event instanceof CKEDITOR.dom.event ) ) |
44 | | event = event.data; |
| 62 | // Convert to event. |
| 63 | !event.name && ( event = new CKEDITOR.event( event ) ); |
45 | 64 | |
46 | | var target = event.getTarget(), |
47 | | color; |
| 65 | var isFocus = !/mouse/.test( event.name ), |
| 66 | target = event.data.getTarget(), |
| 67 | color; |
48 | 68 | |
49 | | if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) ) |
| 69 | if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) ) |
50 | 70 | { |
| 71 | removeHighlight( event ); |
| 72 | |
| 73 | isFocus ? focused = target : hovered = target; |
| 74 | |
| 75 | // Apply outline style to show focus. |
| 76 | target.setStyle( 'border-color', whiteOrBlack( color ) ); |
| 77 | target.setStyle( 'border-style', 'dotted' ); |
| 78 | |
51 | 79 | $doc.getById( hicolorId ).setStyle( 'background-color', color ); |
52 | 80 | $doc.getById( hicolorTextId ).setHtml( color ); |
53 | 81 | } |
54 | 82 | } |
55 | 83 | |
56 | | function clearHighlight() |
| 84 | // Remove previously focused style. |
| 85 | function removeHighlight( event ) |
57 | 86 | { |
58 | | $doc.getById( hicolorId ).removeStyle( 'background-color' ); |
59 | | $doc.getById( hicolorTextId ).setHtml( ' ' ); |
60 | | } |
| 87 | var isFocus = !/mouse/.test( event.name ), |
| 88 | target = isFocus ? focused : hovered; |
| 89 | |
| 90 | if ( target ) |
| 91 | { |
| 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 | { |
| 99 | $doc.getById( hicolorId ).removeStyle( 'background-color' ); |
| 100 | $doc.getById( hicolorTextId ).setHtml( ' ' ); |
| 101 | } |
| 102 | } |
61 | 103 | |
62 | | var onMouseout = $tools.addFunction( clearHighlight ), |
63 | | onClick = updateSelected, |
64 | | onClickHandler = CKEDITOR.tools.addFunction( onClick ); |
65 | | |
66 | | var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev ) |
| 104 | function onKeyStrokes( ev ) |
67 | 105 | { |
68 | | ev = new CKEDITOR.dom.event( ev ); |
| 106 | ev = ev.data; |
| 107 | |
69 | 108 | var element = ev.getTarget(); |
70 | 109 | var relative, nodeToMove; |
71 | 110 | var keystroke = ev.getKeystroke(), |
… |
… |
|
76 | 115 | // UP-ARROW |
77 | 116 | case 38 : |
78 | 117 | // relative is TR |
79 | | if ( ( relative = element.getParent().getParent().getPrevious() ) ) |
| 118 | if ( ( relative = element.getParent().getPrevious() ) ) |
80 | 119 | { |
81 | | nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] ); |
| 120 | nodeToMove = relative.getChild( [ element.getIndex() ] ); |
82 | 121 | nodeToMove.focus(); |
83 | 122 | } |
84 | 123 | ev.preventDefault(); |
… |
… |
|
86 | 125 | // DOWN-ARROW |
87 | 126 | case 40 : |
88 | 127 | // relative is TR |
89 | | if ( ( relative = element.getParent().getParent().getNext() ) ) |
| 128 | if ( ( relative = element.getParent().getNext() ) ) |
90 | 129 | { |
91 | | nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] ); |
| 130 | nodeToMove = relative.getChild( [ element.getIndex() ] ); |
92 | 131 | if ( nodeToMove && nodeToMove.type == 1 ) |
93 | 132 | { |
94 | 133 | nodeToMove.focus(); |
… |
… |
|
96 | 135 | } |
97 | 136 | ev.preventDefault(); |
98 | 137 | break; |
| 138 | |
99 | 139 | // SPACE |
100 | | // ENTER is already handled as onClick |
| 140 | // ENTER |
101 | 141 | case 32 : |
102 | | onClick( ev ); |
| 142 | case 13 : |
| 143 | updateSelected( ev ); |
103 | 144 | ev.preventDefault(); |
104 | 145 | break; |
105 | 146 | |
106 | 147 | // RIGHT-ARROW |
107 | 148 | case rtl ? 37 : 39 : |
108 | 149 | // relative is TD |
109 | | if ( ( relative = element.getParent().getNext() ) ) |
| 150 | if ( ( nodeToMove = element.getNext() ) ) |
110 | 151 | { |
111 | | nodeToMove = relative.getChild( 0 ); |
112 | 152 | if ( nodeToMove.type == 1 ) |
113 | 153 | { |
114 | 154 | nodeToMove.focus(); |
… |
… |
|
116 | 156 | } |
117 | 157 | } |
118 | 158 | // relative is TR |
119 | | else if ( ( relative = element.getParent().getParent().getNext() ) ) |
| 159 | else if ( ( relative = element.getParent().getNext() ) ) |
120 | 160 | { |
121 | | nodeToMove = relative.getChild( [ 0, 0 ] ); |
| 161 | nodeToMove = relative.getChild( [ 0 ] ); |
122 | 162 | if ( nodeToMove && nodeToMove.type == 1 ) |
123 | 163 | { |
124 | 164 | nodeToMove.focus(); |
… |
… |
|
130 | 170 | // LEFT-ARROW |
131 | 171 | case rtl ? 39 : 37 : |
132 | 172 | // relative is TD |
133 | | if ( ( relative = element.getParent().getPrevious() ) ) |
| 173 | if ( ( nodeToMove = element.getPrevious() ) ) |
134 | 174 | { |
135 | | nodeToMove = relative.getChild( 0 ); |
136 | 175 | nodeToMove.focus(); |
137 | 176 | ev.preventDefault( true ); |
138 | 177 | } |
139 | 178 | // relative is TR |
140 | | else if ( ( relative = element.getParent().getParent().getPrevious() ) ) |
| 179 | else if ( ( relative = element.getParent().getPrevious() ) ) |
141 | 180 | { |
142 | | nodeToMove = relative.getLast().getChild( 0 ); |
| 181 | nodeToMove = relative.getLast(); |
143 | 182 | nodeToMove.focus(); |
144 | 183 | ev.preventDefault( true ); |
145 | 184 | } |
… |
… |
|
148 | 187 | // Do not stop not handled events. |
149 | 188 | return; |
150 | 189 | } |
151 | | }); |
| 190 | } |
152 | 191 | |
153 | 192 | function createColorTable() |
154 | 193 | { |
| 194 | table = CKEDITOR.dom.element.createFromHtml |
| 195 | ( |
| 196 | '<table tabIndex="-1" aria-label="' + lang.options + '"' + |
| 197 | ' role="grid" style="border-collapse:separate;" cellspacing="0">' + |
| 198 | '<caption class="cke_voice_label">' + lang.options + '</caption>' + |
| 199 | '<tbody role="presentation"></tbody></table>' |
| 200 | ); |
| 201 | |
| 202 | table.on( 'mouseover', updateHighlight ); |
| 203 | table.on( 'mouseout', removeHighlight ); |
| 204 | |
155 | 205 | // Create the base colors array. |
156 | 206 | var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ]; |
157 | 207 | |
… |
… |
|
160 | 210 | { |
161 | 211 | for ( var i = rangeA ; i < rangeA + 3 ; i++ ) |
162 | 212 | { |
163 | | var row = table.$.insertRow( -1 ); |
| 213 | var row = new $el( table.$.insertRow( -1 ) ); |
| 214 | row.setAttribute( 'role', 'row' ); |
164 | 215 | |
165 | 216 | for ( var j = rangeB ; j < rangeB + 3 ; j++ ) |
166 | 217 | { |
167 | 218 | for ( var n = 0 ; n < 6 ; n++ ) |
168 | 219 | { |
169 | | appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] ); |
| 220 | appendColorCell( row.$, '#' + aColors[j] + aColors[n] + aColors[i] ); |
170 | 221 | } |
171 | 222 | } |
172 | 223 | } |
… |
… |
|
177 | 228 | { |
178 | 229 | var cell = new $el( targetRow.insertCell( -1 ) ); |
179 | 230 | cell.setAttribute( 'class', 'ColorCell' ); |
| 231 | cell.setAttribute( 'tabIndex', -1 ); |
| 232 | cell.setAttribute( 'role', 'gridcell' ); |
| 233 | |
| 234 | cell.on( 'keydown', onKeyStrokes ); |
| 235 | cell.on( 'click', updateSelected ); |
| 236 | cell.on( 'focus', updateHighlight ); |
| 237 | cell.on( 'blur', removeHighlight ); |
| 238 | |
180 | 239 | cell.setStyle( 'background-color', color ); |
| 240 | cell.setStyle( 'border', '1px solid ' + color ); |
181 | 241 | |
182 | | cell.setStyle( 'width', '15px' ); |
183 | | cell.setStyle( 'height', '15px' ); |
| 242 | cell.setStyle( 'width', '14px' ); |
| 243 | cell.setStyle( 'height', '14px' ); |
184 | 244 | |
185 | | var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex; |
186 | | cell.append( CKEDITOR.dom.element.createFromHtml( |
187 | | '<a href="javascript: void(0);" role="option"' + |
188 | | ' aria-posinset="' + index + '"' + |
189 | | ' aria-setsize="' + 13 * 18 + '"' + |
190 | | ' style="cursor: pointer;display:block;width:100%;height:100% " title="'+ CKEDITOR.tools.htmlEncode( color )+ '"' + |
191 | | ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydownHandler + ', event, this )"' + |
192 | | ' onclick="CKEDITOR.tools.callFunction(' + onClickHandler + ', event, this ); return false;"' + |
193 | | ' tabindex="-1"><span class="cke_voice_label">' + color + '</span> </a>', CKEDITOR.document ) ); |
| 245 | var colorLabel = numbering( 'color_table_cell' ); |
| 246 | cell.setAttribute( 'aria-labelledby',colorLabel ); |
| 247 | cell.append( CKEDITOR.dom.element.createFromHtml( '<span id="' + colorLabel + '" class="cke_voice_label">' + color + '</span>', CKEDITOR.document ) ); |
194 | 248 | } |
195 | 249 | |
196 | 250 | appendColorRow( 0, 0 ); |
… |
… |
|
214 | 268 | } |
215 | 269 | } |
216 | 270 | |
217 | | var table = new $el( 'table' ); |
218 | | createColorTable(); |
219 | | var html = table.getHtml(); |
220 | | |
221 | 271 | var numbering = function( id ) |
222 | 272 | { |
223 | 273 | return CKEDITOR.tools.getNextId() + '_' + id; |
… |
… |
|
225 | 275 | hicolorId = numbering( 'hicolor' ), |
226 | 276 | hicolorTextId = numbering( 'hicolortext' ), |
227 | 277 | selHiColorId = numbering( 'selhicolor' ), |
228 | | tableLabelId = numbering( 'color_table_label' ); |
| 278 | table; |
229 | 279 | |
| 280 | createColorTable(); |
| 281 | |
230 | 282 | return { |
231 | 283 | title : lang.title, |
232 | 284 | minWidth : 360, |
… |
… |
|
236 | 288 | // Update reference. |
237 | 289 | dialog = this; |
238 | 290 | }, |
| 291 | onHide : function() |
| 292 | { |
| 293 | focused = selected = null; |
| 294 | }, |
239 | 295 | contents : [ |
240 | 296 | { |
241 | 297 | id : 'picker', |
… |
… |
|
251 | 307 | [ |
252 | 308 | { |
253 | 309 | type : 'html', |
254 | | html : '<table role="listbox" aria-labelledby="' + tableLabelId + '" onmouseout="CKEDITOR.tools.callFunction( ' + onMouseout + ' );">' + |
255 | | ( !CKEDITOR.env.webkit ? html : '' ) + |
256 | | '</table><span id="' + tableLabelId + '" class="cke_voice_label">' + lang.options +'</span>', |
| 310 | html : '<div></div>', |
257 | 311 | onLoad : function() |
258 | 312 | { |
259 | | var table = CKEDITOR.document.getById( this.domId ); |
260 | | table.on( 'mouseover', updateHighlight ); |
261 | | CKEDITOR.event.useCapture = true; |
262 | | table.on( 'focus', updateHighlight ); |
263 | | CKEDITOR.event.useCapture = false; |
264 | | |
265 | | // In WebKit, the table content must be inserted after this event call (#6150) |
266 | | CKEDITOR.env.webkit && table.setHtml( html ); |
| 313 | CKEDITOR.document.getById( this.domId ).append( table ); |
267 | 314 | }, |
268 | 315 | focus: function() |
269 | 316 | { |
270 | | var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 ); |
271 | | firstColor.focus(); |
| 317 | // Restore to previously focused fallback to the first one. |
| 318 | var toFocus = focused || this.getElement().getElementsByTag( 'td' ).getItem( 0 ); |
| 319 | toFocus.focus(); |
272 | 320 | } |
273 | 321 | }, |
274 | 322 | spacer, |