Ticket #3601: 3601_3.patch

_source/core/env.js

@@ -61 +61 @@
                         air             : ( agent.indexOf( ' adobeair/' ) > -1 ),
 
                         /**
+                         * Indicates Google Chrome.
+                         * @type Boolean
+                         * @example
+                         * if ( CKEDITOR.env.chrome )
+                         *     alert( "I'm on Chrome!" );
+                         */
+                        chrome : ( agent.indexOf( 'Chrome/' ) > -1 ),
+
+                        /**
                          * Indicates that CKEditor is running on Macintosh.
                          * @type Boolean
                          * @example

_source/plugins/resize/plugin.js

@@ -7 +7 @@
 {
         init : function( editor )
         {
-                var config = editor.config;
+                var config = editor.config,
+                                useProxy = config.resize_livepreview != true
+                                                && ( config.resize_livepreview === false
+                                                || CKEDITOR.env.webkit && !CKEDITOR.env.chrome && !CKEDITOR.env.mac
+                                                || CKEDITOR.env.ie && CKEDITOR.env.version < 7 );
 
                 if ( config.resize_enabled )
                 {
-                        var container = null,
+                        var resizeable = null,
+                                proxy,
+                                pixel = CKEDITOR.tools.cssLength,
                                 origin,
                                 startSize,
+                                width, height, adjustmentX, adjustmentY,
                                 resizeHorizontal = ( config.resize_dir == 'both' || config.resize_dir == 'horizontal' ) &&
                                         ( config.resize_minWidth != config.resize_maxWidth ),
                                 resizeVertical = ( config.resize_dir == 'both' || config.resize_dir == 'vertical' ) &&
@@ -23 +30 @@
                         {
                                 var dx = evt.data.$.screenX - origin.x,
                                         dy = evt.data.$.screenY - origin.y,
-                                        width = startSize.width,
-                                        height = startSize.height,
-                                        internalWidth = width + dx * ( editor.lang.dir == 'rtl' ? -1 : 1 ),
-                                        internalHeight = height + dy;
+                                        internalWidth = startSize.width + dx * ( editor.lang.dir == 'rtl' ? -1 : 1 ),
+                                        internalHeight = startSize.height + dy;
 
                                 if ( resizeHorizontal )
                                         width =  Math.max( config.resize_minWidth, Math.min( internalWidth, config.resize_maxWidth ) );
@@ -34 +39 @@
                                 if ( resizeVertical )
                                         height =  Math.max( config.resize_minHeight, Math.min( internalHeight, config.resize_maxHeight ) );
 
-                                editor.resize( width, height );
+                                if ( useProxy )
+                                        proxy.setStyles( { width: pixel( width ), height: pixel( height ) } );
+                                else
+                                        editor.resize( width + adjustmentX, height + adjustmentY );
                         }
 
                         function dragEndHandler ( evt )
                         {
+                                useProxy && proxy.hide();
+
+                                editor.resize( width + adjustmentX, height + adjustmentY );
+
                                 CKEDITOR.document.removeListener( 'mousemove', dragHandler );
                                 CKEDITOR.document.removeListener( 'mouseup', dragEndHandler );
 
@@ -51 +63 @@
 
                         var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )
                                 {
-                                        if ( !container )
-                                                container = editor.getResizable();
+                                        function showProxy()
+                                        {
+                                                if ( !( proxy = CKEDITOR.document.getById( 'cke_resize_livepreview' ) ) )
+                                                        proxy = CKEDITOR.document.getBody().append( CKEDITOR.dom.element.createFromHtml( '<div id="cke_resize_livepreview" style="position:absolute;border:dotted 1px;"></div>' ) );
 
-                                        startSize = { width : container.$.offsetWidth || 0, height : container.$.offsetHeight || 0 };
+                                                var docPosition = editor.container.getDocumentPosition();
+                                                proxy.setStyles( { left : pixel( docPosition.x ), top: pixel( docPosition.y ), width: pixel( startSize.width ), height: pixel( startSize.height )  } );
+                                                proxy.show();
+                                        }
+
+                                        if ( !resizeable )
+                                                resizeable = editor.getResizable();
+
+                                        startSize = { width : resizeable.$.offsetWidth || 0, height : resizeable.$.offsetHeight || 0 };
                                         origin = { x : $event.screenX, y : $event.screenY };
+                                        adjustmentX = CKEDITOR.env.quirks ? editor.container.$.offsetHeight - resizeable.$.offsetHeight : 0;
+                                        adjustmentY = editor.container.$.offsetHeight - resizeable.$.offsetHeight;
 
+                                        useProxy && showProxy();
+
                                         CKEDITOR.document.on( 'mousemove', dragHandler );
                                         CKEDITOR.document.on( 'mouseup', dragEndHandler );
 
@@ -67 +93 @@
                                         }
                                 });
 
-                        editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } );
+                        editor.on( 'destroy', function()
+                        {
+                                CKEDITOR.tools.removeFunction( mouseDownFn );
+                                proxy && proxy.remove();
+                        } );
 
                         editor.on( 'themeSpace', function( event )
                                 {
@@ -144 +174 @@
  * config.resize_dir = 'vertical';
  */
 CKEDITOR.config.resize_dir = 'both';
+
+/**
+ * Whether use a proxy element to present the resizing rectangle
+ * instead of live content resizing.
+ * @name CKEDITOR.config.resize_livepreview
+ * @type String
+ * @default "true" for all browsers except Safari (Windows) and IE6.
+ * @since 3.4
+ * @example
+ * config.resize_livepreview = false;
+ */