X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fcolordialog%2Fdialogs%2Fcolordialog.js;h=e4a2a015fb8e3df87c93445b9a3e3dbddd4c71ed;hb=a272c66d841421f8bf933c16535bdcde1c4649fc;hp=3259e7f28d7ee8a2355c782141c2b7392702f86e;hpb=66f4ae0bf0280ed56bf7c0f4ab175424dd1d47a0;p=ckeditor.git diff --git a/_source/plugins/colordialog/dialogs/colordialog.js b/_source/plugins/colordialog/dialogs/colordialog.js index 3259e7f..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 + ( + '' + + '' + + '
' + lang.options + '
' + ); + + table.on( 'mouseover', updateHighlight ); + table.on( 'mouseout', removeHighlight ); + // Create the base colors array. - var aColors = ['00','33','66','99','cc','ff']; + var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ]; // This function combines two ranges of three values from the color array into a row. function appendColorRow( rangeA, rangeB ) { for ( var i = rangeA ; i < rangeA + 3 ; i++ ) { - var row = table.$.insertRow(-1); + var row = new $el( table.$.insertRow( -1 ) ); + row.setAttribute( 'role', 'row' ); for ( var j = rangeB ; j < rangeB + 3 ; j++ ) { for ( var n = 0 ; n < 6 ; n++ ) { - appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] ); + appendColorCell( row.$, '#' + aColors[j] + aColors[n] + aColors[i] ); } } } @@ -201,20 +241,23 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) { var cell = new $el( targetRow.insertCell( -1 ) ); cell.setAttribute( 'class', 'ColorCell' ); + cell.setAttribute( 'tabIndex', -1 ); + cell.setAttribute( 'role', 'gridcell' ); + + cell.on( 'keydown', onKeyStrokes ); + cell.on( 'click', updateSelected ); + cell.on( 'focus', updateHighlight ); + cell.on( 'blur', removeHighlight ); + cell.setStyle( 'background-color', color ); + cell.setStyle( 'border', '1px solid ' + color ); + + cell.setStyle( 'width', '14px' ); + cell.setStyle( 'height', '14px' ); - cell.setStyle( 'width', '15px' ); - cell.setStyle( 'height', '15px' ); - - var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex; - cell.append( CKEDITOR.dom.element.createFromHtml( - '' + color + ' ', CKEDITOR.document ) ); + var colorLabel = numbering( 'color_table_cell' ); + cell.setAttribute( 'aria-labelledby',colorLabel ); + cell.append( CKEDITOR.dom.element.createFromHtml( '' + color + '', CKEDITOR.document ) ); } appendColorRow( 0, 0 ); @@ -223,31 +266,32 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) appendColorRow( 3, 3 ); // Create the last row. - var oRow = table.$.insertRow(-1) ; + var oRow = new $el( table.$.insertRow( -1 ) ) ; + oRow.setAttribute( 'role', 'row' ); // Create the gray scale colors cells. for ( var n = 0 ; n < 6 ; n++ ) { - appendColorCell( oRow, '#' + aColors[n] + aColors[n] + aColors[n] ) ; + appendColorCell( oRow.$, '#' + aColors[n] + aColors[n] + aColors[n] ) ; } // Fill the row with black cells. for ( var i = 0 ; i < 12 ; i++ ) { - appendColorCell( oRow, '#000000' ) ; + appendColorCell( oRow.$, '#000000' ) ; } } - var table = new $el( 'table' ); - createColorTable(); - var numbering = function( id ) { - return id + CKEDITOR.tools.getNextNumber(); + return CKEDITOR.tools.getNextId() + '_' + id; }, hicolorId = numbering( 'hicolor' ), hicolorTextId = numbering( 'hicolortext' ), - selHiColorId = numbering( 'selhicolor' ); + selHiColorId = numbering( 'selhicolor' ), + table; + + createColorTable(); return { title : lang.title, @@ -258,6 +302,11 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) // Update reference. dialog = this; }, + onHide : function() + { + clearSelected(); + clearHighlight(); + }, contents : [ { id : 'picker', @@ -273,20 +322,19 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) [ { type : 'html', - html : '' + table.getHtml() + '
' + - '' + lang.options +'', + html : '
', onLoad : function() { - var table = CKEDITOR.document.getById( this.domId ); - table.on( 'mouseover', updateHighlight ); + CKEDITOR.document.getById( this.domId ).append( table ); }, - focus: function() + focus : function() { - var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 ); - firstColor.focus(); + // Restore the previously focused cell, + // otherwise put the initial focus on the first table cell. + ( focused || this.getElement().getElementsByTag( 'td' ).getItem( 0 ) ).focus(); } }, - spacer(), + spacer, { type : 'vbox', padding : 0, @@ -319,7 +367,7 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) } } }, - spacer(), + spacer, { type : 'button', id : 'clear',