JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.6.6.1
[ckeditor.git] / _source / plugins / dialog / plugin.js
index ce28799..434a55b 100644 (file)
@@ -1,5 +1,5 @@
 /*\r
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
 For licensing, see LICENSE.html or http://ckeditor.com/license\r
 */\r
 \r
@@ -93,6 +93,36 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                }\r
        }\r
 \r
+       // Handle dialog element validation state UI changes.\r
+       function handleFieldValidated( isValid, msg )\r
+       {\r
+               var input = this.getInputElement();\r
+               if ( input )\r
+               {\r
+                       isValid ? input.removeAttribute( 'aria-invalid' )\r
+                               : input.setAttribute( 'aria-invalid', true );\r
+               }\r
+\r
+               if ( !isValid )\r
+               {\r
+                       if ( this.select )\r
+                               this.select();\r
+                       else\r
+                               this.focus();\r
+               }\r
+\r
+               msg && alert( msg );\r
+\r
+               this.fire( 'validated', { valid : isValid, msg : msg } );\r
+       }\r
+\r
+       function resetField()\r
+       {\r
+               var input = this.getInputElement();\r
+               input && input.removeAttribute( 'aria-invalid' );\r
+       }\r
+\r
+\r
        /**\r
         * This is the base class for runtime dialog objects. An instance of this\r
         * class represents a single named dialog for a single editor instance.\r
@@ -108,7 +138,10 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
                        defaultDefinition = CKEDITOR.tools.clone( defaultDialogDefinition ),\r
                        buttonsOrder = editor.config.dialog_buttonsOrder || 'OS',\r
-                       dir = editor.lang.dir;\r
+                       dir = editor.lang.dir,\r
+                       tabsToRemove = {},\r
+                       i,\r
+                       processed, stopPropagation;\r
 \r
                        if ( ( buttonsOrder == 'OS' && CKEDITOR.env.mac ) ||    // The buttons in MacOS Apps are in reverse order (#4750)\r
                                ( buttonsOrder == 'rtl' && dir == 'ltr' ) ||\r
@@ -189,7 +222,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        }\r
                        , editor ).definition;\r
 \r
-               var tabsToRemove = {};\r
                // Cache tabs that should be removed.\r
                if ( !( 'removeDialogTabs' in editor._ ) && editor.config.removeDialogTabs )\r
                {\r
@@ -273,25 +305,17 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                        {\r
                                                if ( item.validate )\r
                                                {\r
-                                                       var isValid = item.validate( this );\r
-\r
-                                                       if ( typeof isValid == 'string' )\r
-                                                       {\r
-                                                               alert( isValid );\r
-                                                               isValid = false;\r
-                                                       }\r
+                                                       var retval = item.validate( this ),\r
+                                                               invalid = typeof ( retval ) == 'string' || retval === false;\r
 \r
-                                                       if ( isValid === false )\r
+                                                       if ( invalid )\r
                                                        {\r
-                                                               if ( item.select )\r
-                                                                       item.select();\r
-                                                               else\r
-                                                                       item.focus();\r
-\r
                                                                evt.data.hide = false;\r
                                                                evt.stop();\r
-                                                               return true;\r
                                                        }\r
+\r
+                                                       handleFieldValidated.call( item, !invalid, typeof retval == 'string' ? retval : undefined );\r
+                                                       return invalid;\r
                                                }\r
                                        });\r
                        }, this, null, 0 );\r
@@ -336,10 +360,11 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                focusList[ i ].focusIndex = i;\r
                }\r
 \r
-               function changeFocus( forward )\r
+               function changeFocus( offset )\r
                {\r
-                       var focusList = me._.focusList,\r
-                               offset = forward ? 1 : -1;\r
+                       var focusList = me._.focusList;\r
+                       offset = offset || 0;\r
+\r
                        if ( focusList.length < 1 )\r
                                return;\r
 \r
@@ -355,12 +380,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                        var startIndex = ( current + offset + focusList.length ) % focusList.length,\r
                                currentIndex = startIndex;\r
-                       while ( !focusList[ currentIndex ].isFocusable() )\r
+                       while ( offset && !focusList[ currentIndex ].isFocusable() )\r
                        {\r
                                currentIndex = ( currentIndex + offset + focusList.length ) % focusList.length;\r
                                if ( currentIndex == startIndex )\r
                                        break;\r
                        }\r
+\r
                        focusList[ currentIndex ].focus();\r
 \r
                        // Select whole field content.\r
@@ -370,18 +396,19 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                this.changeFocus = changeFocus;\r
 \r
-               var processed;\r
 \r
-               function focusKeydownHandler( evt )\r
+               function keydownHandler( evt )\r
                {\r
                        // If I'm not the top dialog, ignore.\r
                        if ( me != CKEDITOR.dialog._.currentTop )\r
                                return;\r
 \r
                        var keystroke = evt.data.getKeystroke(),\r
-                               rtl = editor.lang.dir == 'rtl';\r
+                               rtl = editor.lang.dir == 'rtl',\r
+                               button;\r
+\r
+                       processed = stopPropagation = 0;\r
 \r
-                       processed = 0;\r
                        if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )\r
                        {\r
                                var shiftPressed = ( keystroke == CKEDITOR.SHIFT + 9 );\r
@@ -397,7 +424,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                else\r
                                {\r
                                        // Change the focus of inputs.\r
-                                       changeFocus( !shiftPressed );\r
+                                       changeFocus( shiftPressed ? -1 : 1 );\r
                                }\r
 \r
                                processed = 1;\r
@@ -422,43 +449,75 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                this.selectPage( this._.currentTabId );\r
                                this._.tabBarMode = false;\r
                                this._.currentFocusIndex = -1;\r
-                               changeFocus( true );\r
+                               changeFocus( 1 );\r
                                processed = 1;\r
                        }\r
-\r
-                       if ( processed )\r
+                       // If user presses enter key in a text box, it implies clicking OK for the dialog.\r
+                       else if ( keystroke == 13 /*ENTER*/ )\r
                        {\r
-                               evt.stop();\r
-                               evt.data.preventDefault();\r
+                               // Don't do that for a target that handles ENTER.\r
+                               var target = evt.data.getTarget();\r
+                               if ( !target.is( 'a', 'button', 'select', 'textarea' ) && ( !target.is( 'input' ) || target.$.type != 'button' ) )\r
+                               {\r
+                                       button = this.getButton( 'ok' );\r
+                                       button && CKEDITOR.tools.setTimeout( button.click, 0, button );\r
+                                       processed = 1;\r
+                               }\r
+                               stopPropagation = 1; // Always block the propagation (#4269)\r
                        }\r
+                       else if ( keystroke == 27 /*ESC*/ )\r
+                       {\r
+                               button = this.getButton( 'cancel' );\r
+\r
+                               // If there's a Cancel button, click it, else just fire the cancel event and hide the dialog.\r
+                               if ( button )\r
+                                       CKEDITOR.tools.setTimeout( button.click, 0, button );\r
+                               else\r
+                               {\r
+                                       if ( this.fire( 'cancel', { hide : true } ).hide !== false )\r
+                                               this.hide();\r
+                               }\r
+                               stopPropagation = 1; // Always block the propagation (#4269)\r
+                       }\r
+                       else\r
+                               return;\r
+\r
+                       keypressHandler( evt );\r
                }\r
 \r
-               function focusKeyPressHandler( evt )\r
+               function keypressHandler( evt )\r
                {\r
-                       processed && evt.data.preventDefault();\r
+                       if ( processed )\r
+                               evt.data.preventDefault(1);\r
+                       else if ( stopPropagation )\r
+                               evt.data.stopPropagation();\r
                }\r
 \r
                var dialogElement = this._.element;\r
                // Add the dialog keyboard handlers.\r
                this.on( 'show', function()\r
                        {\r
-                               dialogElement.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
+                               dialogElement.on( 'keydown', keydownHandler, this );\r
+\r
                                // Some browsers instead, don't cancel key events in the keydown, but in the\r
-                               // keypress. So we must do a longer trip in those cases. (#4531)\r
-                               if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
-                                       dialogElement.on( 'keypress', focusKeyPressHandler, this );\r
+                               // keypress. So we must do a longer trip in those cases. (#4531,#8985)\r
+                               if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )\r
+                                       dialogElement.on( 'keypress', keypressHandler, this );\r
 \r
                        } );\r
                this.on( 'hide', function()\r
                        {\r
-                               dialogElement.removeListener( 'keydown', focusKeydownHandler );\r
-                               if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
-                                       dialogElement.removeListener( 'keypress', focusKeyPressHandler );\r
+                               dialogElement.removeListener( 'keydown', keydownHandler );\r
+                               if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )\r
+                                       dialogElement.removeListener( 'keypress', keypressHandler );\r
+\r
+                               // Reset fields state when closing dialog.\r
+                               iterContents( function( item ) { resetField.apply( item ); } );\r
                        } );\r
                this.on( 'iframeAdded', function( evt )\r
                        {\r
                                var doc = new CKEDITOR.dom.document( evt.data.iframe.$.contentWindow.document );\r
-                               doc.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
+                               doc.on( 'keydown', keydownHandler, this, null, 0 );\r
                        } );\r
 \r
                // Auto-focus logic in dialog.\r
@@ -487,7 +546,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                        }\r
                                        // Focus the first field in layout order.\r
                                        else\r
-                                               changeFocus( true );\r
+                                               changeFocus( 1 );\r
 \r
                                        /*\r
                                         * IE BUG: If the initial focus went into a non-text element (e.g. button),\r
@@ -533,7 +592,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                ( new CKEDITOR.dom.text( definition.title, CKEDITOR.document ) ).appendTo( this.parts.title );\r
 \r
                // Insert the tabs and contents.\r
-               for ( var i = 0 ; i < definition.contents.length ; i++ )\r
+               for ( i = 0 ; i < definition.contents.length ; i++ )\r
                {\r
                        var page = definition.contents[i];\r
                        page && this.addPage( page );\r
@@ -553,7 +612,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                                {\r
                                                        this._.tabBarMode = false;\r
                                                        this._.currentFocusIndex = -1;\r
-                                                       changeFocus( true );\r
+                                                       changeFocus( 1 );\r
                                                }\r
                                                evt.data.preventDefault();\r
                                        }\r
@@ -606,6 +665,15 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        } );\r
        }\r
 \r
+       // Re-layout the dialog on window resize.\r
+       function resizeWithWindow( dialog )\r
+       {\r
+               var win = CKEDITOR.document.getWindow();\r
+               function resizeHandler() { dialog.layout(); }\r
+               win.on( 'resize', resizeHandler );\r
+               dialog.on( 'hide', function() { win.removeListener( 'resize', resizeHandler ); } );\r
+       }\r
+\r
        CKEDITOR.dialog.prototype =\r
        {\r
                destroy : function()\r
@@ -674,49 +742,54 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 * @example\r
                 * dialogObj.move( 10, 40 );\r
                 */\r
-               move : (function()\r
-               {\r
-                       var isFixed;\r
-                       return function( x, y, save )\r
-                       {\r
-                               // The dialog may be fixed positioned or absolute positioned. Ask the\r
-                               // browser what is the current situation first.\r
-                               var element = this._.element.getFirst(),\r
-                                       rtl = this._.editor.lang.dir == 'rtl';\r
-\r
-                               if ( isFixed === undefined )\r
-                                       isFixed = element.getComputedStyle( 'position' ) == 'fixed';\r
-\r
-                               if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )\r
-                                       return;\r
+               move : function( x, y, save )\r
+               {\r
+                       // The dialog may be fixed positioned or absolute positioned. Ask the\r
+                       // browser what is the current situation first.\r
+                       var element = this._.element.getFirst(),\r
+                               rtl = this._.editor.lang.dir == 'rtl';\r
+\r
+                       var isFixed = element.getComputedStyle( 'position' ) == 'fixed';\r
+\r
+                       // (#8888) In some cases of a very small viewport, dialog is incorrectly\r
+                       // positioned in IE7. It also happens that it remains sticky and user cannot\r
+                       // scroll down/up to reveal dialog's content below/above the viewport; this is\r
+                       // cumbersome.\r
+                       // The only way to fix this is to move mouse out of the browser and\r
+                       // go back to see that dialog position is automagically fixed. No events,\r
+                       // no style change - pure magic. This is a IE7 rendering issue, which can be\r
+                       // fixed with dummy style redraw on each move.\r
+                       element.setStyle( 'zoom', '100%' );\r
+\r
+                       if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )\r
+                               return;\r
 \r
-                               // Save the current position.\r
-                               this._.position = { x : x, y : y };\r
+                       // Save the current position.\r
+                       this._.position = { x : x, y : y };\r
 \r
-                               // If not fixed positioned, add scroll position to the coordinates.\r
-                               if ( !isFixed )\r
-                               {\r
-                                       var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();\r
-                                       x += scrollPosition.x;\r
-                                       y += scrollPosition.y;\r
-                               }\r
+                       // If not fixed positioned, add scroll position to the coordinates.\r
+                       if ( !isFixed )\r
+                       {\r
+                               var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();\r
+                               x += scrollPosition.x;\r
+                               y += scrollPosition.y;\r
+                       }\r
 \r
-                               // Translate coordinate for RTL.\r
-                               if ( rtl )\r
-                               {\r
-                                       var dialogSize = this.getSize(),\r
-                                               viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
-                                       x = viewPaneSize.width - dialogSize.width - x;\r
-                               }\r
+                       // Translate coordinate for RTL.\r
+                       if ( rtl )\r
+                       {\r
+                               var dialogSize = this.getSize(),\r
+                                       viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
+                               x = viewPaneSize.width - dialogSize.width - x;\r
+                       }\r
 \r
-                               var styles = { 'top'    : ( y > 0 ? y : 0 ) + 'px' };\r
-                               styles[ rtl ? 'right' : 'left' ] = ( x > 0 ? x : 0 ) + 'px';\r
+                       var styles = { 'top'    : ( y > 0 ? y : 0 ) + 'px' };\r
+                       styles[ rtl ? 'right' : 'left' ] = ( x > 0 ? x : 0 ) + 'px';\r
 \r
-                               element.setStyles( styles );\r
+                       element.setStyles( styles );\r
 \r
-                               save && ( this._.moved = 1 );\r
-                       };\r
-               })(),\r
+                       save && ( this._.moved = 1 );\r
+               },\r
 \r
                /**\r
                 * Gets the dialog's position in the window.\r
@@ -769,19 +842,12 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        this._.element.getFirst().setStyle( 'z-index', CKEDITOR.dialog._.currentZIndex += 10 );\r
 \r
                        // Maintain the dialog ordering and dialog cover.\r
-                       // Also register key handlers if first dialog.\r
                        if ( CKEDITOR.dialog._.currentTop === null )\r
                        {\r
                                CKEDITOR.dialog._.currentTop = this;\r
                                this._.parentDialog = null;\r
                                showCover( this._.editor );\r
 \r
-                               element.on( 'keydown', accessKeyDownHandler );\r
-                               element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );\r
-\r
-                               // Prevent some keys from bubbling up. (#4269)\r
-                               for ( var event in { keyup :1, keydown :1, keypress :1 } )\r
-                                       element.on( event, preventKeyBubbling );\r
                        }\r
                        else\r
                        {\r
@@ -791,11 +857,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                CKEDITOR.dialog._.currentTop = this;\r
                        }\r
 \r
-                       // Register the Esc hotkeys.\r
-                       registerAccessKey( this, this, '\x1b', null, function()\r
-                                       {\r
-                                               this.getButton( 'cancel' ) && this.getButton( 'cancel' ).click();\r
-                                       } );\r
+                       element.on( 'keydown', accessKeyDownHandler );\r
+                       element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );\r
 \r
                        // Reset the hasFocus state.\r
                        this._.hasFocus = false;\r
@@ -803,6 +866,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        CKEDITOR.tools.setTimeout( function()\r
                                {\r
                                        this.layout();\r
+                                       resizeWithWindow( this );\r
+\r
                                        this.parts.dialog.setStyle( 'visibility', '' );\r
 \r
                                        // Execute onLoad for the first show.\r
@@ -825,11 +890,26 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 */\r
                layout : function()\r
                {\r
-                       var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
-                                       dialogSize = this.getSize();\r
+                       var el = this.parts.dialog;\r
+                       var dialogSize = this.getSize();\r
+                       var win = CKEDITOR.document.getWindow(),\r
+                                       viewSize = win.getViewPaneSize();\r
+\r
+                       var posX = ( viewSize.width - dialogSize.width ) / 2,\r
+                               posY = ( viewSize.height - dialogSize.height ) / 2;\r
+\r
+                       // Switch to absolute position when viewport is smaller than dialog size.\r
+                       if ( !CKEDITOR.env.ie6Compat )\r
+                       {\r
+                               if ( dialogSize.height + ( posY > 0 ? posY : 0 ) > viewSize.height ||\r
+                                                dialogSize.width + ( posX > 0 ? posX : 0 ) > viewSize.width )\r
+                                       el.setStyle( 'position', 'absolute' );\r
+                               else\r
+                                       el.setStyle( 'position', 'fixed' );\r
+                       }\r
 \r
-                       this.move( this._.moved ? this._.position.x : ( viewSize.width - dialogSize.width ) / 2,\r
-                                       this._.moved ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2 );\r
+                       this.move( this._.moved ? this._.position.x : posX,\r
+                                       this._.moved ? this._.position.y : posY );\r
                },\r
 \r
                /**\r
@@ -842,7 +922,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        for ( var i in this._.contents )\r
                        {\r
                                for ( var j in this._.contents[i] )\r
-                                       fn( this._.contents[i][j] );\r
+                                       fn.call( this, this._.contents[i][j] );\r
                        }\r
                        return this;\r
                },\r
@@ -859,6 +939,16 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        return function(){ this.foreach( fn ); return this; };\r
                })(),\r
 \r
+\r
+               /**\r
+                * Calls the {@link CKEDITOR.dialog.definition.uiElement#setup} method of each of the UI elements, with the arguments passed through it.\r
+                * It is usually being called when the dialog is opened, to put the initial value inside the field.\r
+                * @example\r
+                * dialogObj.setupContent();\r
+                * @example\r
+                * var timestamp = ( new Date() ).valueOf();\r
+                * dialogObj.setupContent( timestamp );\r
+                */\r
                setupContent : function()\r
                {\r
                        var args = arguments;\r
@@ -869,11 +959,24 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                });\r
                },\r
 \r
