X-Git-Url: https://jasonwoof.com/gitweb/?p=ckeditor.git;a=blobdiff_plain;f=_source%2Fplugins%2Fcolordialog%2Fdialogs%2Fcolordialog.js;h=a8e83f5daa8f711e286be1693024fd0c3af8a401;hp=61d411be40101bdc047441e68c0315205dbe0e59;hb=2f22c0c38f17e75be5541089076885442aaa2377;hpb=e73319a12b56100b29ef456fd74114fe5519e01c diff --git a/_source/plugins/colordialog/dialogs/colordialog.js b/_source/plugins/colordialog/dialogs/colordialog.js index 61d411b..a8e83f5 100644 --- a/_source/plugins/colordialog/dialogs/colordialog.js +++ b/_source/plugins/colordialog/dialogs/colordialog.js @@ -1,5 +1,5 @@ /* -Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ @@ -8,7 +8,6 @@ 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. @@ -20,34 +19,66 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) 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.getTarget(), + var target = evt.data.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 ); } @@ -55,22 +86,41 @@ 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 ), - onClick = updateSelected, - onClickHandler = CKEDITOR.tools.addFunction( onClick ), - onFocus = updateHighlight, - onBlur = clearHighlight; + // 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( ' ' ); + } + } - 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 keystroke = domEvt.getKeystroke(), rtl = editor.lang.dir == 'rtl'; switch ( keystroke ) @@ -78,100 +128,93 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) // 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' ]; @@ -180,13 +223,14 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) { 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] ); } } } @@ -197,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', '15px' ); - cell.setStyle( 'height', '15px' ); - - var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex; - cell.append( CKEDITOR.dom.element.createFromHtml( - '' + color + ' ', CKEDITOR.document ) ); + cell.setStyle( 'width', '14px' ); + cell.setStyle( 'height', '14px' ); + + var colorLabel = numbering( 'color_table_cell' ); + cell.setAttribute( 'aria-labelledby',colorLabel ); + cell.append( CKEDITOR.dom.element.createFromHtml( '' + color + '', CKEDITOR.document ) ); } appendColorRow( 0, 0 ); @@ -219,25 +266,22 @@ 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 html = table.getHtml(); - var numbering = function( id ) { return CKEDITOR.tools.getNextId() + '_' + id; @@ -245,7 +289,9 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) hicolorId = numbering( 'hicolor' ), hicolorTextId = numbering( 'hicolortext' ), selHiColorId = numbering( 'selhicolor' ), - tableLabelId = numbering( 'color_table_label' ); + table; + + createColorTable(); return { title : lang.title, @@ -256,6 +302,11 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) // Update reference. dialog = this; }, + onHide : function() + { + clearSelected(); + clearHighlight(); + }, contents : [ { id : 'picker', @@ -271,20 +322,16 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) [ { type : 'html', - html : '' + - ( !CKEDITOR.env.webkit ? html : '' ) + - '
' + lang.options +'', + html : '
', onLoad : function() { - var table = CKEDITOR.document.getById( this.domId ); - table.on( 'mouseover', updateHighlight ); - // In WebKit, the table content must be inserted after this event call (#6150) - CKEDITOR.env.webkit && table.setHtml( html ); + 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,