/** * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */ CKEDITOR.dialog.add( 'colordialog', function( editor ) { // Define some shorthands. var $el = CKEDITOR.dom.element, $doc = CKEDITOR.document, lang = editor.lang.colordialog, colorCellCls = 'cke_colordialog_colorcell', focusedColorLightCls = 'cke_colordialog_focused_light', focusedColorDarkCls = 'cke_colordialog_focused_dark', selectedColorCls = 'cke_colordialog_selected'; // Reference the dialog. var dialog, selected; var spacer = { type: 'html', html: ' ' }; function clearSelected() { $doc.getById( selHiColorId ).removeStyle( 'background-color' ); dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' ); removeSelected(); } function updateSelected( evt ) { var target = evt.data.getTarget(), color; if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) ) { removeSelected(); selected = target; selected.setAttribute( 'aria-selected', true ); selected.addClass( selectedColorCls ); dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color ); } } function removeSelected() { if ( selected ) { selected.removeClass( selectedColorCls ); selected.removeAttribute( 'aria-selected' ); // Attribute aria-selected should also be removed when selection changes. selected = null; } } // Basing black-white decision off of luma scheme using the Rec. 709 version. function isLightColor( color ) { color = color.replace( /^#/, '' ); for ( var i = 0, rgb = []; i <= 2; i++ ) rgb[ i ] = parseInt( color.substr( i * 2, 2 ), 16 ); var luma = ( 0.2126 * rgb[ 0 ] ) + ( 0.7152 * rgb[ 1 ] ) + ( 0.0722 * rgb[ 2 ] ); return luma >= 165; } // Distinguish focused and hover states. var focused, hovered; // Apply highlight style. function updateHighlight( event ) { // Convert to event. !event.name && ( event = new CKEDITOR.event( event ) ); var isFocus = !( /mouse/ ).test( event.name ), target = event.data.getTarget(), color; if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) ) { removeHighlight( event ); isFocus ? focused = target : hovered = target; // Apply CSS class to show focus. if ( isFocus ) { target.addClass( isLightColor( color ) ? focusedColorLightCls : focusedColorDarkCls ); } setHighlight( color ); } } function clearHighlight() { focused.removeClass( focusedColorLightCls ); focused.removeClass( focusedColorDarkCls ); setHighlight( false ); focused = null; } // Remove previously focused style. function removeHighlight( event ) { var isFocus = !( /mouse/ ).test( event.name ), target = isFocus && focused; if ( target ) { target.removeClass( focusedColorLightCls ); target.removeClass( focusedColorDarkCls ); } if ( !( focused || hovered ) ) { setHighlight( false ); } } function setHighlight( color ) { if ( color ) { $doc.getById( hicolorId ).setStyle( 'background-color', color ); $doc.getById( hicolorTextId ).setHtml( color ); } else { $doc.getById( hicolorId ).removeStyle( 'background-color' ); $doc.getById( hicolorTextId ).setHtml( ' ' ); } } function onKeyStrokes( evt ) { var domEvt = evt.data; var element = domEvt.getTarget(); var relative, nodeToMove; var keystroke = domEvt.getKeystroke(), rtl = editor.lang.dir == 'rtl'; switch ( keystroke ) { // UP-ARROW case 38: // relative is TR if ( ( relative = element.getParent().getPrevious() ) ) { nodeToMove = relative.getChild( [ element.getIndex() ] ); nodeToMove.focus(); } domEvt.preventDefault(); break; // DOWN-ARROW case 40: // relative is TR if ( ( relative = element.getParent().getNext() ) ) { nodeToMove = relative.getChild( [ element.getIndex() ] ); if ( nodeToMove && nodeToMove.type == 1 ) nodeToMove.focus(); } domEvt.preventDefault(); break; // SPACE // ENTER case 32: case 13: updateSelected( evt ); domEvt.preventDefault(); break; // RIGHT-ARROW case rtl ? 37 : 39: // relative is TD if ( ( nodeToMove = element.getNext() ) ) { if ( nodeToMove.type == 1 ) { nodeToMove.focus(); domEvt.preventDefault( true ); } } // relative is TR else if ( ( relative = element.getParent().getNext() ) ) { nodeToMove = relative.getChild( [ 0 ] ); if ( nodeToMove && nodeToMove.type == 1 ) { nodeToMove.focus(); domEvt.preventDefault( true ); } } break; // LEFT-ARROW case rtl ? 39 : 37: // relative is TD if ( ( nodeToMove = element.getPrevious() ) ) { nodeToMove.focus(); domEvt.preventDefault( true ); } // relative is TR else if ( ( relative = element.getParent().getPrevious() ) ) { nodeToMove = relative.getLast(); nodeToMove.focus(); domEvt.preventDefault( true ); } break; default: // Do not stop not handled events. return; } } function createColorTable() { table = CKEDITOR.dom.element.createFromHtml( '