+               /**\r
+                * Calls the {@link CKEDITOR.dialog.definition.uiElement#commit} method of each of the UI elements, with the arguments passed through it.\r
+                * It is usually being called when the user confirms the dialog, to process the values.\r
+                * @example\r
+                * dialogObj.commitContent();\r
+                * @example\r
+                * var timestamp = ( new Date() ).valueOf();\r
+                * dialogObj.commitContent( timestamp );\r
+                */\r
                commitContent : function()\r
                {\r
                        var args = arguments;\r
                        this.foreach( function( widget )\r
                                {\r
+                                       // Make sure IE triggers "change" event on last focused input before closing the dialog. (#7915)\r
+                                       if ( CKEDITOR.env.ie && this._.currentFocusIndex == widget.focusIndex )\r
+                                               widget.getInputElement().$.blur();\r
+\r
                                        if ( widget.commit )\r
                                                widget.commit.apply( widget, args );\r
                                });\r
@@ -891,6 +994,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                        this.fire( 'hide', {} );\r
                        this._.editor.fire( 'dialogHide', this );\r
+                       // Reset the tab page.\r
+                       this.selectPage( this._.tabIdList[ 0 ] );\r
                        var element = this._.element;\r
                        element.setStyle( 'display', 'none' );\r
                        this.parts.dialog.setStyle( 'visibility', 'hidden' );\r
@@ -920,10 +1025,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                element.removeListener( 'keydown', accessKeyDownHandler );\r
                                element.removeListener( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );\r
 \r
-                               // Remove bubbling-prevention handler. (#4269)\r
-                               for ( var event in { keyup :1, keydown :1, keypress :1 } )\r
-                                       element.removeListener( event, preventKeyBubbling );\r
-\r
                                var editor = this._.editor;\r
                                editor.focus();\r
 \r
@@ -1139,6 +1240,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 * @param {String} pageId id of dialog page.\r
                 * @param {String} elementId id of UI element.\r
                 * @example\r
+                * dialogObj.getContentElement( 'tabId', 'elementId' ).setValue( 'Example' );\r
                 * @returns {CKEDITOR.ui.dialog.uiElement} The dialog UI element.\r
                 */\r
                getContentElement : function( pageId, elementId )\r
@@ -1152,6 +1254,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 * @param {String} pageId id of dialog page.\r
                 * @param {String} elementId id of UI element.\r
                 * @example\r
+                * alert( dialogObj.getValueOf( 'tabId', 'elementId' ) );\r
                 * @returns {Object} The value of the UI element.\r
                 */\r
                getValueOf : function( pageId, elementId )\r
@@ -1165,6 +1268,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 * @param {String} elementId id of the UI element.\r
                 * @param {Object} value The new value of the UI element.\r
                 * @example\r
+                * dialogObj.setValueOf( 'tabId', 'elementId', 'Example' );\r
                 */\r
                setValueOf : function( pageId, elementId, value )\r
                {\r
@@ -1905,6 +2009,11 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
        var covers = {},\r
                currentCover;\r
 \r
+       function cancelEvent( ev )\r
+       {\r
+               ev.data.preventDefault(1);\r
+       }\r
+\r
        function showCover( editor )\r
        {\r
                var win = CKEDITOR.document.getWindow();\r
@@ -1965,6 +2074,10 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        coverElement = CKEDITOR.dom.element.createFromHtml( html.join( '' ) );\r
                        coverElement.setOpacity( backgroundCoverOpacity != undefined ? backgroundCoverOpacity : 0.5 );\r
 \r
+                       coverElement.on( 'keydown', cancelEvent );\r
+                       coverElement.on( 'keypress', cancelEvent );\r
+                       coverElement.on( 'keyup', cancelEvent );\r
+\r
                        coverElement.appendTo( CKEDITOR.document.getBody() );\r
                        covers[ coverKey ] = coverElement;\r
                }\r
@@ -2128,14 +2241,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
        {\r
        };\r
 \r
-       // ESC, ENTER\r
-       var preventKeyBubblingKeys = { 27 :1, 13 :1 };\r
-       var preventKeyBubbling = function( e )\r
-       {\r
-               if ( e.data.getKeystroke() in preventKeyBubblingKeys )\r
-                       e.data.stopPropagation();\r
-       };\r
-\r
        (function()\r
        {\r
                CKEDITOR.ui.dialog =\r
@@ -2210,6 +2315,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                        classes[ 'cke_dialog_ui_' + elementDefinition.type ] = 1;\r
                                if ( elementDefinition.className )\r
                                        classes[ elementDefinition.className ] = 1;\r
+                               if ( elementDefinition.disabled )\r
+                                       classes[ 'cke_disabled' ] = 1;\r
+\r
                                var attributeClasses = ( attributes['class'] && attributes['class'].split ) ? attributes['class'].split( ' ' ) : [];\r
                                for ( i = 0 ; i < attributeClasses.length ; i++ )\r
                                {\r
@@ -2227,6 +2335,15 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                                // Write the inline CSS styles.\r
                                var styleStr = ( elementDefinition.style || '' ).split( ';' );\r
+\r
+                               // Element alignment support.\r
+                               if ( elementDefinition.align )\r
+                               {\r
+                                       var align = elementDefinition.align;\r
+                                       styles[ 'margin-left' ] = align == 'left' ? 0 : 'auto';\r
+                                       styles[ 'margin-right' ] = align == 'right' ? 0 : 'auto';\r
+                               }\r
+\r
                                for ( i in styles )\r
                                        styleStr.push( i + ':' + styles[i] );\r
                                if ( elementDefinition.hidden )\r
@@ -2257,6 +2374,23 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                if ( typeof( elementDefinition.isChanged ) == 'function' )\r
                                        this.isChanged = elementDefinition.isChanged;\r
 \r
+                               // Overload 'get(set)Value' on definition.\r
+                               if ( typeof( elementDefinition.setValue ) == 'function' )\r
+                               {\r
+                                               this.setValue = CKEDITOR.tools.override( this.setValue, function( org )\r
+                                               {\r
+                                                               return function( val ){ org.call( this, elementDefinition.setValue.call( this, val ) ); };\r
+                                               } );\r
+                               }\r
+\r
+                               if ( typeof( elementDefinition.getValue ) == 'function' )\r
+                               {\r
+                                               this.getValue = CKEDITOR.tools.override( this.getValue, function( org )\r
+                                               {\r
+                                                               return function(){ return  elementDefinition.getValue.call( this, org.call( this ) ); };\r
+                                               } );\r
+                               }\r
+\r
                                // Add events.\r
                                CKEDITOR.event.implementOn( this );\r
 \r
@@ -2267,14 +2401,24 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                var me = this;\r
                                dialog.on( 'load', function()\r
                                        {\r
-                                               if ( me.getInputElement() )\r
+                                               var input = me.getInputElement();\r
+                                               if ( input )\r
                                                {\r
-                                                       me.getInputElement().on( 'focus', function()\r
+                                                       var focusClass = me.type in { 'checkbox' : 1, 'ratio' : 1 } && CKEDITOR.env.ie && CKEDITOR.env.version < 8 ? 'cke_dialog_ui_focused' : '';\r
+                                                       input.on( 'focus', function()\r
                                                                {\r
                                                                        dialog._.tabBarMode = false;\r
                                                                        dialog._.hasFocus = true;\r
                                                                        me.fire( 'focus' );\r
-                                                               }, me );\r
+                                                                       focusClass && this.addClass( focusClass );\r
+\r
+                                                               });\r
+\r
+                                                       input.on( 'blur', function()\r
+                                                               {\r
+                                                                       me.fire( 'blur' );\r
+                                                                       focusClass && this.removeClass( focusClass );\r
+                                                               });\r
                                                }\r
                                        } );\r
 \r
@@ -2357,6 +2501,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                                        styles.push( 'height:' + cssLength( height ) );\r
                                                if ( elementDefinition && elementDefinition.padding != undefined )\r
                                                        styles.push( 'padding:' + cssLength( elementDefinition.padding ) );\r
+                                               // In IE Quirks alignment has to be done on table cells. (#7324)\r
+                                               if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && children[ i ].align )\r
+                                                       styles.push( 'text-align:' + children[ i ].align );\r
                                                if ( styles.length > 0 )\r
                                                        html.push( 'style="' + styles.join('; ') + '" ' );\r
                                                html.push( '>', childHtmlList[i], '</td>' );\r
@@ -2442,6 +2589,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                                        styles.push( 'height:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
                                                if ( elementDefinition && elementDefinition.padding != undefined )\r
                                                        styles.push( 'padding:' + cssLength( elementDefinition.padding ) );\r
+                                               // In IE Quirks alignment has to be done on table cells. (#7324)\r
+                                               if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && children[ i ].align )\r
+                                                       styles.push( 'text-align:' + children[ i ].align );\r
                                                if ( styles.length > 0 )\r
                                                        html.push( 'style="', styles.join( '; ' ), '" ' );\r
                                                html.push( ' class="cke_dialog_ui_vbox_child">', childHtmlList[i], '</td></tr>' );\r
@@ -2694,8 +2844,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 */\r
                disable : function()\r
                {\r
-                       var element = this.getInputElement();\r
-                       element.setAttribute( 'disabled', 'true' );\r
+                       var element = this.getElement(),\r
+                               input = this.getInputElement();\r
+                       input.setAttribute( 'disabled', 'true' );\r
                        element.addClass( 'cke_disabled' );\r
                },\r
 \r
@@ -2705,8 +2856,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 */\r
                enable : function()\r
                {\r
-                       var element = this.getInputElement();\r
-                       element.removeAttribute( 'disabled' );\r
+                       var element = this.getElement(),\r
+                               input = this.getInputElement();\r
+                       input.removeAttribute( 'disabled' );\r
                        element.removeClass( 'cke_disabled' );\r
                },\r
 \r
@@ -2717,7 +2869,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 */\r
                isEnabled : function()\r
                {\r
-                       return !this.getInputElement().getAttribute( 'disabled' );\r
+                       return !this.getElement().hasClass( 'cke_disabled' );\r
                },\r
 \r
                /**\r
@@ -2826,7 +2978,10 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                /** @ignore */\r
                exec : function( editor )\r
                {\r
-                       editor.openDialog( this.dialogName );\r
+                       // Special treatment for Opera. (#8031)\r
+                       CKEDITOR.env.opera ?\r
+                               CKEDITOR.tools.setTimeout( function() { editor.openDialog( this.dialogName ); }, 0, this )\r
+                               : editor.openDialog( this.dialogName );\r
                },\r
 \r
                // Dialog commands just open a dialog ui, thus require no undo logic,\r
@@ -2840,7 +2995,10 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
        {\r
                var notEmptyRegex = /^([a]|[^a])+$/,\r
                        integerRegex = /^\d*$/,\r
-                       numberRegex = /^\d*(?:\.\d+)?$/;\r
+                       numberRegex = /^\d*(?:\.\d+)?$/,\r
+                       htmlLengthRegex = /^(((\d*(\.\d+))|(\d*))(px|\%)?)?$/,\r
+                       cssLengthRegex = /^(((\d*(\.\d+))|(\d*))(px|em|ex|in|cm|mm|pt|pc|\%)?)?$/i,\r
+                       inlineStyleRegex = /^(\s*[\w-]+\s*:\s*[^:;]+(?:;|$))*$/;\r
 \r
                CKEDITOR.VALIDATE_OR = 1;\r
                CKEDITOR.VALIDATE_AND = 2;\r
@@ -2849,6 +3007,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                {\r
                        functions : function()\r
                        {\r
+                               var args = arguments;\r
                                return function()\r
                                {\r
                                        /**\r
@@ -2857,28 +3016,28 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                         * combine validate functions together to make more sophisticated\r
                                         * validators.\r
                                         */\r
-                                       var value = this && this.getValue ? this.getValue() : arguments[0];\r
+                                       var value = this && this.getValue ? this.getValue() : args[ 0 ];\r
 \r
                                        var msg = undefined,\r
                                                relation = CKEDITOR.VALIDATE_AND,\r
                                                functions = [], i;\r
 \r
-                                       for ( i = 0 ; i < arguments.length ; i++ )\r
+                                       for ( i = 0 ; i < args.length ; i++ )\r
                                        {\r
-                                               if ( typeof( arguments[i] ) == 'function' )\r
-                                                       functions.push( arguments[i] );\r
+                                               if ( typeof( args[i] ) == 'function' )\r
+                                                       functions.push( args[i] );\r
                                                else\r
                                                        break;\r
                                        }\r
 \r
-                                       if ( i < arguments.length && typeof( arguments[i] ) == 'string' )\r
+                                       if ( i < args.length && typeof( args[i] ) == 'string' )\r
                                        {\r
-                                               msg = arguments[i];\r
+                                               msg = args[i];\r
                                                i++;\r
                                        }\r
 \r
-                                       if ( i < arguments.length && typeof( arguments[i]) == 'number' )\r
-                                               relation = arguments[i];\r
+                                       if ( i < args.length && typeof( args[i]) == 'number' )\r
+                                               relation = args[i];\r
 \r
                                        var passed = ( relation == CKEDITOR.VALIDATE_AND ? true : false );\r
                                        for ( i = 0 ; i < functions.length ; i++ )\r
@@ -2889,16 +3048,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                                        passed = passed || functions[i]( value );\r
                                        }\r
 \r
-                                       if ( !passed )\r
-                                       {\r
-                                               if ( msg !== undefined )\r
-                                                       alert( msg );\r
-                                               if ( this && ( this.select || this.focus ) )\r
-                                                       ( this.select || this.focus )();\r
-                                               return false;\r
-                                       }\r
-\r
-                                       return true;\r
+                                       return !passed ? msg : true;\r
                                };\r
                        },\r
 \r
@@ -2911,20 +3061,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                return function()\r
                                {\r
                                        var value = this && this.getValue ? this.getValue() : arguments[0];\r
-                                       if ( !regex.test( value ) )\r
-                                       {\r
-                                               if ( msg !== undefined )\r
-                                                       alert( msg );\r
-                                               if ( this && ( this.select || this.focus ) )\r
-                                               {\r
-                                                       if ( this.select )\r
-                                                               this.select();\r
-                                                       else\r
-                                                               this.focus();\r
-                                               }\r
-                                               return false;\r
-                                       }\r
-                                       return true;\r
+                                       return !regex.test( value ) ? msg : true;\r
                                };\r
                        },\r
 \r
@@ -2943,6 +3080,21 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                return this.regex( numberRegex, msg );\r
                        },\r
 \r
+                       'cssLength' : function( msg )\r
+                       {\r
+                               return this.functions( function( val ){ return cssLengthRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );\r
+                       },\r
+\r
+                       'htmlLength' : function( msg )\r
+                       {\r
+                               return this.functions( function( val ){ return htmlLengthRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );\r
+                       },\r
+\r
+                       'inlineStyle' : function( msg )\r
+                       {\r
+                               return this.functions( function( val ){ return inlineStyleRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );\r
+                       },\r
+\r
                        equals : function( value, msg )\r
                        {\r
                                return this.functions( function( val ){ return val == value; }, msg );\r