Ticket #5084: 5084_4.patch

3.5.x/_source/plugins/dialog/plugin.js

@@ -666 +666 @@
                  * @function
                  * @param {Number} x The target x-coordinate.
                  * @param {Number} y The target y-coordinate.
+                 * @param {Boolean} internal Whether this is an internal moving, which should not indicate that the dialog has been actually moved.
                  * @example
                  * dialogObj.move( 10, 40 );
                  */
                 move : (function()
                 {
                         var isFixed;
-                        return function( x, y )
+                        return function( x, y, internal )
                         {
                                 // The dialog may be fixed positioned or absolute positioned. Ask the
                                 // browser what is the current situation first.
@@ -699 +700 @@
                                                         'left'  : ( x > 0 ? x : 0 ) + 'px',
                                                         'top'   : ( y > 0 ? y : 0 ) + 'px'
                                                 });
+
+                                !internal && ( this._.moved = 1 );
                         };
                 })(),
 
@@ -745 +748 @@
 
 
                         // First, set the dialog to an appropriate size.
-                        this.resize( definition.minWidth, definition.minHeight );
+                        this.resize( this._.contentSize && this._.contentSize.width || definition.minWidth,
+                                        this._.contentSize && this._.contentSize.height || definition.minHeight );
 
                         // Reset all inputs back to their default value.
                         this.reset();
@@ -790 +794 @@
                         // Reset the hasFocus state.
                         this._.hasFocus = false;
 
-                        // Rearrange the dialog to the middle of the window.
+                        // Rearrange the dialog to its previous position or the middle of the window on first opening.
                         CKEDITOR.tools.setTimeout( function()
                                 {
                                         var viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
@@ -798 +802 @@
 
                                         // We're using definition size for initial position because of
                                         // offten corrupted data in offsetWidth at this point. (#4084)
-                                        this.move( ( viewSize.width - definition.minWidth ) / 2, ( viewSize.height - dialogSize.height ) / 2 );
+                                        this.move( this._.position ? this._.position.x : ( viewSize.width - definition.minWidth ) / 2 ,
+                                                        this._.position ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2, 1 );
 
                                         this.parts.dialog.setStyle( 'visibility', '' );
 
@@ -1699 +1704 @@
 
         function initResizeHandles( dialog )
         {
-                var definition = dialog.definition,
-                        minWidth = definition.minWidth || 0,
-                        minHeight = definition.minHeight || 0,
-                        resizable = definition.resizable,
-                        margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ];
+                var def = dialog.definition,
+                        resizable = def.resizable;
+                if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE )
+                        return;
 
-                function topSizer( coords, dy )
-                {
-                        coords.y += dy;
-                }
+                var editor = dialog.getParentEditor(),
+                        minHeight = def.minHeight || 0,
+                        minWidth = def.minWidth || 0,
+                        margin = editor.skin.margins || [ 0, 0, 0, 0 ],
+                        wrapperWidth, wrapperHeight, viewSize, origin;
 
-                function rightSizer( coords, dx )
+                function positionDialog( right )
                 {
-                        coords.x2 += dx;
+                        // Maintain righthand sizing in RTL.
+                        if ( dialog._.moved && editor.lang.dir == 'rtl' )
+                        {
+                                var element = dialog._.element.getFirst();
+                                element.setStyle( 'right', right );
+                                element.removeStyle( 'left' );
+                        }
+                        else if ( !dialog._.moved )
+                        {
+                                var dialogSize = dialog.getSize();
+                                dialog.move( ( viewSize.width - dialogSize.width ) / 2 + margin[ 0 ], ( viewSize.height - dialogSize.height ) / 2 + margin[ 1 ] , 1 );
+                        }
                 }
 
-                function bottomSizer( coords, dy )
+                var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )
                 {
-                        coords.y2 += dy;
-                }
+                        origin = { x : $event.screenX, y : $event.screenY };
 
-                function leftSizer( coords, dx )
-                {
-                        coords.x += dx;
-                }
+                        dialog._.updateSize = true;
+                        startSize = dialog.getSize();
 
-                var lastCoords = null,
-                        abstractDialogCoords = null,
-                        magnetDistance = dialog._.editor.config.magnetDistance,
-                        parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];
+                        viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
 
-                function mouseDownHandler( evt )
-                {
-                        var partName = evt.listenerData.part, size = dialog.getSize();
-                        abstractDialogCoords = dialog.getPosition();
-                        CKEDITOR.tools.extend( abstractDialogCoords,
-                                {
-                                        x2 : abstractDialogCoords.x + size.width,
-                                        y2 : abstractDialogCoords.y + size.height
-                                } );
-                        lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };
+                        CKEDITOR.document.on( 'mousemove', mouseMoveHandler );
+                        CKEDITOR.document.on( 'mouseup', mouseUpHandler );
 
-                        CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
-                        CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
-
                         if ( CKEDITOR.env.ie6Compat )
                         {
                                 var coverDoc = currentCover.getChild( 0 ).getFrameDocument();
-                                coverDoc.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
-                                coverDoc.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
+                                coverDoc.on( 'mousemove', mouseMoveHandler );
+                                coverDoc.on( 'mouseup', mouseUpHandler );
                         }
 
-                        evt.data.preventDefault();
-                }
+                        $event.preventDefault && $event.preventDefault();
+                });
 
-                function mouseMoveHandler( evt )
+                // Prepend the grip to the dialog.
+                dialog.on( 'load', function()
                 {
-                        var x = evt.data.$.screenX,
-                                y = evt.data.$.screenY,
-                                dx = x - lastCoords.x,
-                                dy = y - lastCoords.y,
-                                viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),
-                                partName = evt.listenerData.part;
+                        var direction = '';
+                        if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH )
+                                direction = ' cke_resizer_horizontal';
+                        else if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT )
+                                direction = ' cke_resizer_vertical';
+                        var resizer = CKEDITOR.dom.element.createFromHtml( '<div class="cke_resizer' + direction + '"' +
+                                        ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' + 
+                                        ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event )"></div>' );
+                        dialog.parts.footer.append( resizer, 1 );
 
-                        if ( partName.search( 't' ) != -1 )
-                                topSizer( abstractDialogCoords, dy );
-                        if ( partName.search( 'l' ) != -1 )
-                                leftSizer( abstractDialogCoords, dx );
-                        if ( partName.search( 'b' ) != -1 )
-                                bottomSizer( abstractDialogCoords, dy );
-                        if ( partName.search( 'r' ) != -1 )
-                                rightSizer( abstractDialogCoords, dx );
+                        var dialogSize = dialog.getSize();
+                        wrapperHeight = dialogSize.height - dialog.parts.contents.$.offsetHeight;
+                        wrapperWidth = dialogSize.width - dialog.parts.contents.$.offsetWidth;
+                });
+                editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } );
 
-                        lastCoords = { x : x, y : y };
+                function mouseMoveHandler( evt )
+                {
+                        var rtl = editor.lang.dir == 'rtl',
+                                dx = ( evt.data.$.screenX - origin.x ) * ( rtl ? -1 : 1 ),
+                                dy = evt.data.$.screenY - origin.y,
+                                width = startSize.width,
+                                height = startSize.height,
+                                internalWidth = width + dx * ( dialog._.moved ? 1 : 2 ),
+                                internalHeight = height + dy * ( dialog._.moved ? 1 : 2 ),
+                                right = rtl && dialog._.element.getFirst().getComputedStyle( 'right' );
+                                position = dialog.getPosition();
 
-                        var realX, realY, realX2, realY2;
+                        if ( internalHeight > viewSize.height - margin[1] - margin[3] )
+                                internalHeight = viewSize.height - margin[1] - margin[3];
+                        else if ( position.y + internalHeight > viewSize.height - margin[1] - margin[3] )
+                                internalHeight = viewSize.height - margin[3] - position.y;
 
-                        if ( abstractDialogCoords.x + margins[3] < magnetDistance )
-                                realX = - margins[3];
-                        else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
-                                realX = abstractDialogCoords.x2 - minWidth;
-                        else
-                                realX = abstractDialogCoords.x;
+                        if ( internalWidth > viewSize.width - margin[0] - margin[2] )
+                                internalWidth = viewSize.width - margin[0] - margin[2];
+                        else if ( ( rtl ? right : position.x ) + internalWidth > viewSize.width - margin[0] - margin[2] )
+                                internalWidth = viewSize.width - margin[2] - ( rtl ? right : position.x );
 
-                        if ( abstractDialogCoords.y + margins[0] < magnetDistance )
-                                realY = - margins[0];
-                        else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
-                                realY = abstractDialogCoords.y2 - minHeight;
-                        else
-                                realY = abstractDialogCoords.y;
+                        if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
+                                width = Math.max( minWidth, internalWidth );
 
-                        if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance )
-                                realX2 = viewPaneSize.width + margins[1] ;
-                        else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
-                                realX2 = abstractDialogCoords.x + minWidth;
-                        else
-                                realX2 = abstractDialogCoords.x2;
+                        if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
+                                height = Math.max( minHeight, internalHeight );
 
-                        if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )
-                                realY2= viewPaneSize.height + margins[2] ;
-                        else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
-                                realY2 = abstractDialogCoords.y + minHeight;
-                        else
-                                realY2 = abstractDialogCoords.y2 ;
+                        width = Math.max( width - wrapperWidth, 0 );
+                        height = Math.max( height - wrapperHeight, 0 );
 
-                        dialog.move( realX, realY );
-                        dialog.resize( realX2 - realX, realY2 - realY );
+                        dialog.resize( width, height );
+                        // The right property might get broken during resizing, so computing it before the resizing.
+                        positionDialog( right );
 
                         evt.data.preventDefault();
                 }
 
-                function mouseUpHandler( evt )
+                function mouseUpHandler()
                 {
                         CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );
                         CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );
@@ -1821 +1821 @@
                                 coverDoc.removeListener( 'mouseup', mouseUpHandler );
                                 coverDoc.removeListener( 'mousemove', mouseMoveHandler );
                         }
-                }
 
-// TODO : Simplify the resize logic, having just a single resize grip <div>.
-//              var widthTest = /[lr]/,
-//                      heightTest = /[tb]/;
-//              for ( var i = 0 ; i < parts.length ; i++ )
-//              {
-//                      var element = dialog.parts[ parts[i] + '_resize' ];
-//                      if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ||
-//                                      resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) ||
-//                                      resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )
-//                      {
-//                              element.hide();
-//                              continue;
-//                      }
-//                      element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } );
-//              }
+                        // Switch back to use the left property, if RTL is used.
+                        if ( editor.lang.dir == 'rtl' )
+                        {
+                                var element = dialog._.element.getFirst(),
+                                        left = element.getComputedStyle( 'left' );
+                                element.removeStyle( 'right' );
+                                dialog.move( parseInt( left, 10 ), parseInt( element.getComputedStyle( 'top' ), 10 ), 1 );
+                        }
+                }
         }
 
         var resizeCover;

3.5.x/_source/skins/kama/dialog.css

@@ -102 +102 @@
         text-align: left;
 }
 
+.cke_skin_kama .cke_dialog_footer .cke_resizer {
+        margin-top: 20px;
+}
+
 /* tabs */
 
 .cke_skin_kama .cke_dialog_tabs

3.5.x/_source/skins/office2003/dialog.css

@@ -200 +200 @@
         text-align: left;
 }
 
+.cke_skin_office2003 .cke_dialog_footer .cke_resizer {
+        margin-top: 21px;
+}
+
 /* tabs */
 
 .cke_skin_office2003 .cke_dialog_tabs

3.5.x/_source/skins/v2/dialog.css

@@ -197 +197 @@
         text-align: left;
 }
 
+.cke_skin_v2 .cke_dialog_footer .cke_resizer {
+        margin-top: 21px;
+}
+
 /* tabs */
 
 .cke_skin_v2 .cke_dialog_tabs