Ticket #3074: 3074.patch

File 3074.patch, 14.3 KB (added by Martin Kou, 15 years ago)

  • _source/plugins/dialogui/plugin.js

     
    436436                                /** @ignore */
    437437                                var innerHTML = function()
    438438                                {
    439                                         return [ '<tbody><tr><td class="cke_dialog_ui_button_txt">',
    440                                                    CKEDITOR.tools.htmlEncode( elementDefinition.label ),
    441                                                    '</td></tr></tbody>' ].join( '' );
     439                                        var styles = [],
     440                                                align = elementDefinition.align || ( dialog.getParentEditor().lang.dir == 'ltr' ? 'left' : 'right' );
     441
     442                                        if ( elementDefinition.style )
     443                                        {
     444                                                var defStyle = CKEDITOR.tools.trim( elementDefinition.style );
     445                                                styles.push( defStyle );
     446                                                if ( defStyle.charAt( defStyle.length - 1 ) != ';' )
     447                                                        styles.push( ';' );
     448                                        }
     449
     450                                        // IE6 & 7 BUG: Need to set margin as well as align.
     451                                        if ( CKEDITOR.env.ie && CKEDITOR.env.version < 8 )
     452                                        {
     453                                                styles.push( [
     454                                                        'margin:',
     455                                                        'auto',
     456                                                        align == 'right' ? '0px' : 'auto',
     457                                                        'auto',
     458                                                        align == 'left' ? '0px' : 'auto' ].join( ' ' ), ';' );
     459                                        }
     460
     461                                        return [
     462                                                '<table align="', align, '" ', styles.length > 0 ? 'style="' + styles.join( '' ) + '">' : '>',
     463                                                '<tbody><tr><td class="cke_dialog_ui_button_txt">',
     464                                                CKEDITOR.tools.htmlEncode( elementDefinition.label ),
     465                                                '</td></tr></tbody></table>'
     466                                        ].join( '' );
    442467                                };
    443468
    444469                                // Add OnClick event to this input.
    … …  
    449474                                dialog.on( 'load', function( eventInfo )
    450475                                                {
    451476                                                        var element = this.getElement();
    452                                                         element.on( 'mousedown', function( evt )
    453                                                                 {
    454                                                                         // If button is disabled, don't do anything.
    455                                                                         if ( me._.disabled )
    456                                                                                 return;
     477                                                        (function()
     478                                                        {
     479                                                                element.on( 'mousedown', function( evt )
     480                                                                        {
     481                                                                                // If button is disabled, don't do anything.
     482                                                                                if ( me._.disabled )
     483                                                                                        return;
    457484
    458                                                                         // Change styles to indicate the button is being clicked.
    459                                                                         me.getElement().addClass( 'active' );
     485                                                                                // Store the currently active button.
     486                                                                                CKEDITOR.ui.dialog.button._.activeButton = [ me, me.getElement() ];
     487                                                                        } );
    460488
    461                                                                         // Store the currently active button.
    462                                                                         CKEDITOR.ui.dialog.button._.activeButton = [ me, me.getElement() ];
    463                                                                 });
     489                                                                element.on( 'keydown', function( evt )
     490                                                                        {
     491                                                                                // Click if Enter is pressed.
     492                                                                                if ( evt.data.$.keyCode == 13 )
     493                                                                                {
     494                                                                                        me.fire( 'click', { dialog : me.getDialog() } );
     495                                                                                        evt.data.preventDefault();
     496                                                                                }
     497                                                                        } );
     498                                                        })();
    464499
    465500                                                        // IE BUG: Padding attributes are ignored for <td> cells.
    466501                                                        if ( CKEDITOR.env.ie )
    467                                                                 element.getChild( [0, 0, 0] ).$.innerHTML += '';
     502                                                                element.getChild( [0, 0, 0, 0] ).$.innerHTML += '';
    468503
    469504                                                        if ( !eventInfo.data.buttonHandlerRegistered )
    470505                                                        {
    … …  
    477512                                                                                if ( !activeButton )
    478513                                                                                        return;
    479514
    480                                                                                 // Change styles to remove active status.
    481                                                                                 activeButton[1].removeClass( 'active' );
    482 
    483515                                                                                // Fire the click event - but only if the
    484516                                                                                // active button is the same as target.
    485                                                                                 if ( activeButton[1].equals( target.getAscendant( 'table' ) ) )
     517                                                                                if ( activeButton[1].equals( target.getAscendant( 'a' ) ) )
    486518                                                                                        activeButton[0].fire( 'click', { dialog : activeButton[0].getDialog() } );
    487519
    488520                                                                                // Clear active button flag.
    489521                                                                                CKEDITOR.ui.dialog.button._.activeButton = null;
    490                                                                         });
     522                                                                        } );
    491523
    492524                                                                eventInfo.data.buttonHandlerRegistered = true;
    493525                                                        }
    494526
    495                                                         this.getElement().unselectable();
     527                                                        this.getElement().getFirst().unselectable();
    496528                                                }, this );
    497529
    498                                 var styles = {},
    499                                         align = elementDefinition.align || ( dialog.getParentEditor().lang.dir == 'ltr' ? 'left' : 'right' );
     530                                var outerDefinition = CKEDITOR.tools.extend( {}, elementDefinition );
     531                                delete outerDefinition.style;
    500532
    501                                 // IE6 & 7 BUG: Need to set margin as well as align.
    502                                 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 8 )
    503                                 {
    504                                         styles.margin = [
    505                                                 'auto',
    506                                                 align == 'right' ? '0px' : 'auto',
    507                                                 'auto',
    508                                                 align == 'left' ? '0px' : 'auto' ].join( ' ' );
    509                                 }
    510 
    511                                 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'table', styles,
    512                                                 { align : align }, innerHTML );
     533                                CKEDITOR.ui.dialog.uiElement.call( this, dialog, outerDefinition, htmlList, 'a', { display : 'block', outline : 'none' },
     534                                                { href : 'javascript:void(0);', title : elementDefinition.label, hidefocus : 'true' },
     535                                                innerHTML );
    513536                        },
    514537
    515538                        /**
    … …  
    779802                                {
    780803                                        if ( !this._.disabled )
    781804                                                return this.fire( 'click', { dialog : this._.dialog } );
     805                                        this.getElement().$.blur();
    782806                                },
    783807
    784808                                /**
    … …  
    801825                                        this.getElement().addClass( 'disabled' );
    802826                                },
    803827
     828                                isVisible : function()
     829                                {
     830                                        return !!this.getElement().$.firstChild.offsetHeight;
     831                                },
     832
     833                                isEnabled : function()
     834                                {
     835                                        return !this._.disabled;
     836                                },
     837
    804838                                /**
    805839                                 * Defines the onChange event and onClick for button element definitions.
    806840                                 * @field
    … …  
    823857                                 */
    824858                                accessKeyUp : function()
    825859                                {
    826                                         this.getElement().removeClass( 'active' );
    827860                                        this.click();
    828861                                },
    829862
    … …  
    834867                                 */
    835868                                accessKeyDown : function()
    836869                                {
    837                                         this.getElement().addClass( 'active' );
    838                                 }
     870                                        this.focus();
     871                                },
     872
     873                                keyboardFocusable : true
    839874                        }, true );
    840875
    841876        CKEDITOR.ui.dialog.textInput.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
    … …  
    896931                                {
    897932                                        value = value || '';
    898933                                        return CKEDITOR.ui.dialog.uiElement.prototype.setValue.call( this, value );
    899                                 }
     934                                },
     935
     936                                keyboardFocusable : true
    900937                        }, commonPrototype, true );
    901938
    902939        CKEDITOR.ui.dialog.textarea.prototype = new CKEDITOR.ui.dialog.textInput();
    … …  
    9661003                                        while ( selectElement.length > 0 )
    9671004                                                selectElement.remove( 0 );
    9681005                                        return this;
    969                                 }
     1006                                },
     1007
     1008                                keyboardFocusable : true
    9701009                        }, commonPrototype, true );
    9711010
    9721011        CKEDITOR.ui.dialog.checkbox.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
    … …  
    10401079                                                }
    10411080                                                return null;
    10421081                                        }
    1043                                 }
     1082                                },
     1083
     1084                                keyboardFocusable : true
    10441085                        }, commonPrototype, true );
    10451086
    10461087        CKEDITOR.ui.dialog.radio.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
    … …  
    11281169                                                }
    11291170                                                return null;
    11301171                                        }
    1131                                 }
     1172                                },
     1173
     1174                                keyboardFocusable : true
    11321175                        }, commonPrototype, true );
    11331176
    11341177        CKEDITOR.ui.dialog.file.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
    … …  
    11931236                                 * @type Object
    11941237                                 * @example
    11951238                                 */
    1196                                 eventProcessors : commonEventProcessors
     1239                                eventProcessors : commonEventProcessors,
     1240
     1241                                keyboardFocusable : true
    11971242                        }, true );
    11981243
    11991244        CKEDITOR.ui.dialog.fileButton.prototype = new CKEDITOR.ui.dialog.button;

  • _source/plugins/dialog/plugin.js

     
    8989                        // Initialize the tab and page map.
    9090                        tabs : {},
    9191                        pageCount : 0,
    92                         lastTab : null
     92                        lastTab : null,
     93
     94                        // Initialize the tab order array for input widgets.
     95                        focusList : [],
     96                        currentFocusIndex : 0
    9397                };
    9498
    9599                /**
    … …  
    251255                                                this.hide();
    252256                                }, this );
    253257
     258                var tabBarMode = false;
     259                var focusKeydownHandler = function( evt )
     260                {
     261                        // If I'm not the top dialog, ignore.
     262                        if ( me != CKEDITOR.dialog._.currentTop )
     263                                return;
     264
     265                        var $evt = evt.data.$;
     266                        if ( $evt.keyCode == 9 )
     267                        {
     268                                // Handling Tab and Shift-Tab.
     269                                if ( tabBarMode )
     270                                {
     271                                        // Change tabs.
     272                                }
     273                                else
     274                                {
     275                                        // Change the focus of inputs.
     276                                        var focusList = me._.focusList,
     277                                                shiftPressed = $evt.shiftKey,
     278                                                offset = shiftPressed ? -1 : 1;
     279                                        if ( focusList.length < 1 )
     280                                                return;
     281
     282                                        var currentIndex = ( me._.currentFocusIndex + offset + focusList.length ) % focusList.length;
     283                                        while ( !focusList[ currentIndex ].isFocusable() )
     284                                        {
     285                                                currentIndex = ( currentIndex + offset + focusList.length ) % focusList.length;
     286                                                if ( currentIndex == me._.currentFocusIndex )
     287                                                        break;
     288                                        }
     289                                        focusList[ ( me._.currentFocusIndex = currentIndex ) ].focus();
     290                                }
     291
     292                                evt.data.preventDefault();
     293                        }
     294                        else if ( $evt.keyCode == 192 && $evt.altKey )
     295                        {
     296                                // Alt-` puts focus into the current tab item in the tab bar.
     297                                tabBarMode = true;
     298                        }
     299                        else if ( $evt.keyCode == 37 || $evt.keyCode == 39 )
     300                        {
     301                                // Arrow keys - used for changing tabs.
     302                        }
     303                        else if ( $evt.keyCode == 27 )
     304                        {
     305                                // Esc - puts the focus back into the dialog contents.
     306                                tabBarMode = false;
     307                        }
     308                };
     309
     310                this.on( 'show', function()
     311                        {
     312                                CKEDITOR.document.on( 'keydown', focusKeydownHandler );
     313                        } );
     314                this.on( 'hide', function()
     315                        {
     316                                CKEDITOR.document.removeListener( 'keydown', focusKeydownHandler );
     317                        } );
     318
     319
    254320                // IE6 BUG: Text fields and text areas are only half-rendered the first time the dialog appears in IE6 (#2661).
    255321                // This is still needed after [2708] and [2709] because text fields in hidden TR tags are still broken.
    256322                if ( CKEDITOR.env.ie6Compat )
    … …  
    577643                addPage : function( contents )
    578644                {
    579645                        var pageHtml = [],
    580                                 titleHtml = contents.title ? 'title="' + CKEDITOR.tools.htmlEncode( contents.title ) + '" ' : '',
     646                                titleHtml = contents.label ? ' title="' + CKEDITOR.tools.htmlEncode( contents.label ) + '"' : '',
    581647                                elements = contents.elements,
    582648                                vbox = CKEDITOR.dialog._.uiElementBuilders.vbox.build( this,
    583649                                                {
    … …  
    590656                        // Create the HTML for the tab and the content block.
    591657                        var page = CKEDITOR.dom.element.createFromHtml( pageHtml.join( '' ) );
    592658                        var tab = CKEDITOR.dom.element.createFromHtml( [
    593                                         '<table><tbody><tr><td class="cke_dialog_tab" ', titleHtml, '>',
     659                                        '<table><tbody><tr><td class="cke_dialog_tab">',
     660                                        '<a href="javascript: void(0)"', titleHtml, ' style="display: block; outline: none;" hidefocus="true">',
    594661                                        '<table border="0" cellspacing="0" cellpadding="0"><tbody><tr>',
    595662                                                '<td class="cke_dialog_tab_left"></td>',
    596663                                                '<td class="cke_dialog_tab_center">',
    597664                                                        CKEDITOR.tools.htmlEncode( contents.label.replace( / /g, '\xa0' ) ),
    598665                                                '</td>',
    599666                                                '<td class="cke_dialog_tab_right"></td>',
    600                                         '</tr></tbody></table></td></tr></tbody></table>'
     667                                        '</tr></tbody></table></a></td></tr></tbody></table>'
    601668                                ].join( '' ) );
    602669                        tab = tab.getChild( [0,0,0] );
    603670
    … …  
    16711738                         */
    16721739                        uiElement : function( dialog, elementDefinition, htmlList, nodeNameArg, stylesArg, attributesArg, contentsArg )
    16731740                        {
    1674                                 if (arguments.length < 4 )
     1741                                if ( arguments.length < 4 )
    16751742                                        return;
    16761743
    16771744                                var nodeName = ( nodeNameArg.call ? nodeNameArg( elementDefinition ) : nodeNameArg ) || 'div',
    … …  
    17441811                                if ( this.accessKeyUp && this.accessKeyDown && elementDefinition.accessKey )
    17451812                                        registerAccessKey( this, dialog, 'CTRL+' + elementDefinition.accessKey );
    17461813
     1814                                var me = this;
     1815                                dialog.on( 'load', function()
     1816                                        {
     1817                                                if ( me.getInputElement() )
     1818                                                {
     1819                                                        me.getInputElement().on( 'focus', function()
     1820                                                                {
     1821                                                                        me.fire( 'focus' );
     1822                                                                }, me );
     1823                                                }
     1824                                        } );
     1825
     1826                                // Register the object as a tab focus if it can be included.
     1827                                if ( this.keyboardFocusable )
     1828                                {
     1829                                        this.focusIndex = dialog._.focusList.push( this ) - 1;
     1830                                        this.on( 'focus', function()
     1831                                                {
     1832                                                        dialog._.currentFocusIndex = me.focusIndex;
     1833                                                } );
     1834                                }
     1835
    17471836                                // Completes this object with everything we have in the
    17481837                                // definition.
    17491838                                CKEDITOR.tools.extend( this, elementDefinition );
    … …  
    19932082                        while ( ( cursor = cursor.getParent() ) && cursor.$.className.search( 'cke_dialog_page_contents' ) == -1 )
    19942083                        { /*jsl:pass*/ }
    19952084
     2085                        // Some widgets don't have parent tabs (e.g. OK and Cancel buttons).
     2086                        if ( !cursor )
     2087                                return this;
     2088
    19962089                        tabId = cursor.getAttribute( 'name' );
    19972090
    19982091                        this._.dialog.selectPage( tabId );
    … …  
    21472240                        var element = this.getInputElement();
    21482241                        element.removeAttribute( 'disabled' );
    21492242                        element.removeClass( 'cke_disabled' );
     2243                },
     2244
     2245                /**
     2246                 * Determines whether an UI element is enabled or not.
     2247                 * @returns {Boolean} Whether the UI element is enabled.
     2248                 * @example
     2249                 */
     2250                isEnabled : function()
     2251                {
     2252                        return !this.getInputElement().getAttribute( 'disabled' );
     2253                },
     2254
     2255                /**
     2256                 * Determines whether an UI element is visible or not.
     2257                 * @returns {Boolean} Whether the UI element is visible.
     2258                 * @example
     2259                 */
     2260                isVisible : function()
     2261                {
     2262                        return !!this.getInputElement().$.offsetHeight;
     2263                },
     2264
     2265                /**
     2266                 * Determines whether an UI element is focus-able or not.
     2267                 * Focus-able is defined as being both visible and enabled.
     2268                 * @returns {Boolean} Whether the UI element can be focused.
     2269                 * @example
     2270                 */
     2271                isFocusable : function()
     2272                {
     2273                        if ( !this.isEnabled() || !this.isVisible() )
     2274                                return false;
     2275                        return true;
    21502276                }
    21512277        };
    21522278

  • _source/skins/default/dialog.css

     
    375375        vertical-align: top;
    376376}
    377377
    378 .cke_skin_default .cke_dialog_ui_button
     378.cke_skin_default .cke_dialog_ui_button table
    379379{
    380380        border: #737357 1px solid;
    381381}
    382382
    383 .cke_skin_default .cke_dialog_ui_button.disabled
     383.cke_skin_default .cke_dialog_ui_button.disabled table
    384384{
    385385        border: #898980 1px solid;
    386386}
    … …  
    399399        background-color: #c5c5b3;
    400400}
    401401
    402 .cke_skin_default .cke_dialog_ui_button.active .cke_dialog_ui_button_txt
     402.cke_skin_default a:focus.cke_dialog_ui_button .cke_dialog_ui_button_txt,
     403.cke_skin_default a:active.cke_dialog_ui_button .cke_dialog_ui_button_txt
    403404{
    404405        background-color: #e3e3c7;
    405406}
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy