]>
git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blob - sources/plugins/colordialog/dialogs/colordialog.js
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
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';
16 // Reference the dialog.
25 function clearSelected() {
26 $doc
.getById( selHiColorId
).removeStyle( 'background-color' );
27 dialog
.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
31 function updateSelected( evt
) {
32 var target
= evt
.data
.getTarget(),
35 if ( target
.getName() == 'td' && ( color
= target
.getChild( 0 ).getHtml() ) ) {
39 selected
.setAttribute( 'aria-selected', true );
40 selected
.addClass( selectedColorCls
);
41 dialog
.getContentElement( 'picker', 'selectedColor' ).setValue( color
);
45 function removeSelected() {
47 selected
.removeClass( selectedColorCls
);
48 selected
.removeAttribute( 'aria-selected' ); // Attribute aria-selected should also be removed when selection changes.
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 ] );
62 // Distinguish focused and hover states.
65 // Apply highlight style.
66 function updateHighlight( event
) {
68 !event
.name
&& ( event
= new CKEDITOR
.event( event
) );
70 var isFocus
= !( /mouse/ ).test( event
.name
),
71 target
= event
.data
.getTarget(),
74 if ( target
.getName() == 'td' && ( color
= target
.getChild( 0 ).getHtml() ) ) {
75 removeHighlight( event
);
77 isFocus
? focused
= target : hovered
= target
;
79 // Apply CSS class to show focus.
81 target
.addClass( isLightColor( color
) ? focusedColorLightCls : focusedColorDarkCls
);
83 setHighlight( color
);
87 function clearHighlight() {
88 focused
.removeClass( focusedColorLightCls
);
89 focused
.removeClass( focusedColorDarkCls
);
90 setHighlight( false );
94 // Remove previously focused style.
95 function removeHighlight( event
) {
96 var isFocus
= !( /mouse/ ).test( event
.name
),
97 target
= isFocus
&& focused
;
100 target
.removeClass( focusedColorLightCls
);
101 target
.removeClass( focusedColorDarkCls
);
104 if ( !( focused
|| hovered
) ) {
105 setHighlight( false );
109 function setHighlight( color
) {
111 $doc
.getById( hicolorId
).setStyle( 'background-color', color
);
112 $doc
.getById( hicolorTextId
).setHtml( color
);
115 $doc
.getById( hicolorId
).removeStyle( 'background-color' );
116 $doc
.getById( hicolorTextId
).setHtml( ' ' );
120 function onKeyStrokes( evt
) {
121 var domEvt
= evt
.data
;
123 var element
= domEvt
.getTarget();
124 var relative
, nodeToMove
;
125 var keystroke
= domEvt
.getKeystroke(),
126 rtl
= editor
.lang
.dir
== 'rtl';
128 switch ( keystroke
) {
132 if ( ( relative
= element
.getParent().getPrevious() ) ) {
133 nodeToMove
= relative
.getChild( [ element
.getIndex() ] );
136 domEvt
.preventDefault();
141 if ( ( relative
= element
.getParent().getNext() ) ) {
142 nodeToMove
= relative
.getChild( [ element
.getIndex() ] );
143 if ( nodeToMove
&& nodeToMove
.type
== 1 )
147 domEvt
.preventDefault();
154 updateSelected( evt
);
155 domEvt
.preventDefault();
161 if ( ( nodeToMove
= element
.getNext() ) ) {
162 if ( nodeToMove
.type
== 1 ) {
164 domEvt
.preventDefault( true );
168 else if ( ( relative
= element
.getParent().getNext() ) ) {
169 nodeToMove
= relative
.getChild( [ 0 ] );
170 if ( nodeToMove
&& nodeToMove
.type
== 1 ) {
172 domEvt
.preventDefault( true );
180 if ( ( nodeToMove
= element
.getPrevious() ) ) {
182 domEvt
.preventDefault( true );
185 else if ( ( relative
= element
.getParent().getPrevious() ) ) {
186 nodeToMove
= relative
.getLast();
188 domEvt
.preventDefault( true );
192 // Do not stop not handled events.
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>' );
203 table
.on( 'mouseover', updateHighlight
);
204 table
.on( 'mouseout', removeHighlight
);
206 // Create the base colors array.
207 var aColors
= [ '00', '33', '66', '99', 'cc', 'ff' ];
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' );
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
] );
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' );
230 cell
.on( 'keydown', onKeyStrokes
);
231 cell
.on( 'click', updateSelected
);
232 cell
.on( 'focus', updateHighlight
);
233 cell
.on( 'blur', removeHighlight
);
235 cell
.setStyle( 'background-color', color
);
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
) );
242 appendColorRow( 0, 0 );
243 appendColorRow( 3, 0 );
244 appendColorRow( 0, 3 );
245 appendColorRow( 3, 3 );
247 // Create the last row.
248 var oRow
= new $el( table
.$.insertRow( -1 ) );
249 oRow
.setAttribute( 'role', 'row' );
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
);
257 appendColorCell( oRow
.$, '#ffffff' );
260 var numbering = function( id
) {
261 return CKEDITOR
.tools
.getNextId() + '_' + id
;
263 hicolorId
= numbering( 'hicolor' ),
264 hicolorTextId
= numbering( 'hicolortext' ),
265 selHiColorId
= numbering( 'selhicolor' ),
271 CKEDITOR
.document
.appendStyleSheet( CKEDITOR
.getUrl( CKEDITOR
.plugins
.get( 'colordialog' ).path
+ 'dialogs/colordialog.css' ) );
292 widths: [ '70%', '10%', '30%' ],
297 CKEDITOR
.document
.getById( this.domId
).append( table
);
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();
309 widths: [ '70%', '5%', '25%' ],
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>'
319 label: lang
.selected
,
320 labelStyle: 'display:none',
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.
326 $doc
.getById( selHiColorId
).setStyle( 'background-color', this.getValue() );
337 onClick: clearSelected