Ticket #8706: 8706_3.patch

File 8706_3.patch, 11.8 KB (added by Garry Yao, 12 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 
    34                         var target = evt.getTarget(),
     34                        var target = evt.data.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                                if ( isFocus )
     77                                {
     78                                        target.setStyle( 'border-color', whiteOrBlack( color ) );
     79                                        target.setStyle( 'border-style', 'dotted' );
     80                                }
     81
    5182                                $doc.getById( hicolorId ).setStyle( 'background-color', color );
    5283                                $doc.getById( hicolorTextId ).setHtml( color );
    5384                        }
    5485                }
    5586
    56                 function clearHighlight()
     87                // Remove previously focused style.
     88                function removeHighlight( event )
    5789                {
    58                         $doc.getById( hicolorId ).removeStyle( 'background-color' );
    59                         $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
    60                 }
     90                        var isFocus = !/mouse/.test( event.name ),
     91                                target = isFocus && focused;
     92
     93                        if ( target )
     94                        {
     95                                var color = target.getChild( 0 ).getHtml();
     96                                target.setStyle( 'border-color', color );
     97                                target.setStyle( 'border-style', 'solid' );
     98                        }
     99
     100                        if ( ! ( focused || hovered ) )
     101                        {
     102                                $doc.getById( hicolorId ).removeStyle( 'background-color' );
     103                                $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
     104                        }
     105                }
    61106
    62                 var onMouseout = $tools.addFunction( clearHighlight ),
    63                         onClick = updateSelected,
    64                         onClickHandler = CKEDITOR.tools.addFunction( onClick );
    65 
    66                 var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )
     107                function onKeyStrokes( evt )
    67108                {
    68                         ev = new CKEDITOR.dom.event( ev );
    69                         var element = ev.getTarget();
     109                        var domEvt = evt.data;
     110
     111                        var element = domEvt.getTarget();
    70112                        var relative, nodeToMove;
    71                         var keystroke = ev.getKeystroke(),
     113                        var keystroke = domEvt.getKeystroke(),
    72114                                rtl = editor.lang.dir == 'rtl';
    73115
     116                        // Initial focus is on table.
     117                        // always having the first cell highlighted on first arrow key-press.
     118                        if ( element.is( 'table' ) && ( keystroke < 41 && keystroke > 36 ) )
     119                        {
     120                                element = element.$.rows[ 0 ].cells[ 0 ];
     121                                element.focus();
     122                                domEvt.preventDefault();
     123                                return;
     124                        }
     125
    74126                        switch ( keystroke )
    75127                        {
    76128                                // UP-ARROW
    77129                                case 38 :
    78130                                        // relative is TR
    79                                         if ( ( relative = element.getParent().getParent().getPrevious() ) )
     131                                        if ( ( relative = element.getParent().getPrevious() ) )
    80132                                        {
    81                                                 nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
     133                                                nodeToMove = relative.getChild( [ element.getIndex() ] );
    82134                                                nodeToMove.focus();
    83135                                        }
    84                                         ev.preventDefault();
     136                                        domEvt.preventDefault();
    85137                                        break;
    86138                                // DOWN-ARROW
    87139                                case 40 :
    88140                                        // relative is TR
    89                                         if ( ( relative = element.getParent().getParent().getNext() ) )
     141                                        if ( ( relative = element.getParent().getNext() ) )
    90142                                        {
    91                                                 nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
     143                                                nodeToMove = relative.getChild( [ element.getIndex() ] );
    92144                                                if ( nodeToMove && nodeToMove.type == 1 )
    93145                                                {
    94146                                                        nodeToMove.focus();
    95147                                                }
    96148                                        }
    97                                         ev.preventDefault();
     149                                        domEvt.preventDefault();
    98150                                        break;
     151
    99152                                // SPACE
    100                                 // ENTER is already handled as onClick
     153                                // ENTER
    101154                                case 32 :
    102                                         onClick( ev );
    103                                         ev.preventDefault();
     155                                case 13 :
     156                                        updateSelected( evt );
     157                                        domEvt.preventDefault();
    104158                                        break;
    105159
    106160                                // RIGHT-ARROW
    107161                                case rtl ? 37 : 39 :
    108162                                        // relative is TD
    109                                         if ( ( relative = element.getParent().getNext() ) )
     163                                        if ( ( nodeToMove = element.getNext() ) )
    110164                                        {
    111                                                 nodeToMove = relative.getChild( 0 );
    112165                                                if ( nodeToMove.type == 1 )
    113166                                                {
    114167                                                        nodeToMove.focus();
    115                                                         ev.preventDefault( true );
     168                                                        domEvt.preventDefault( true );
    116169                                                }
    117170                                        }
    118171                                        // relative is TR
    119                                         else if ( ( relative = element.getParent().getParent().getNext() ) )
     172                                        else if ( ( relative = element.getParent().getNext() ) )
    120173                                        {
    121                                                 nodeToMove = relative.getChild( [ 0, 0 ] );
     174                                                nodeToMove = relative.getChild( [ 0 ] );
    122175                                                if ( nodeToMove && nodeToMove.type == 1 )
    123176                                                {
    124177                                                        nodeToMove.focus();
    125                                                         ev.preventDefault( true );
     178                                                        domEvt.preventDefault( true );
    126179                                                }
    127180                                        }
    128181                                        break;
    … …  
    130183                                // LEFT-ARROW
    131184                                case rtl ? 39 : 37 :
    132185                                        // relative is TD
    133                                         if ( ( relative = element.getParent().getPrevious() ) )
     186                                        if ( ( nodeToMove = element.getPrevious() ) )
    134187                                        {
    135                                                 nodeToMove = relative.getChild( 0 );
    136188                                                nodeToMove.focus();
    137                                                 ev.preventDefault( true );
     189                                                domEvt.preventDefault( true );
    138190                                        }
    139191                                        // relative is TR
    140                                         else if ( ( relative = element.getParent().getParent().getPrevious() ) )
     192                                        else if ( ( relative = element.getParent().getPrevious() ) )
    141193                                        {
    142                                                 nodeToMove = relative.getLast().getChild( 0 );
     194                                                nodeToMove = relative.getLast();
    143195                                                nodeToMove.focus();
    144                                                 ev.preventDefault( true );
     196                                                domEvt.preventDefault( true );
    145197                                        }
    146198                                        break;
    147199                                default :
    148200                                        // Do not stop not handled events.
    149201                                        return;
    150202                        }
    151                 });
     203                }
    152204
    153205                function createColorTable()
    154206                {
     207                        table = CKEDITOR.dom.element.createFromHtml
     208                        (
     209                                '<table tabIndex="-1" aria-label="' + lang.options + '"' +
     210                                ' role="grid" style="border-collapse:separate;" cellspacing="0">' +
     211                                '<caption class="cke_voice_label">' + lang.options + '</caption>' +
     212                                '<tbody role="presentation"></tbody></table>'
     213                        );
     214
     215                        table.on( 'mouseover', updateHighlight );
     216                        table.on( 'mouseout', removeHighlight );
     217                        table.on( 'keydown', onKeyStrokes );
     218
    155219                        // Create the base colors array.
    156220                        var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ];
    157221
    … …  
    160224                        {
    161225                                for ( var i = rangeA ; i < rangeA + 3 ; i++ )
    162226                                {
    163                                         var row = table.$.insertRow( -1 );
     227                                        var row = new $el( table.$.insertRow( -1 ) );
     228                                        row.setAttribute( 'role', 'row' );
    164229
    165230                                        for ( var j = rangeB ; j < rangeB + 3 ; j++ )
    166231                                        {
    167232                                                for ( var n = 0 ; n < 6 ; n++ )
    168233                                                {
    169                                                         appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );
     234                                                        appendColorCell( row.$, '#' + aColors[j] + aColors[n] + aColors[i] );
    170235                                                }
    171236                                        }
    172237                                }
    … …  
    177242                        {
    178243                                var cell = new $el( targetRow.insertCell( -1 ) );
    179244                                cell.setAttribute( 'class', 'ColorCell' );
     245                                cell.setAttribute( 'tabIndex', -1 );
     246                                cell.setAttribute( 'role', 'gridcell' );
     247
     248                                cell.on( 'keydown', onKeyStrokes );
     249                                cell.on( 'click', updateSelected );
     250                                cell.on( 'focus', updateHighlight );
     251                                cell.on( 'blur', removeHighlight );
     252
    180253                                cell.setStyle( 'background-color', color );
     254                                cell.setStyle( 'border', '1px solid ' + color );
    181255
    182                                 cell.setStyle( 'width', '15px' );
    183                                 cell.setStyle( 'height', '15px' );
     256                                cell.setStyle( 'width', '14px' );
     257                                cell.setStyle( 'height', '14px' );
    184258
    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 ) );
     259                                var colorLabel = numbering( 'color_table_cell' );
     260                                cell.setAttribute( 'aria-labelledby',colorLabel );
     261                                cell.append( CKEDITOR.dom.element.createFromHtml( '<span id="' + colorLabel + '" class="cke_voice_label">' + color + '</span>', CKEDITOR.document ) );
    194262                        }
    195263
    196264                        appendColorRow( 0, 0 );
    … …  
    214282                        }
    215283                }
    216284
    217                 var table = new $el( 'table' );
    218                 createColorTable();
    219                 var html = table.getHtml();
    220 
    221285                var numbering = function( id )
    222286                        {
    223287                                return CKEDITOR.tools.getNextId() + '_' + id;
    … …  
    225289                        hicolorId = numbering( 'hicolor' ),
    226290                        hicolorTextId = numbering( 'hicolortext' ),
    227291                        selHiColorId = numbering( 'selhicolor' ),
    228                         tableLabelId = numbering( 'color_table_label' );
     292                        table;
    229293
     294                createColorTable();
     295
    230296                return {
    231297                        title : lang.title,
    232298                        minWidth : 360,
    … …  
    236302                                // Update reference.
    237303                                dialog = this;
    238304                        },
     305                        onHide : function()
     306                        {
     307                                focused = selected = null;
     308                        },
    239309                        contents : [
    240310                                {
    241311                                        id : 'picker',
    … …  
    251321                                                        [
    252322                                                                {
    253323                                                                        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>',
     324                                                                        html :  '<div></div>',
    257325                                                                        onLoad : function()
    258326                                                                        {
    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 );
     327                                                                                CKEDITOR.document.getById( this.domId ).append( table );
    267328                                                                        },
    268                                                                         focus: function()
     329                                                                        focus : function()
    269330                                                                        {
    270                                                                                 var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
    271                                                                                 firstColor.focus();
     331                                                                                // Restore the previously focused cell,
     332                                                                                // otherwise put the initial focus on table.
     333                                                                                ( focused || this.getElement().getFirst() ).focus();
    272334                                                                        }
    273335                                                                },
    274336                                                                spacer,
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy