JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.5.3
[ckeditor.git] / _source / plugins / dialog / plugin.js
index b5aab81..ce28799 100644 (file)
@@ -1,5 +1,5 @@
 /*\r
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
 For licensing, see LICENSE.html or http://ckeditor.com/license\r
 */\r
 \r
@@ -167,13 +167,15 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                // Set the startup styles for the dialog, avoiding it enlarging the\r
                // page size on the dialog creation.\r
-               this.parts.dialog.setStyles(\r
-                       {\r
+               var startStyles = {\r
                                position : CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed',\r
                                top : 0,\r
-                               left: 0,\r
                                visibility : 'hidden'\r
-                       });\r
+               };\r
+\r
+               startStyles[ dir == 'rtl' ? 'right' : 'left' ] = 0;\r
+               this.parts.dialog.setStyles( startStyles );\r
+\r
 \r
                // Call the CKEDITOR.event constructor to initialize this instance.\r
                CKEDITOR.event.call( this );\r
@@ -635,6 +637,18 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                                height : height\r
                                        }, this._.editor );\r
 \r
+                               this.fire( 'resize',\r
+                                       {\r
+                                               skin : this._.editor.skinName,\r
+                                               width : width,\r
+                                               height : height\r
+                                       }, this._.editor );\r
+\r
+                               // Update dialog position when dimension get changed in RTL.\r
+                               if ( this._.editor.lang.dir == 'rtl' && this._.position )\r
+                                       this._.position.x = CKEDITOR.document.getWindow().getViewPaneSize().width -\r
+                                               this._.contentSize.width - parseInt( this._.element.getFirst().getStyle( 'right' ), 10 );\r
+\r
                                this._.contentSize = { width : width, height : height };\r
                        };\r
                })(),\r
@@ -667,7 +681,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        {\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
+                               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
@@ -685,11 +701,18 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                        y += scrollPosition.y;\r
                                }\r
 \r
-                               element.setStyles(\r
-                                               {\r
-                                                       'left'  : ( x > 0 ? x : 0 ) + 'px',\r
-                                                       'top'   : ( y > 0 ? y : 0 ) + 'px'\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
+\r
+                               element.setStyles( styles );\r
 \r
                                save && ( this._.moved = 1 );\r
                        };\r
@@ -710,13 +733,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 */\r
                show : function()\r
                {\r
-                       var editor = this._.editor;\r
-                       if ( editor.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
-                       {\r
-                               var selection = editor.getSelection();\r
-                               selection && selection.lock();\r
-                       }\r
-\r
                        // Insert the dialog's element to the root document.\r
                        var element = this._.element;\r
                        var definition = this.definition;\r
@@ -738,8 +754,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
 \r
                        // First, set the dialog to an appropriate size.\r
-                       this.resize( this._.contentSize && this._.contentSize.width || definition.minWidth,\r
-                                       this._.contentSize && this._.contentSize.height || definition.minHeight );\r
+                       this.resize( this._.contentSize && this._.contentSize.width || definition.width || definition.minWidth,\r
+                                       this._.contentSize && this._.contentSize.height || definition.height || definition.minHeight );\r
 \r
                        // Reset all inputs back to their default value.\r
                        this.reset();\r
@@ -942,7 +958,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                                        children : contents.elements,\r
                                                        expand : !!contents.expand,\r
                                                        padding : contents.padding,\r
-                                                       style : contents.style || 'width: 100%;'\r
+                                                       style : contents.style || 'width: 100%;height:100%'\r
                                                }, pageHtml );\r
 \r
                        // Create the HTML for the tab and the content block.\r
@@ -1256,9 +1272,77 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                         * @param {Function|String} dialogDefinition\r
                         * A function returning the dialog's definition, or the URL to the .js file holding the function.\r
                         * The function should accept an argument "editor" which is the current editor instance, and\r
-                        * return an object conforming to {@link CKEDITOR.dialog.dialogDefinition}.\r
+                        * return an object conforming to {@link CKEDITOR.dialog.definition}.\r
+                        * @see CKEDITOR.dialog.definition\r
                         * @example\r
-                        * @see CKEDITOR.dialog.dialogDefinition\r
+                        * // Full sample plugin, which does not only register a dialog window but also adds an item to the context menu.\r
+                        * // To open the dialog window, choose "Open dialog" in the context menu.\r
+                        * CKEDITOR.plugins.add( 'myplugin',\r
+                        * {\r
+                        *      init: function( editor )\r
+                        *      {\r
+                        *              editor.addCommand( 'mydialog',new CKEDITOR.dialogCommand( 'mydialog' ) );\r
+                        *\r
+                        *              if ( editor.contextMenu )\r
+                        *              {\r
+                        *                      editor.addMenuGroup( 'mygroup', 10 );\r
+                        *                      editor.addMenuItem( 'My Dialog',\r
+                        *                      {\r
+                        *                              label : 'Open dialog',\r
+                        *                              command : 'mydialog',\r
+                        *                              group : 'mygroup'\r
+                        *                      });\r
+                        *                      editor.contextMenu.addListener( function( element )\r
+                        *                      {\r
+                        *                              return { 'My Dialog' : CKEDITOR.TRISTATE_OFF };\r
+                        *                      });\r
+                        *              }\r
+                        *\r
+                        *              <strong>CKEDITOR.dialog.add</strong>( 'mydialog', function( api )\r
+                        *              {\r
+                        *                      // CKEDITOR.dialog.definition\r
+                        *                      var <strong>dialogDefinition</strong> =\r
+                        *                      {\r
+                        *                              title : 'Sample dialog',\r
+                        *                              minWidth : 390,\r
+                        *                              minHeight : 130,\r
+                        *                              contents : [\r
+                        *                                      {\r
+                        *                                              id : 'tab1',\r
+                        *                                              label : 'Label',\r
+                        *                                              title : 'Title',\r
+                        *                                              expand : true,\r
+                        *                                              padding : 0,\r
+                        *                                              elements :\r
+                        *                                              [\r
+                        *                                                      {\r
+                        *                                                              type : 'html',\r
+                        *                                                              html : '&lt;p&gt;This is some sample HTML content.&lt;/p&gt;'\r
+                        *                                                      },\r
+                        *                                                      {\r
+                        *                                                              type : 'textarea',\r
+                        *                                                              id : 'textareaId',\r
+                        *                                                              rows : 4,\r
+                        *                                                              cols : 40\r
+                        *                                                      }\r
+                        *                                              ]\r
+                        *                                      }\r
+                        *                              ],\r
+                        *                              buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ],\r
+                        *                              onOk : function() {\r
+                        *                                      // "this" is now a CKEDITOR.dialog object.\r
+                        *                                      // Accessing dialog elements:\r
+                        *                                      var textareaObj = this.<strong>getContentElement</strong>( 'tab1', 'textareaId' );\r
+                        *                                      alert( "You have entered: " + textareaObj.getValue() );\r
+                        *                              }\r
+                        *                      };\r
+                        *\r
+                        *                      return dialogDefinition;\r
+                        *              } );\r
+                        *      }\r
+                        * } );\r
+                        *\r
+                        * CKEDITOR.replace( 'editor1', { extraPlugins : 'myplugin' } );\r
                         */\r
                        add : function( name, dialogDefinition )\r
                        {\r
@@ -1449,8 +1533,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
         * This class is not really part of the API. It is the "definition" property value\r
         * passed to "dialogDefinition" event handlers.\r
         * @constructor\r
-        * @name CKEDITOR.dialog.dialogDefinitionObject\r
-        * @extends CKEDITOR.dialog.dialogDefinition\r
+        * @name CKEDITOR.dialog.definitionObject\r
+        * @extends CKEDITOR.dialog.definition\r
         * @example\r
         * CKEDITOR.on( 'dialogDefinition', function( evt )\r
         *      {\r
@@ -1473,12 +1557,12 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
        };\r
 \r
        definitionObject.prototype =\r
-       /** @lends CKEDITOR.dialog.dialogDefinitionObject.prototype */\r
+       /** @lends CKEDITOR.dialog.definitionObject.prototype */\r
        {\r
                /**\r
                 * Gets a content definition.\r
                 * @param {String} id The id of the content definition.\r
-                * @returns {CKEDITOR.dialog.contentDefinition} The content definition\r
+                * @returns {CKEDITOR.dialog.definition.content} The content definition\r
                 *              matching id.\r
                 */\r
                getContents : function( id )\r
@@ -1489,7 +1573,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                /**\r
                 * Gets a button definition.\r
                 * @param {String} id The id of the button definition.\r
-                * @returns {CKEDITOR.dialog.buttonDefinition} The button definition\r
+                * @returns {CKEDITOR.dialog.definition.button} The button definition\r
                 *              matching id.\r
                 */\r
                getButton : function( id )\r
@@ -1499,13 +1583,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                /**\r
                 * Adds a content definition object under this dialog definition.\r
-                * @param {CKEDITOR.dialog.contentDefinition} contentDefinition The\r
+                * @param {CKEDITOR.dialog.definition.content} contentDefinition The\r
                 *              content definition.\r
                 * @param {String} [nextSiblingId] The id of an existing content\r
                 *              definition which the new content definition will be inserted\r
                 *              before. Omit if the new content definition is to be inserted as\r
                 *              the last item.\r
-                * @returns {CKEDITOR.dialog.contentDefinition} The inserted content\r
+                * @returns {CKEDITOR.dialog.definition.content} The inserted content\r
                 *              definition.\r
                 */\r
                addContents : function( contentDefinition, nextSiblingId )\r
@@ -1515,13 +1599,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                /**\r
                 * Adds a button definition object under this dialog definition.\r
-                * @param {CKEDITOR.dialog.buttonDefinition} buttonDefinition The\r
+                * @param {CKEDITOR.dialog.definition.button} buttonDefinition The\r
                 *              button definition.\r
                 * @param {String} [nextSiblingId] The id of an existing button\r
                 *              definition which the new button definition will be inserted\r
                 *              before. Omit if the new button definition is to be inserted as\r
                 *              the last item.\r
-                * @returns {CKEDITOR.dialog.buttonDefinition} The inserted button\r
+                * @returns {CKEDITOR.dialog.definition.button} The inserted button\r
                 *              definition.\r
                 */\r
                addButton : function( buttonDefinition, nextSiblingId )\r
@@ -1532,7 +1616,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                /**\r
                 * Removes a content definition from this dialog definition.\r
                 * @param {String} id The id of the content definition to be removed.\r
-                * @returns {CKEDITOR.dialog.contentDefinition} The removed content\r
+                * @returns {CKEDITOR.dialog.definition.content} The removed content\r
                 *              definition.\r
                 */\r
                removeContents : function( id )\r
@@ -1543,7 +1627,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                /**\r
                 * Removes a button definition from the dialog definition.\r
                 * @param {String} id The id of the button definition to be removed.\r
-                * @returns {CKEDITOR.dialog.buttonDefinition} The removed button\r
+                * @returns {CKEDITOR.dialog.definition.button} The removed button\r
                 *              definition.\r
                 */\r
                removeButton : function( id )\r
@@ -1555,9 +1639,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
        /**\r
         * This class is not really part of the API. It is the template of the\r
         * objects representing content pages inside the\r
-        * CKEDITOR.dialog.dialogDefinitionObject.\r
+        * CKEDITOR.dialog.definitionObject.\r
         * @constructor\r
-        * @name CKEDITOR.dialog.contentDefinitionObject\r
+        * @name CKEDITOR.dialog.definition.contentObject\r
         * @example\r
         * CKEDITOR.on( 'dialogDefinition', function( evt )\r
         *      {\r
@@ -1578,12 +1662,12 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
        }\r
 \r
        contentObject.prototype =\r
-       /** @lends CKEDITOR.dialog.contentDefinitionObject.prototype */\r
+       /** @lends CKEDITOR.dialog.definition.contentObject.prototype */\r
        {\r
                /**\r
                 * Gets a UI element definition under the content definition.\r
                 * @param {String} id The id of the UI element definition.\r
-                * @returns {CKEDITOR.dialog.uiElementDefinition}\r
+                * @returns {CKEDITOR.dialog.definition.uiElement}\r
                 */\r
                get : function( id )\r
                {\r
@@ -1592,13 +1676,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 \r
                /**\r
                 * Adds a UI element definition to the content definition.\r
-                * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition The\r
+                * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition The\r
                 *              UI elemnet definition to be added.\r
                 * @param {String} nextSiblingId The id of an existing UI element\r
                 *              definition which the new UI element definition will be inserted\r
                 *              before. Omit if the new button definition is to be inserted as\r
                 *              the last item.\r
-                * @returns {CKEDITOR.dialog.uiElementDefinition} The element\r
+                * @returns {CKEDITOR.dialog.definition.uiElement} The element\r
                 *              definition inserted.\r
                 */\r
                add : function( elementDefinition, nextSiblingId )\r
@@ -1610,7 +1694,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 * Removes a UI element definition from the content definition.\r
                 * @param {String} id The id of the UI element definition to be\r
                 *              removed.\r
-                * @returns {CKEDITOR.dialog.uiElementDefinition} The element\r
+                * @returns {CKEDITOR.dialog.definition.uiElement} The element\r
                 *              definition removed.\r
                 * @example\r
                 */\r
@@ -1706,25 +1790,24 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        return;\r
 \r
                var editor = dialog.getParentEditor();\r
-               var wrapperWidth, wrapperHeight, viewSize, origin, startSize;\r
-\r
-               function positionDialog( right )\r
-               {\r
-                       // Maintain righthand sizing in RTL.\r
-                       if ( dialog._.moved && editor.lang.dir == 'rtl' )\r
-                       {\r
-                               var element = dialog._.element.getFirst();\r
-                               element.setStyle( 'right', right + "px" );\r
-                               element.removeStyle( 'left' );\r
-                       }\r
-                       else if ( !dialog._.moved )\r
-                               dialog.layout();\r
-               }\r
+               var wrapperWidth, wrapperHeight,\r
+                               viewSize, origin, startSize,\r
+                               dialogCover;\r
 \r
                var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )\r
                {\r
                        startSize = dialog.getSize();\r
 \r
+                       var content = dialog.parts.contents,\r
+                               iframeDialog = content.$.getElementsByTagName( 'iframe' ).length;\r
+\r
+                       // Shim to help capturing "mousemove" over iframe.\r
+                       if ( iframeDialog )\r
+                       {\r
+                               dialogCover = CKEDITOR.dom.element.createFromHtml( '<div class="cke_dialog_resize_cover" style="height: 100%; position: absolute; width: 100%;"></div>' );\r
+                               content.append( dialogCover );\r
+                       }\r
+\r
                        // Calculate the offset between content and chrome size.\r
                        wrapperHeight = startSize.height - dialog.parts.contents.getSize( 'height',  ! ( CKEDITOR.env.gecko || CKEDITOR.env.opera || CKEDITOR.env.ie && CKEDITOR.env.quirks ) );\r
                        wrapperWidth = startSize.width - dialog.parts.contents.getSize( 'width', 1 );\r
@@ -1754,7 +1837,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                direction = ' cke_resizer_horizontal';\r
                        else if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT )\r
                                direction = ' cke_resizer_vertical';\r
-                       var resizer = CKEDITOR.dom.element.createFromHtml( '<div class="cke_resizer' + direction + '"' +\r
+                       var resizer = CKEDITOR.dom.element.createFromHtml( '<div' +\r
+                                       ' class="cke_resizer' + direction + ' cke_resizer_' + editor.lang.dir + '"' +\r
                                        ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' +\r
                                        ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event )"></div>' );\r
                        dialog.parts.footer.append( resizer, 1 );\r
@@ -1774,10 +1858,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                right = rtl && element.getComputedStyle( 'right' ),\r
                                position = dialog.getPosition();\r
 \r
-                       // IE might return "auto", we need exact position.\r
-                       if ( right )\r
-                               right = right == 'auto' ? viewSize.width - ( position.x || 0 ) - element.getSize( 'width' ) : parseInt( right, 10 );\r
-\r
                        if ( position.y + internalHeight > viewSize.height )\r
                                internalHeight = viewSize.height - position.y;\r
 \r
@@ -1785,15 +1865,16 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                internalWidth = viewSize.width - ( rtl ? right : position.x );\r
 \r
                        // Make sure the dialog will not be resized to the wrong side when it's in the leftmost position for RTL.\r
-                       if ( ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH ) && !( rtl && dx > 0 && !position.x ) )\r
+                       if ( ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH ) )\r
                                width = Math.max( def.minWidth || 0, internalWidth - wrapperWidth );\r
 \r
                        if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )\r
                                height = Math.max( def.minHeight || 0, internalHeight - wrapperHeight );\r
 \r
                        dialog.resize( width, height );\r
-                       // The right property might get broken during resizing, so computing it before the resizing.\r
-                       positionDialog( right );\r
+\r
+                       if ( !dialog._.moved )\r
+                               dialog.layout();\r
 \r
                        evt.data.preventDefault();\r
                }\r
@@ -1803,30 +1884,18 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                        CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );\r
                        CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );\r
 \r
+                       if ( dialogCover )\r
+                       {\r
+                               dialogCover.remove();\r
+                               dialogCover = null;\r
+                       }\r
+\r
                        if ( CKEDITOR.env.ie6Compat )\r
                        {\r
                                var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
                                coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
                                coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
                        }\r
-\r
-                       // Switch back to use the left property, if RTL is used.\r
-                       if ( editor.lang.dir == 'rtl' )\r
-                       {\r
-                               var element = dialog._.element.getFirst(),\r
-                                       left = element.getComputedStyle( 'left' );\r
-\r
-                               // IE might return "auto", we need exact position.\r
-                               if ( left == 'auto' )\r
-                                       left = viewSize.width - parseInt( element.getStyle( 'right' ), 10 ) - dialog.getSize().width;\r
-                               else\r
-                                       left = parseInt( left, 10 );\r
-\r
-                               element.removeStyle( 'right' );\r
-                               // Make sure the left property gets applied, even if it is the same as previously.\r
-                               dialog._.position.x += 1;\r
-                               dialog.move( left, dialog._.position.y );\r
-                       }\r
                }\r
        }\r
 \r
@@ -1852,7 +1921,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                if ( !coverElement )\r
                {\r
                        var html = [\r
-                                       '<div style="position: ', ( CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed' ),\r
+                                       '<div tabIndex="-1" style="position: ', ( CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed' ),\r
                                        '; z-index: ', baseFloatZIndex,\r
                                        '; top: 0px; left: 0px; ',\r
                                        ( !CKEDITOR.env.ie6Compat ? 'background-color: ' + backgroundColorStyle : '' ),\r
@@ -1923,16 +1992,23 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                                                top : pos.y + 'px'\r
                                        });\r
 \r
-                       do\r
+                       if ( cursor )\r
                        {\r
-                               var dialogPos = cursor.getPosition();\r
-                               cursor.move( dialogPos.x, dialogPos.y );\r
-                       } while ( ( cursor = cursor._.parentDialog ) );\r
+                               do\r
+                               {\r
+                                       var dialogPos = cursor.getPosition();\r
+                                       cursor.move( dialogPos.x, dialogPos.y );\r
+                               } while ( ( cursor = cursor._.parentDialog ) );\r
+                       }\r
                };\r
 \r
                resizeCover = resizeFunc;\r
                win.on( 'resize', resizeFunc );\r
                resizeFunc();\r
+               // Using Safari/Mac, focus must be kept where it is (#7027)\r
+               if ( !( CKEDITOR.env.mac && CKEDITOR.env.webkit ) )\r
+                       coverElement.focus();\r
+\r
                if ( CKEDITOR.env.ie6Compat )\r
                {\r
                        // IE BUG: win.$.onscroll assignment doesn't work.. it must be window.onscroll.\r
@@ -2068,7 +2144,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                         * The base class of all dialog UI elements.\r
                         * @constructor\r
                         * @param {CKEDITOR.dialog} dialog Parent dialog object.\r
-                        * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element\r
+                        * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition Element\r
                         * definition. Accepted fields:\r
                         * <ul>\r
                         *      <li><strong>id</strong> (Required) The id of the UI element. See {@link\r
@@ -2233,7 +2309,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                         * objects in childObjList.\r
                         * @param {Array} htmlList\r
                         * Array of HTML code that this element will output to.\r
-                        * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\r
+                        * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
                         * The element definition. Accepted fields:\r
                         * <ul>\r
                         *      <li><strong>widths</strong> (Optional) The widths of child cells.</li>\r
@@ -2317,7 +2393,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                         * objects in childObjList.\r
                         * @param {Array} htmlList\r
                         * Array of HTML code that this element will output to.\r
-                        * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\r
+                        * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
                         * The element definition. Accepted fields:\r
                         * <ul>\r
                         *      <li><strong>width</strong> (Optional) The width of the layout.</li>\r
@@ -2514,7 +2590,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
                 * </ol>\r
                 * This function is only called at UI element instantiation, but can\r
                 * be overridded in child classes if they require more flexibility.\r
-                * @param {CKEDITOR.dialog.uiElementDefinition} definition The UI element\r
+                * @param {CKEDITOR.dialog.definition.uiElement} definition The UI element\r
                 * definition.\r
                 * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
                 * @example\r
@@ -2896,78 +2972,84 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
        });\r
 \r
        })();\r
-})();\r
 \r
-// Extend the CKEDITOR.editor class with dialog specific functions.\r
-CKEDITOR.tools.extend( CKEDITOR.editor.prototype,\r
-       /** @lends CKEDITOR.editor.prototype */\r
-       {\r
-               /**\r
-                * Loads and opens a registered dialog.\r
-                * @param {String} dialogName The registered name of the dialog.\r
-                * @param {Function} callback The function to be invoked after dialog instance created.\r
-                * @see CKEDITOR.dialog.add\r
-                * @example\r
-                * CKEDITOR.instances.editor1.openDialog( 'smiley' );\r
-                * @returns {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.\r
-                */\r
-               openDialog : function( dialogName, callback )\r
+       // Extend the CKEDITOR.editor class with dialog specific functions.\r
+       CKEDITOR.tools.extend( CKEDITOR.editor.prototype,\r
+               /** @lends CKEDITOR.editor.prototype */\r
                {\r
-                       var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
-                                       dialogSkin = this.skin.dialog;\r
-\r
-                       // If the dialogDefinition is already loaded, open it immediately.\r
-                       if ( typeof dialogDefinitions == 'function' && dialogSkin._isLoaded )\r
+                       /**\r
+                        * Loads and opens a registered dialog.\r
+                        * @param {String} dialogName The registered name of the dialog.\r
+                        * @param {Function} callback The function to be invoked after dialog instance created.\r
+                        * @see CKEDITOR.dialog.add\r
+                        * @example\r
+                        * CKEDITOR.instances.editor1.openDialog( 'smiley' );\r
+                        * @returns {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.\r
+                        */\r
+                       openDialog : function( dialogName, callback )\r
                        {\r
-                               var storedDialogs = this._.storedDialogs ||\r
-                                       ( this._.storedDialogs = {} );\r
+                               if ( this.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
+                               {\r
+                                       var selection = this.getSelection();\r
+                                       selection && selection.lock();\r
+                               }\r
 \r
-                               var dialog = storedDialogs[ dialogName ] ||\r
-                                       ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );\r
+                               var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
+                                               dialogSkin = this.skin.dialog;\r
 \r
-                               callback && callback.call( dialog, dialog );\r
-                               dialog.show();\r
+                               if ( CKEDITOR.dialog._.currentTop === null )\r
+                                       showCover( this );\r
 \r
-                               return dialog;\r
-                       }\r
-                       else if ( dialogDefinitions == 'failed' )\r
-                               throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );\r
+                               // If the dialogDefinition is already loaded, open it immediately.\r
+                               if ( typeof dialogDefinitions == 'function' && dialogSkin._isLoaded )\r
+                               {\r
+                                       var storedDialogs = this._.storedDialogs ||\r
+                                               ( this._.storedDialogs = {} );\r
 \r
-                       // Not loaded? Load the .js file first.\r
-                       var body = CKEDITOR.document.getBody(),\r
-                               cursor = body.$.style.cursor,\r
-                               me = this;\r
+                                       var dialog = storedDialogs[ dialogName ] ||\r
+                                               ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );\r
 \r
-                       body.setStyle( 'cursor', 'wait' );\r
+                                       callback && callback.call( dialog, dialog );\r
+                                       dialog.show();\r
 \r
-                       function onDialogFileLoaded( success )\r
-                       {\r
-                               var dialogDefinition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
-                                               skin = me.skin.dialog;\r
+                                       return dialog;\r
+                               }\r
+                               else if ( dialogDefinitions == 'failed' )\r
+                               {\r
+                                       hideCover();\r
+                                       throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );\r
+                               }\r
 \r
-                               // Check if both skin part and definition is loaded.\r
-                               if ( !skin._isLoaded || loadDefinition && typeof success == 'undefined' )\r
-                                       return;\r
+                               var me = this;\r
 \r
-                               // In case of plugin error, mark it as loading failed.\r
-                               if ( typeof dialogDefinition != 'function' )\r
-                                       CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';\r
+                               function onDialogFileLoaded( success )\r
+                               {\r
+                                       var dialogDefinition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
+                                                       skin = me.skin.dialog;\r
 \r
-                               me.openDialog( dialogName, callback );\r
-                               body.setStyle( 'cursor', cursor );\r
-                       }\r
+                                       // Check if both skin part and definition is loaded.\r
+                                       if ( !skin._isLoaded || loadDefinition && typeof success == 'undefined' )\r
+                                               return;\r
 \r
-                       if ( typeof dialogDefinitions == 'string' )\r
-                       {\r
-                               var loadDefinition = 1;\r
-                               CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), onDialogFileLoaded );\r
-                       }\r
+                                       // In case of plugin error, mark it as loading failed.\r
+                                       if ( typeof dialogDefinition != 'function' )\r
+                                               CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';\r
 \r
-                       CKEDITOR.skins.load( this, 'dialog', onDialogFileLoaded );\r
+                                       me.openDialog( dialogName, callback );\r
+                               }\r
 \r
-                       return null;\r
-               }\r
-       });\r
+                               if ( typeof dialogDefinitions == 'string' )\r
+                               {\r
+                                       var loadDefinition = 1;\r
+                                       CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), onDialogFileLoaded, null, 0, 1 );\r
+                               }\r
+\r
+                               CKEDITOR.skins.load( this, 'dialog', onDialogFileLoaded );\r
+\r
+                               return null;\r
+                       }\r
+               });\r
+})();\r
 \r
 CKEDITOR.plugins.add( 'dialog',\r
        {\r
@@ -3016,7 +3098,7 @@ CKEDITOR.plugins.add( 'dialog',
  */\r
 \r
 /**\r
- * The guildeline to follow when generating the dialog buttons. There are 3 possible options:\r
+ * The guideline to follow when generating the dialog buttons. There are 3 possible options:\r
  * <ul>\r
  *     <li>'OS' - the buttons will be displayed in the default order of the user's OS;</li>\r
  *     <li>'ltr' - for Left-To-Right order;</li>\r
@@ -3034,7 +3116,7 @@ CKEDITOR.plugins.add( 'dialog',
  * The dialog contents to removed. It's a string composed by dialog name and tab name with a colon between them.\r
  * Separate each pair with semicolon (see example).\r
  * <b>Note: All names are case-sensitive.</b>\r
- * <b>Note: Be cautious when specifying dialog tabs that are mandatory, like "info", dialog functionality might be broken because of this!<b>\r
+ * <b>Note: Be cautious when specifying dialog tabs that are mandatory, like "info", dialog functionality might be broken because of this!</b>\r
  * @name CKEDITOR.config.removeDialogTabs\r
  * @type String\r
  * @since 3.5\r
@@ -3052,7 +3134,7 @@ CKEDITOR.plugins.add( 'dialog',
  * not get fired.</p>\r
  * @name CKEDITOR#dialogDefinition\r
  * @event\r
- * @param {CKEDITOR.dialog.dialogDefinition} data The dialog defination that\r
+ * @param {CKEDITOR.dialog.definition} data The dialog defination that\r
  *             is being loaded.\r
  * @param {CKEDITOR.editor} editor The editor instance that will use the\r
  *             dialog.\r
@@ -3060,8 +3142,60 @@ CKEDITOR.plugins.add( 'dialog',
 \r
 /**\r
  * Fired when a tab is going to be selected in a dialog\r
- * @name dialog#selectPage\r
+ * @name CKEDITOR.dialog#selectPage\r
+ * @event\r
+ * @param {String} page The id of the page that it's gonna be selected.\r
+ * @param {String} currentPage The id of the current page.\r
+ */\r
+\r
+/**\r
+ * Fired when the user tries to dismiss a dialog\r
+ * @name CKEDITOR.dialog#cancel\r
+ * @event\r
+ * @param {Boolean} hide Whether the event should proceed or not.\r
+ */\r
+\r
+/**\r
+ * Fired when the user tries to confirm a dialog\r
+ * @name CKEDITOR.dialog#ok\r
+ * @event\r
+ * @param {Boolean} hide Whether the event should proceed or not.\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is shown\r
+ * @name CKEDITOR.dialog#show\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is shown\r
+ * @name CKEDITOR.editor#dialogShow\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is hidden\r
+ * @name CKEDITOR.dialog#hide\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is hidden\r
+ * @name CKEDITOR.editor#dialogHide\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is being resized. The event is fired on\r
+ * both the 'CKEDITOR.dialog' object and the dialog instance\r
+ * since 3.5.3, previously it's available only in the global object.\r
+ * @name CKEDITOR.dialog#resize\r
+ * @since 3.5\r
  * @event\r
- * @param String page The id of the page that it's gonna be selected.\r
- * @param String currentPage The id of the current page.\r
+ * @param {CKEDITOR.dialog} dialog The dialog being resized (if\r
+ * it's fired on the dialog itself, this parameter isn't sent).\r
+ * @param {String} skin The skin name.\r
+ * @param {Number} width The new width.\r
+ * @param {Number} height The new height.\r
  */\r