Ticket #5084: 5084_3.patch

_source/plugins/dialog/plugin.js

@@ -638 +638 @@
                  * @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 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.
@@ -671 +672 @@
                                                         'left'  : ( x > 0 ? x : 0 ) + 'px',
                                                         'top'   : ( y > 0 ? y : 0 ) + 'px'
                                                 });
+
+                                !internal && ( this._.moved = 1 );
                         };
                 })(),
 
@@ -717 +720 @@
 
 
                         // First, set the dialog to an appropriate size.
-                        this.resize( definition.minWidth, definition.minHeight );
+                        this.resize( this._.contentSize.width || definition.minWidth, this._.contentSize.height || definition.minHeight );
 
                         // Reset all inputs back to their default value.
                         this.reset();
@@ -770 +773 @@
 
                                         // 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( ( viewSize.width - ( this._.contentSize.width || definition.minWidth ) ) / 2,
+                                                        ( viewSize.height - dialogSize.height ) / 2, 1 );
 
                                         this.parts.dialog.setStyle( 'visibility', '' );
 
@@ -1671 +1675 @@
 
         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()
                 {
-                        coords.x2 += dx;
+                        if ( dialog._.moved )
+                                return;
+                        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();
+                });
 
-                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 dx = ( evt.data.$.screenX - origin.x ) * ( editor.lang.dir == 'rtl' ? -1 : 1 ),
+                                dy = evt.data.$.screenY - origin.y,
+                                width = startSize.width,
+                                height = startSize.height,
+                                internalWidth = width + 2 * dx,
+                                internalHeight = height + 2 * dy;
 
-                        var realX, realY, realX2, realY2;
+                        if ( internalHeight > viewSize.height - margin[1] - margin[3] )
+                                internalHeight = viewSize.height - margin[1] - margin[3];
+                        if ( internalWidth > viewSize.width - margin[0] - margin[2] )
+                                internalWidth = viewSize.width - margin[0] - margin[2];
 
-                        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 ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
+                                width = Math.max( minWidth, internalWidth );
 
-                        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_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
+                                height = Math.max( minHeight, internalHeight );
 
-                        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;
+                        width = Math.max( width - wrapperWidth, 0 );
+                        height = Math.max( height - wrapperHeight, 0 );
 
-                        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 ;
-
-                        dialog.move( realX, realY );
-                        dialog.resize( realX2 - realX, realY2 - realY );
-
+                        dialog.resize( width, height );
+                        positionDialog();
                         evt.data.preventDefault();
                 }
 
-                function mouseUpHandler( evt )
+                function mouseUpHandler()
                 {
                         CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );
                         CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );
@@ -1794 +1775 @@
                                 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] } );
-//              }
         }
 
         var resizeCover;

_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

_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

_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