Ticket #4649: 4649.patch

File 4649.patch, 8.5 KB (added by Garry Yao, 14 years ago)

  • _source/lang/en.js

     
    713713        colordialog :
    714714        {
    715715                title           : 'Select color',
     716                options :       'Color Options',
    716717                highlight       : 'Highlight',
    717                 selected        : 'Selected',
     718                selected        : 'Selected Color',
    718719                clear           : 'Clear'
    719720        },
    720721

  • _source/plugins/colordialog/dialogs/colordialog.js

     
    2222                        };
    2323                }
    2424
    25                 var table = new $el( 'table' );
    26                 createColorTable();
     25                function clearSelected()
     26                {
     27                        $doc.getById( 'selhicolor' ).removeStyle( 'background-color' );
     28                        dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
     29                }
    2730
    28                 var cellMouseover = function( event )
     31                function updateSelected( evt )
    2932                {
    30                         var color = new $el( event.data.getTarget() ).getAttribute( 'title' );
    31                         $doc.getById( 'hicolor' ).setStyle( 'background-color', color );
    32                         $doc.getById( 'hicolortext' ).setHtml( color );
     33                        if ( ! (evt instanceof CKEDITOR.dom.event ) )
     34                                evt = new CKEDITOR.dom.event( evt );
     35
     36                        var target = evt.getTarget(),
     37                                        color;
     38
     39                        if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
     40                                dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );
     41                }
     42
     43                function updateHighlight( event )
     44                {
     45                        if ( ! (event instanceof CKEDITOR.dom.event ) )
     46                                event = event.data;
     47
     48                        var target = event.getTarget(),
     49                                        color;
     50
     51                        if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
     52                        {
     53                                $doc.getById( 'hicolor' ).setStyle( 'background-color', color );
     54                                $doc.getById( 'hicolortext' ).setHtml( color );
     55                        }
    3356                };
    3457
    35                 var cellClick = function( event )
     58                function clearHighlight()
    3659                {
    37                         var color = new $el( event.data.getTarget() ).getAttribute( 'title' );
    38                         dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );
    39                 };
     60                        $doc.getById( 'hicolor' ).removeStyle( 'background-color' );
     61                        $doc.getById( 'hicolortext' ).setHtml( ' ' );
     62                }
    4063
     64                var onMouseout = $tools.addFunction( clearHighlight );
     65
     66                var onClick = updateSelected,
     67                                onClickHandler = CKEDITOR.tools.addFunction( onClick );
     68
     69                var onFocus = updateHighlight,
     70                                onBlur = clearHighlight;
     71
     72                var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )
     73                {
     74                        ev = new CKEDITOR.dom.event( ev );
     75                        var element = ev.getTarget();
     76                        var relative, nodeToMove;
     77                        var keystroke = ev.getKeystroke();
     78                        var rtl = editor.lang.dir == 'rtl';
     79
     80                        switch ( keystroke )
     81                        {
     82                                // UP-ARROW
     83                                case 38 :
     84                                        // relative is TR
     85                                        if ( ( relative = element.getParent().getParent().getPrevious() ) )
     86                                        {
     87                                                nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
     88                                                nodeToMove.focus();
     89                                                onBlur( ev, element );
     90                                                onFocus( ev, nodeToMove );
     91                                        }
     92                                        ev.preventDefault();
     93                                        break;
     94                                // DOWN-ARROW
     95                                case 40 :
     96                                        // relative is TR
     97                                        if ( ( relative = element.getParent().getParent().getNext() ) )
     98                                        {
     99                                                nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
     100                                                if ( nodeToMove && nodeToMove.type == 1 )
     101                                                {
     102                                                        nodeToMove.focus();
     103                                                        onBlur( ev, element );
     104                                                        onFocus( ev, nodeToMove );
     105                                                }
     106                                        }
     107                                        ev.preventDefault();
     108                                        break;
     109                                // SPACE
     110                                // ENTER is already handled as onClick
     111                                case 32 :
     112                                        onClick( ev );
     113                                        ev.preventDefault();
     114                                        break;
     115
     116                                // RIGHT-ARROW
     117                                case rtl ? 37 : 39 :
     118                                        // relative is TD
     119                                        if ( ( relative = element.getParent().getNext() ) )
     120                                        {
     121                                                nodeToMove = relative.getChild( 0 );
     122                                                if ( nodeToMove.type == 1 )
     123                                                {
     124                                                        nodeToMove.focus();
     125                                                        onBlur( ev, element );
     126                                                        onFocus( ev, nodeToMove );
     127                                                        ev.preventDefault( true );
     128                                                }
     129                                                else
     130                                                        onBlur( null, element );
     131                                        }
     132                                        // relative is TR
     133                                        else if ( ( relative = element.getParent().getParent().getNext() ) )
     134                                        {
     135                                                nodeToMove = relative.getChild( [ 0, 0 ] );
     136                                                if ( nodeToMove && nodeToMove.type == 1 )
     137                                                {
     138                                                        nodeToMove.focus();
     139                                                        onBlur( ev, element );
     140                                                        onFocus( ev, nodeToMove );
     141                                                        ev.preventDefault( true );
     142                                                }
     143                                                else
     144                                                        onBlur( null, element );
     145                                        }
     146                                        break;
     147
     148                                // LEFT-ARROW
     149                                case rtl ? 39 : 37 :
     150                                        // relative is TD
     151                                        if ( ( relative = element.getParent().getPrevious() ) )
     152                                        {
     153                                                nodeToMove = relative.getChild( 0 );
     154                                                nodeToMove.focus();
     155                                                onBlur( ev, element );
     156                                                onFocus( ev, nodeToMove );
     157                                                ev.preventDefault( true );
     158                                        }
     159                                        // relative is TR
     160                                        else if ( ( relative = element.getParent().getParent().getPrevious() ) )
     161                                        {
     162                                                nodeToMove = relative.getLast().getChild( 0 );
     163                                                nodeToMove.focus();
     164                                                onBlur( ev, element );
     165                                                onFocus( ev, nodeToMove );
     166                                                ev.preventDefault( true );
     167                                        }
     168                                        else
     169                                                onBlur( null, element );
     170                                        break;
     171                                default :
     172                                        // Do not stop not handled events.
     173                                        return;
     174                        }
     175                });
     176
    41177                function createColorTable()
    42178                {
    43179                        // Create the base colors array.
    … …  
    70206                                cell.setStyle( 'width', '15px' );
    71207                                cell.setStyle( 'height', '15px' );
    72208
    73                                 // Pass unparsed color value in some markup-degradable form.
    74                                 cell.setAttribute( 'title', color );
     209                                var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex;
     210                                cell.append( CKEDITOR.dom.element.createFromHtml(
     211                                                '<a href="javascript: void(0);" role="option"' +
     212                                                ' aria-posinset="' + index + '"' +
     213                                                ' aria-setsize="' + 13 * 18 + '"' +
     214                                                ' style="cursor: pointer;display:block;width:100%;height:100% " title="'+ CKEDITOR.tools.htmlEncode( color )+ '"' +
     215                                                ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydownHandler + ', event, this )"' +
     216                                                ' onclick="CKEDITOR.tools.callFunction(' + onClickHandler + ', event, this ); return false;"' +
     217                                                ' tabindex="-1"><span class="cke_voice_label">' + color + '</span></a>', CKEDITOR.document ) );
    75218                        }
    76219
    77220                        appendColorRow( 0, 0 );
    … …  
    95238                        }
    96239                }
    97240
    98                 function clear()
    99                 {
    100                         $doc.getById( 'selhicolor' ).removeStyle( 'background-color' );
    101                         dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
    102                 }
     241                var table = new $el( 'table' );
     242                createColorTable();
    103243
    104                 var clearActual = $tools.addFunction( function()
    105                 {
    106                         $doc.getById( 'hicolor' ).removeStyle( 'background-color' );
    107                         $doc.getById( 'hicolortext' ).setHtml( '&nbsp;' );
    108                 } );
    109 
    110244                return {
    111245                        title : lang.title,
    112246                        minWidth : 360,
    … …  
    131265                                                        [
    132266                                                                {
    133267                                                                        type : 'html',
    134                                                                         html : '<table onmouseout="CKEDITOR.tools.callFunction( ' + clearActual + ' );">' + table.getHtml() + '</table>',
     268                                                                        html : '<table role="listbox" aria-labelledby="color_table_label" onmouseout="CKEDITOR.tools.callFunction( ' + onMouseout + ' );">' + table.getHtml() + '</table>' +
     269                                                                                                '<span id="color_table_label" class="cke_voice_label">' + lang.options +'</span>',
    135270                                                                        onLoad : function()
    136271                                                                        {
    137272                                                                                var table = CKEDITOR.document.getById( this.domId );
    138                                                                                 table.on( 'mouseover', cellMouseover );
    139                                                                                 table.on( 'click', cellClick );
     273                                                                                table.on( 'mouseover', updateHighlight );
     274                                                                        },
     275                                                                        focus: function()
     276                                                                        {
     277                                                                                var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
     278                                                                                firstColor.focus();
    140279                                                                        }
    141280                                                                },
    142281                                                                spacer(),
    … …  
    156295                                                                                },
    157296                                                                                {
    158297                                                                                        type : 'text',
     298                                                                                        label : lang.selected,
     299                                                                                        labelStyle: 'display:none',
    159300                                                                                        id : 'selectedColor',
    160301                                                                                        style : 'width: 74px',
    161302                                                                                        onChange : function()
    … …  
    167308                                                                                                }
    168309                                                                                                catch ( e )
    169310                                                                                                {
    170                                                                                                         clear();
     311                                                                                                        clearSelected();
    171312                                                                                                }
    172313                                                                                        }
    173314                                                                                },
    … …  
    177318                                                                                        id : 'clear',
    178319                                                                                        style : 'margin-top: 5px',
    179320                                                                                        label : lang.clear,
    180                                                                                         onClick : clear
     321                                                                                        onClick : clearSelected
    181322                                                                                }
    182323                                                                        ]
    183324                                                                }
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy