Ticket #8706: 8706_2.patch

File 8706_2.patch, 11.0 KB (added by Garry Yao, 9 years ago)
  • _source/plugins/colordialog/dialogs/colordialog.js

    IDEA additional info:
    Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
    <+>UTF-8
     
    88                // Define some shorthands.
    99                var $el = CKEDITOR.dom.element,
    1010                        $doc = CKEDITOR.document,
    11                         $tools = CKEDITOR.tools,
    1211                        lang = editor.lang.colordialog;
    1312
    1413                // Reference the dialog.
     
    2019                        html : '&nbsp;'
    2120                };
    2221
     22                var selected;
     23
    2324                function clearSelected()
    2425                {
    2526                        $doc.getById( selHiColorId ).removeStyle( 'background-color' );
    2627                        dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
     28                        selected && selected.removeAttribute( 'aria-selected' );
     29                        selected = null;
    2730                }
    2831
    2932                function updateSelected( evt )
    3033                {
    31                         if ( ! ( evt instanceof CKEDITOR.dom.event ) )
    32                                 evt = new CKEDITOR.dom.event( evt );
    33 
    3434                        var target = evt.getTarget(),
    3535                                color;
    3636
    37                         if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
     37                        if ( target.getName() == 'td' &&
     38                                 ( color = target.getChild( 0 ).getHtml() ) )
     39                        {
     40                                selected = target;
     41                                selected.setAttribute( 'aria-selected', true );
    3842                                dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );
    39                 }
     43                        }
     44                }
    4045
     46                // Basing black-white decision off of luma scheme using the Rec. 709 version
     47                function whiteOrBlack( color )
     48                {
     49                        color = color.replace( /^#/, '' );
     50                        for ( var i = 0, rgb = []; i <= 2; i++ )
     51                                rgb[i] = parseInt( color.substr( i * 2, 2 ), 16 );
     52                        var luma = (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
     53                        return '#' + ( luma >= 165 ? '000' : 'fff' );
     54                }
     55
     56                // Distinguish focused and hover states.
     57                var focused, hovered;
     58
     59                // Apply highlight style.
    4160                function updateHighlight( event )
    4261                {
    43                         if ( ! ( event instanceof CKEDITOR.dom.event ) )
    44                                 event = event.data;
     62                        // Convert to event.
     63                        !event.name && ( event = new CKEDITOR.event( event ) );
    4564
    46                         var target = event.getTarget(),
    47                                         color;
     65                        var isFocus = !/mouse/.test( event.name ),
     66                                target = event.data.getTarget(),
     67                                color;
    4868
    49                         if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
     69                        if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) )
    5070                        {
     71                                removeHighlight( event );
     72
     73                                isFocus ? focused = target : hovered = target;
     74
     75                                // Apply outline style to show focus.
     76                                target.setStyle( 'border-color', whiteOrBlack( color ) );
     77                                target.setStyle( 'border-style', 'dotted' );
     78
    5179                                $doc.getById( hicolorId ).setStyle( 'background-color', color );
    5280                                $doc.getById( hicolorTextId ).setHtml( color );
    5381                        }
    5482                }
    5583
    56                 function clearHighlight()
     84                // Remove previously focused style.
     85                function removeHighlight( event )
    5786                {
    58                         $doc.getById( hicolorId ).removeStyle( 'background-color' );
    59                         $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
    60                 }
     87                        var isFocus = !/mouse/.test( event.name ),
     88                                target = isFocus ? focused : hovered;
     89
     90                        if ( target )
     91                        {
     92                                var color = target.getChild( 0 ).getHtml();
     93                                target.setStyle( 'border-color', color );
     94                                target.setStyle( 'border-style', 'solid' );
     95                        }
     96
     97                        if ( ! ( focused || hovered ) )
     98                        {
     99                                $doc.getById( hicolorId ).removeStyle( 'background-color' );
     100                                $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
     101                        }
     102                }
    61103
    62                 var onMouseout = $tools.addFunction( clearHighlight ),
    63                         onClick = updateSelected,
    64                         onClickHandler = CKEDITOR.tools.addFunction( onClick );
    65 
    66                 var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )
     104                function onKeyStrokes( ev )
    67105                {
    68                         ev = new CKEDITOR.dom.event( ev );
     106                        ev = ev.data;
     107
    69108                        var element = ev.getTarget();
    70109                        var relative, nodeToMove;
    71110                        var keystroke = ev.getKeystroke(),
     
    76115                                // UP-ARROW
    77116                                case 38 :
    78117                                        // relative is TR
    79                                         if ( ( relative = element.getParent().getParent().getPrevious() ) )
     118                                        if ( ( relative = element.getParent().getPrevious() ) )
    80119                                        {
    81                                                 nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
     120                                                nodeToMove = relative.getChild( [ element.getIndex() ] );
    82121                                                nodeToMove.focus();
    83122                                        }
    84123                                        ev.preventDefault();
     
    86125                                // DOWN-ARROW
    87126                                case 40 :
    88127                                        // relative is TR
    89                                         if ( ( relative = element.getParent().getParent().getNext() ) )
     128                                        if ( ( relative = element.getParent().getNext() ) )
    90129                                        {
    91                                                 nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
     130                                                nodeToMove = relative.getChild( [ element.getIndex() ] );
    92131                                                if ( nodeToMove && nodeToMove.type == 1 )
    93132                                                {
    94133                                                        nodeToMove.focus();
     
    96135                                        }
    97136                                        ev.preventDefault();
    98137                                        break;
     138
    99139                                // SPACE
    100                                 // ENTER is already handled as onClick
     140                                // ENTER
    101141                                case 32 :
    102                                         onClick( ev );
     142                                case 13 :
     143                                        updateSelected( ev );
    103144                                        ev.preventDefault();
    104145                                        break;
    105146
    106147                                // RIGHT-ARROW
    107148                                case rtl ? 37 : 39 :
    108149                                        // relative is TD
    109                                         if ( ( relative = element.getParent().getNext() ) )
     150                                        if ( ( nodeToMove = element.getNext() ) )
    110151                                        {
    111                                                 nodeToMove = relative.getChild( 0 );
    112152                                                if ( nodeToMove.type == 1 )
    113153                                                {
    114154                                                        nodeToMove.focus();
     
    116156                                                }
    117157                                        }
    118158                                        // relative is TR
    119                                         else if ( ( relative = element.getParent().getParent().getNext() ) )
     159                                        else if ( ( relative = element.getParent().getNext() ) )
    120160                                        {
    121                                                 nodeToMove = relative.getChild( [ 0, 0 ] );
     161                                                nodeToMove = relative.getChild( [ 0 ] );
    122162                                                if ( nodeToMove && nodeToMove.type == 1 )
    123163                                                {
    124164                                                        nodeToMove.focus();
     
    130170                                // LEFT-ARROW
    131171                                case rtl ? 39 : 37 :
    132172                                        // relative is TD
    133                                         if ( ( relative = element.getParent().getPrevious() ) )
     173                                        if ( ( nodeToMove = element.getPrevious() ) )
    134174                                        {
    135                                                 nodeToMove = relative.getChild( 0 );
    136175                                                nodeToMove.focus();
    137176                                                ev.preventDefault( true );
    138177                                        }
    139178                                        // relative is TR
    140                                         else if ( ( relative = element.getParent().getParent().getPrevious() ) )
     179                                        else if ( ( relative = element.getParent().getPrevious() ) )
    141180                                        {
    142                                                 nodeToMove = relative.getLast().getChild( 0 );
     181                                                nodeToMove = relative.getLast();
    143182                                                nodeToMove.focus();
    144183                                                ev.preventDefault( true );
    145184                                        }
     
    148187                                        // Do not stop not handled events.
    149188                                        return;
    150189                        }
    151                 });
     190                }
    152191
    153192                function createColorTable()
    154193                {
     194                        table = CKEDITOR.dom.element.createFromHtml
     195                        (
     196                                '<table tabIndex="-1" aria-label="' + lang.options + '"' +
     197                                ' role="grid" style="border-collapse:separate;" cellspacing="0">' +
     198                                '<caption class="cke_voice_label">' + lang.options + '</caption>' +
     199                                '<tbody role="presentation"></tbody></table>'
     200                        );
     201
     202                        table.on( 'mouseover', updateHighlight );
     203                        table.on( 'mouseout', removeHighlight );
     204
    155205                        // Create the base colors array.
    156206                        var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ];
    157207
     
    160210                        {
    161211                                for ( var i = rangeA ; i < rangeA + 3 ; i++ )
    162212                                {
    163                                         var row = table.$.insertRow( -1 );
     213                                        var row = new $el( table.$.insertRow( -1 ) );
     214                                        row.setAttribute( 'role', 'row' );
    164215
    165216                                        for ( var j = rangeB ; j < rangeB + 3 ; j++ )
    166217                                        {
    167218                                                for ( var n = 0 ; n < 6 ; n++ )
    168219                                                {
    169                                                         appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );
     220                                                        appendColorCell( row.$, '#' + aColors[j] + aColors[n] + aColors[i] );
    170221                                                }
    171222                                        }
    172223                                }
     
    177228                        {
    178229                                var cell = new $el( targetRow.insertCell( -1 ) );
    179230                                cell.setAttribute( 'class', 'ColorCell' );
     231                                cell.setAttribute( 'tabIndex', -1 );
     232                                cell.setAttribute( 'role', 'gridcell' );
     233
     234                                cell.on( 'keydown', onKeyStrokes );
     235                                cell.on( 'click', updateSelected );
     236                                cell.on( 'focus', updateHighlight );
     237                                cell.on( 'blur', removeHighlight );
     238
    180239                                cell.setStyle( 'background-color', color );
     240                                cell.setStyle( 'border', '1px solid ' + color );
    181241
    182                                 cell.setStyle( 'width', '15px' );
    183                                 cell.setStyle( 'height', '15px' );
     242                                cell.setStyle( 'width', '14px' );
     243                                cell.setStyle( 'height', '14px' );
    184244
    185                                 var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex;
    186                                 cell.append( CKEDITOR.dom.element.createFromHtml(
    187                                                 '<a href="javascript: void(0);" role="option"' +
    188                                                 ' aria-posinset="' + index + '"' +
    189                                                 ' aria-setsize="' + 13 * 18 + '"' +
    190                                                 ' style="cursor: pointer;display:block;width:100%;height:100% " title="'+ CKEDITOR.tools.htmlEncode( color )+ '"' +
    191                                                 ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydownHandler + ', event, this )"' +
    192                                                 ' onclick="CKEDITOR.tools.callFunction(' + onClickHandler + ', event, this ); return false;"' +
    193                                                 ' tabindex="-1"><span class="cke_voice_label">' + color + '</span>&nbsp;</a>', CKEDITOR.document ) );
     245                                var colorLabel = numbering( 'color_table_cell' );
     246                                cell.setAttribute( 'aria-labelledby',colorLabel );
     247                                cell.append( CKEDITOR.dom.element.createFromHtml( '<span id="' + colorLabel + '" class="cke_voice_label">' + color + '</span>', CKEDITOR.document ) );
    194248                        }
    195249
    196250                        appendColorRow( 0, 0 );
     
    214268                        }
    215269                }
    216270
    217                 var table = new $el( 'table' );
    218                 createColorTable();
    219                 var html = table.getHtml();
    220 
    221271                var numbering = function( id )
    222272                        {
    223273                                return CKEDITOR.tools.getNextId() + '_' + id;
     
    225275                        hicolorId = numbering( 'hicolor' ),
    226276                        hicolorTextId = numbering( 'hicolortext' ),
    227277                        selHiColorId = numbering( 'selhicolor' ),
    228                         tableLabelId = numbering( 'color_table_label' );
     278                        table;
    229279
     280                createColorTable();
     281
    230282                return {
    231283                        title : lang.title,
    232284                        minWidth : 360,
     
    236288                                // Update reference.
    237289                                dialog = this;
    238290                        },
     291                        onHide : function()
     292                        {
     293                                focused = selected = null;
     294                        },
    239295                        contents : [
    240296                                {
    241297                                        id : 'picker',
     
    251307                                                        [
    252308                                                                {
    253309                                                                        type : 'html',
    254                                                                         html :  '<table role="listbox" aria-labelledby="' + tableLabelId + '" onmouseout="CKEDITOR.tools.callFunction( ' + onMouseout + ' );">' +
    255                                                                                         ( !CKEDITOR.env.webkit ? html : '' ) +
    256                                                                                 '</table><span id="' + tableLabelId + '" class="cke_voice_label">' + lang.options +'</span>',
     310                                                                        html :  '<div></div>',
    257311                                                                        onLoad : function()
    258312                                                                        {
    259                                                                                 var table = CKEDITOR.document.getById( this.domId );
    260                                                                                 table.on( 'mouseover', updateHighlight );
    261                                                                                 CKEDITOR.event.useCapture = true;
    262                                                                                 table.on( 'focus', updateHighlight );
    263                                                                                 CKEDITOR.event.useCapture = false;
    264 
    265                                                                                 // In WebKit, the table content must be inserted after this event call (#6150)
    266                                                                                 CKEDITOR.env.webkit && table.setHtml( html );
     313                                                                                CKEDITOR.document.getById( this.domId ).append( table );
    267314                                                                        },
    268315                                                                        focus: function()
    269316                                                                        {
    270                                                                                 var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
    271                                                                                 firstColor.focus();
     317                                                                                // Restore to previously focused fallback to the first one.
     318                                                                                var toFocus = focused || this.getElement().getElementsByTag( 'td' ).getItem( 0 );
     319                                                                                toFocus.focus();
    272320                                                                        }
    273321                                                                },
    274322                                                                spacer,
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy