[BUGFIX] RTE resizing is erratic 05/36205/4
authorStanislas Rolland <typo3@sjbr.ca>
Fri, 23 Jan 2015 18:56:16 +0000 (13:56 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Fri, 23 Jan 2015 19:04:45 +0000 (20:04 +0100)
A window resize event is triggered when the framework, including the
iframe, is resized using jQuery UI Resizable.
The window resize event must be stopped while risizing is being
performed.

Releases: master
Resolves: #64390
Change-Id: I1381cabc4c2965a8b677a17c0acd7458199b2bca
Reviewed-on: http://review.typo3.org/36205
Reviewed-by: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Framework.js

index fa02a73..29029d2 100644 (file)
@@ -92,7 +92,14 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
                        // Monitor iframe becoming shown or hidden as it may change the height of the status bar
                        Event.on(this.iframe, 'HTMLAreaEventIframeShow', function(event) { Event.stopEvent(event); self.resizable ? self.onIframeShow() : self.onWindowResize(); return false; });
                        // Monitor window resizing
-                       Event.on(window, 'resize', function (event) { self.onWindowResize(); });
+                       Event.on(window, 'resize', function (event) {
+                               // Avoid resizing while the framework is already being resized by jQuery UI Resizable
+                               if (self.isResizing) {
+                                       Event.stopEvent(event);
+                               } else {
+                                       self.onWindowResize();
+                               }
+                       });
                        // If the textarea is inside a form, on reset, re-initialize the HTMLArea content and update the toolbar
                        var form = this.textArea.form;
                        if (form) {
@@ -154,6 +161,11 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
                maxHeight: 2000,
 
                /**
+                * When true, the framework is being resized by jQuery UI Resizable
+                */
+               isResizing: false,
+
+               /**
                 * Initial textArea dimensions
                 * Should be set in config
                 */
@@ -198,10 +210,27 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
                        if (this.resizable) {
                                var self = this;
                                this.resizer = Resizable.makeResizable(this.getEl(), {
+                                       delay: 150,
                                        minHeight: 200,
                                        minWidth: 300,
+                                       alsoResize: '#' + this.editorId + '-iframe',
                                        maxHeight: this.maxHeight,
-                                       stop: function (event, ui) { Event.stopEvent(event); self.onHtmlAreaResize(ui.size); return false; }
+                                       start: function (event, ui) {
+                                               Event.stopEvent(event);
+                                               self.isResizing = true;
+                                               return false;
+                                       },
+                                       resize: function (event, ui) {
+                                               Event.stopEvent(event);
+                                               self.doHtmlAreaResize(ui.size);
+                                               return false;
+                                       },
+                                       stop: function (event, ui) {
+                                               Event.stopEvent(event);
+                                               self.isResizing = false;
+                                               self.doHtmlAreaResize(ui.size);
+                                               return false;
+                                       }
                                });
                        }
                },
@@ -209,7 +238,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
                /**
                 * Resize the framework when the resizer handles are used
                 */
-               onHtmlAreaResize: function (size) {
+               doHtmlAreaResize: function (size) {
                        Dom.setSize(this.getEl(), size);
                        this.onFrameworkResize();
                },