X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;ds=sidebyside;f=_source%2Fplugins%2Fcolordialog%2Fdialogs%2Fcolordialog.js;h=e4a2a015fb8e3df87c93445b9a3e3dbddd4c71ed;hb=a272c66d841421f8bf933c16535bdcde1c4649fc;hp=4454d196dc14a3a0c46203ae3ae66b4974c8df55;hpb=e371ddf8abcb89013e20e6d0dd746adec344d0e5;p=ckeditor.git diff --git a/_source/plugins/colordialog/dialogs/colordialog.js b/_source/plugins/colordialog/dialogs/colordialog.js index 4454d19..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,48 +8,77 @@ 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; } function updateSelected( evt ) { - if ( ! (evt instanceof CKEDITOR.dom.event ) ) - evt = new CKEDITOR.dom.event( evt ); + var target = evt.data.getTarget(), + color; - var target = evt.getTarget(), - color; - - if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) ) + if ( target.getName() == 'td' && + ( color = target.getChild( 0 ).getHtml() ) ) + { + selected = target; + selected.setAttribute( 'aria-selected', true ); dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color ); + } } + // Basing black-white decision off of luma scheme using the Rec. 709 version + function whiteOrBlack( 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' ); + } + + // Distinguish focused and hover states. + var focused, hovered; + + // Apply highlight style. function updateHighlight( event ) { - if ( ! (event instanceof CKEDITOR.dom.event ) ) - event = event.data; + // Convert to event. + !event.name && ( event = new CKEDITOR.event( event ) ); - var target = event.getTarget(), - color; + var isFocus = !(/mouse/).test( event.name ), + target = event.data.getTarget(), + color; - if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) ) + 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 ); } @@ -57,140 +86,151 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) 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; } - var onMouseout = $tools.addFunction( clearHighlight ); + // Remove previously focused style. + function removeHighlight( event ) + { + var isFocus = !(/mouse/).test( event.name ), + target = isFocus && focused; - var onClick = updateSelected, - onClickHandler = CKEDITOR.tools.addFunction( onClick ); + if ( target ) + { + var color = target.getChild( 0 ).getHtml(); + target.setStyle( 'border-color', color ); + target.setStyle( 'border-style', 'solid' ); + } - var onFocus = updateHighlight, - onBlur = clearHighlight; + if ( ! ( focused || hovered ) ) + { + $doc.getById( hicolorId ).removeStyle( 'background-color' ); + $doc.getById( hicolorTextId ).setHtml( ' ' ); + } + } - var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev ) + function onKeyStrokes( evt ) { - ev = new CKEDITOR.dom.event( ev ); - var element = ev.getTarget(); + var domEvt = evt.data; + + var element = domEvt.getTarget(); var relative, nodeToMove; - var keystroke = ev.getKeystroke(); - var rtl = editor.lang.dir == 'rtl'; + var keystroke = domEvt.getKeystroke(), + rtl = editor.lang.dir == 'rtl'; switch ( keystroke ) { // UP-ARROW case 38 : // relative is TR - if ( ( relative = element.getParent().getParent().getPrevious() ) ) + if ( ( relative = element.getParent().getPrevious() ) ) { - nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] ); + nodeToMove = relative.getChild( [ element.getIndex() ] ); nodeToMove.focus(); - onBlur( ev, element ); - onFocus( ev, nodeToMove ); } - ev.preventDefault(); + domEvt.preventDefault(); break; // DOWN-ARROW case 40 : // relative is TR - if ( ( relative = element.getParent().getParent().getNext() ) ) + if ( ( relative = element.getParent().getNext() ) ) { - nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] ); + nodeToMove = relative.getChild( [ element.getIndex() ] ); if ( nodeToMove && nodeToMove.type == 1 ) { nodeToMove.focus(); - onBlur( ev, element ); - onFocus( ev, nodeToMove ); } } - ev.preventDefault(); + domEvt.preventDefault(); break; + // SPACE - // ENTER is already handled as onClick + // ENTER case 32 : - onClick( ev ); - ev.preventDefault(); + case 13 : + updateSelected( evt ); + domEvt.preventDefault(); break; // RIGHT-ARROW case rtl ? 37 : 39 : // relative is TD - if ( ( relative = element.getParent().getNext() ) ) + if ( ( nodeToMove = element.getNext() ) ) { - nodeToMove = relative.getChild( 0 ); if ( nodeToMove.type == 1 ) { nodeToMove.focus(); - onBlur( ev, element ); - onFocus( ev, nodeToMove ); - ev.preventDefault( true ); + domEvt.preventDefault( true ); } - else - onBlur( null, element ); } // relative is TR - else if ( ( relative = element.getParent().getParent().getNext() ) ) + else if ( ( relative = element.getParent().getNext() ) ) { - nodeToMove = relative.getChild( [ 0, 0 ] ); + nodeToMove = relative.getChild( [ 0 ] ); if ( nodeToMove && nodeToMove.type == 1 ) { nodeToMove.focus(); - onBlur( ev, element ); - onFocus( ev, nodeToMove ); - ev.preventDefault( true ); + domEvt.preventDefault( true ); } - else - onBlur( null, element ); } break; // LEFT-ARROW case rtl ? 39 : 37 : // relative is TD - if ( ( relative = element.getParent().getPrevious() ) ) + if ( ( nodeToMove = element.getPrevious() ) ) { - nodeToMove = relative.getChild( 0 ); nodeToMove.focus(); - onBlur( ev, element ); - onFocus( ev, nodeToMove ); - ev.preventDefault( true ); + domEvt.preventDefault( true ); } // relative is TR - else if ( ( relative = element.getParent().getParent().getPrevious() ) ) + else if ( ( relative = element.getParent().getPrevious() ) ) { - nodeToMove = relative.getLast().getChild( 0 ); + nodeToMove = relative.getLast(); nodeToMove.focus(); - onBlur( ev, element ); - onFocus( ev, nodeToMove ); - ev.preventDefault( true ); + domEvt.preventDefault( true ); } - else - onBlur( null, element ); break; default : // Do not stop not handled events. return; } - }); + } function createColorTable() { + table = CKEDITOR.dom.element.createFromHtml + ( + '