X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fcolordialog%2Fdialogs%2Fcolordialog.js;h=e4a2a015fb8e3df87c93445b9a3e3dbddd4c71ed;hb=a272c66d841421f8bf933c16535bdcde1c4649fc;hp=d99d033e3dfe51907dac975993c7495bfffc908f;hpb=941b0a9ba4e673e292510d80a5a86806994b8ea6;p=ckeditor.git diff --git a/_source/plugins/colordialog/dialogs/colordialog.js b/_source/plugins/colordialog/dialogs/colordialog.js index d99d033..e4a2a01 100644 --- a/_source/plugins/colordialog/dialogs/colordialog.js +++ b/_source/plugins/colordialog/dialogs/colordialog.js @@ -1,5 +1,5 @@ /* -Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ @@ -8,53 +8,229 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) // Define some shorthands. var $el = CKEDITOR.dom.element, $doc = CKEDITOR.document, - $tools = CKEDITOR.tools, lang = editor.lang.colordialog; // Reference the dialog. var dialog; - function spacer() + var spacer = { - return { - type : 'html', - html : ' ' - }; + type : 'html', + html : ' ' + }; + + var selected; + + function clearSelected() + { + $doc.getById( selHiColorId ).removeStyle( 'background-color' ); + dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' ); + selected && selected.removeAttribute( 'aria-selected' ); + selected = null; } - var table = new $el( 'table' ); - createColorTable(); + function updateSelected( evt ) + { + var target = evt.data.getTarget(), + color; + + if ( target.getName() == 'td' && + ( color = target.getChild( 0 ).getHtml() ) ) + { + selected = target; + selected.setAttribute( 'aria-selected', true ); + dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color ); + } + } - var cellMouseover = function( event ) + // Basing black-white decision off of luma scheme using the Rec. 709 version + function whiteOrBlack( color ) { - var color = new $el( event.data.getTarget() ).getAttribute( 'title' ); - $doc.getById( 'hicolor' ).setStyle( 'background-color', color ); - $doc.getById( 'hicolortext' ).setHtml( 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 ? '000' : 'fff' ); + } - var cellClick = function( event ) + // Distinguish focused and hover states. + var focused, hovered; + + // Apply highlight style. + function updateHighlight( event ) { - var color = new $el( event.data.getTarget() ).getAttribute( 'title' ); - dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color ); - }; + // 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 outline style to show focus. + if ( isFocus ) + { + target.setStyle( 'border-color', whiteOrBlack( color ) ); + target.setStyle( 'border-style', 'dotted' ); + } + + $doc.getById( hicolorId ).setStyle( 'background-color', color ); + $doc.getById( hicolorTextId ).setHtml( color ); + } + } + + function clearHighlight() + { + var color = focused.getChild( 0 ).getHtml(); + focused.setStyle( 'border-color', color ); + focused.setStyle( 'border-style', 'solid' ); + $doc.getById( hicolorId ).removeStyle( 'background-color' ); + $doc.getById( hicolorTextId ).setHtml( ' ' ); + focused = null; + } + + // Remove previously focused style. + function removeHighlight( event ) + { + var isFocus = !(/mouse/).test( event.name ), + target = isFocus && focused; + + if ( target ) + { + var color = target.getChild( 0 ).getHtml(); + target.setStyle( 'border-color', color ); + target.setStyle( 'border-style', 'solid' ); + } + + if ( ! ( focused || hovered ) ) + { + $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 + ( + '