Changeset 7516

Timestamp:

06/27/12 18:10:56 (12 months ago)

Author:

fredck

Message:

#8985 : Better handling of ENTER key events on dialogs.

Location:

CKEditor/trunk

Files:

• CHANGES.html (modified) (1 diff)
• _source/plugins/dialog/plugin.js (modified) (9 diffs)
• _source/plugins/dialogui/plugin.js (modified) (1 diff)

CKEditor/trunk/CHANGES.html

@@ -60 +60 @@
                 <li><a href="http://dev.ckeditor.com/ticket/8917">#8917</a> : [IE7] Dialog size are stretched when long text field value is received.</li>
                 <li><a href="http://dev.ckeditor.com/ticket/8945">#8945</a> : Fake elements now show alternative text on High Contrast mode.</li>
+                <li><a href="http://dev.ckeditor.com/ticket/8985">#8985</a> : Better handling of ENTER key events on dialogs.</li>
         </ul>
         <h3>

CKEditor/trunk/_source/plugins/dialog/plugin.js

@@ -142 +142 @@
                         tabsToRemove = {},
                         i,
-                        processed;
+                        processed, stopPropagation;
 
                         if ( ( buttonsOrder == 'OS' && CKEDITOR.env.mac ) ||    // The buttons in MacOS Apps are in reverse order (#4750)
@@ -398 +398 @@
 
 
-                function focusKeydownHandler( evt )
+                function keydownHandler( evt )
                 {
                         // If I'm not the top dialog, ignore.
@@ -405 +405 @@
 
                         var keystroke = evt.data.getKeystroke(),
-                                rtl = editor.lang.dir == 'rtl';
-
-                        processed = 0;
+                                rtl = editor.lang.dir == 'rtl',
+                                button;
+
+                        processed = stopPropagation = 0;
+
                         if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )
                         {
@@ -451 +453 @@
                                 processed = 1;
                         }
-
+                        // If user presses enter key in a text box, it implies clicking OK for the dialog.
+                        else if ( keystroke == 13 /*ENTER*/ )
+                        {
+                                // Don't do that for a target that handles ENTER.
+                                var target = evt.data.getTarget();
+                                if ( !target.is( 'a', 'button', 'select' ) && ( !target.is( 'input' ) || target.$.type != 'button' ) )
+                                {
+                                        button = this.getButton( 'ok' );
+                                        button && CKEDITOR.tools.setTimeout( button.click, 0, button );
+                                        processed = 1
+                                }
+                                stopPropagation = 1; // Always block the propagation (#4269)
+                        }
+                        else if ( keystroke == 27 /*ESC*/ )
+                        {
+                                button = this.getButton( 'cancel' );
+
+                                // If there's a Cancel button, click it, else just fire the cancel event and hide the dialog.
+                                if ( button )
+                                        CKEDITOR.tools.setTimeout( button.click, 0, button );
+                                else
+                                {
+                                        if ( this.fire( 'cancel', { hide : true } ).hide !== false )
+                                                this.hide();
+                                }
+                                stopPropagation = 1; // Always block the propagation (#4269)
+                        }
+                        else
+                                return;
+
+                        keypressHandler( evt );
+                }
+
+                function keypressHandler( evt )
+                {
                         if ( processed )
-                        {
-                                evt.stop();
-                                evt.data.preventDefault();
-                        }
-                }
-
-                function focusKeyPressHandler( evt )
-                {
-                        processed && evt.data.preventDefault();
+                                evt.data.preventDefault(1);
+                        else if ( stopPropagation ) 
+                                evt.data.stopPropagation();
                 }
 
@@ -468 +498 @@
                 this.on( 'show', function()
                         {
-                                dialogElement.on( 'keydown', focusKeydownHandler, this, null, 0 );
+                                dialogElement.on( 'keydown', keydownHandler, this );
+
                                 // Some browsers instead, don't cancel key events in the keydown, but in the
-                                // keypress. So we must do a longer trip in those cases. (#4531)
-                                if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )
-                                        dialogElement.on( 'keypress', focusKeyPressHandler, this );
+                                // keypress. So we must do a longer trip in those cases. (#4531,#8985)
+                                if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )
+                                        dialogElement.on( 'keypress', keypressHandler, this );
 
                         } );
                 this.on( 'hide', function()
                         {
-                                dialogElement.removeListener( 'keydown', focusKeydownHandler );
-                                if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )
-                                        dialogElement.removeListener( 'keypress', focusKeyPressHandler );
+                                dialogElement.removeListener( 'keydown', keydownHandler );
+                                if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )
+                                        dialogElement.removeListener( 'keypress', keypressHandler );
 
                                 // Reset fields state when closing dialog.
@@ -487 +518 @@
                         {
                                 var doc = new CKEDITOR.dom.document( evt.data.iframe.$.contentWindow.document );
-                                doc.on( 'keydown', focusKeydownHandler, this, null, 0 );
+                                doc.on( 'keydown', keydownHandler, this, null, 0 );
                         } );
 
@@ -816 +847 @@
                         element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );
 
-                        // Prevent some keys from bubbling up. (#4269)
-                        for ( var event in { keyup :1, keydown :1, keypress :1 } )
-                                element.on( event, preventKeyBubbling );
-
-                        // Register the Esc hotkeys.
-                        registerAccessKey( this, this, '\x1b', null, function()
-                                        {
-                                                var button = this.getButton( 'cancel' );
-                                                // If there's a Cancel button, click it, else just fire the cancel event and hide the dialog
-                                                if ( button )
-                                                        button.click();
-                                                else
-                                                {
-                                                        if ( this.fire( 'cancel', { hide : true } ).hide !== false )
-                                                                this.hide();
-                                                }
-                                        } );
-
                         // Reset the hasFocus state.
                         this._.hasFocus = false;
@@ -979 +992 @@
                                 element.removeListener( 'keydown', accessKeyDownHandler );
                                 element.removeListener( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );
-
-                                // Remove bubbling-prevention handler. (#4269)
-                                for ( var event in { keyup :1, keydown :1, keypress :1 } )
-                                        element.removeListener( event, preventKeyBubbling );
 
                                 var editor = this._.editor;
@@ -2200 +2209 @@
         };
 
-        // ESC, ENTER
-        var preventKeyBubblingKeys = { 27 :1, 13 :1 };
-        var preventKeyBubbling = function( e )
-        {
-                if ( e.data.getKeystroke() in preventKeyBubblingKeys )
-                        e.data.stopPropagation();
-        };
-
         (function()
         {

CKEditor/trunk/_source/plugins/dialogui/plugin.js

@@ -241 +241 @@
                                         attributes.style = elementDefinition.inputStyle;
 
-                                // If user presses Enter in a text box, it implies clicking OK for the dialog.
-                                var me = this, keyPressedOnMe = false;
-                                dialog.on( 'load', function()
-                                        {
-                                                me.getInputElement().on( 'keydown', function( evt )
-                                                        {
-                                                                if ( evt.data.getKeystroke() == 13 )
-                                                                        keyPressedOnMe = true;
-                                                        } );
-
-                                                // Lower the priority this 'keyup' since 'ok' will close the dialog.(#3749)
-                                                me.getInputElement().on( 'keyup', function( evt )
-                                                        {
-                                                                if ( evt.data.getKeystroke() == 13 && keyPressedOnMe )
-                                                                {
-                                                                        dialog.getButton( 'ok' ) && setTimeout( function ()
-                                                                        {
-                                                                                dialog.getButton( 'ok' ).click();
-                                                                        }, 0 );
-                                                                        keyPressedOnMe = false;
-                                                                }
-                                                        }, null, null, 1000 );
-                                        } );
-
                                 /** @ignore */
                                 var innerHTML = function()