fix resizing issue when scrollbar appear/disappear while you type #378

jcubic · Mar 18, 2018 · 76f62c3 · 76f62c3
1 parent 3ce848a
commit 76f62c3
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 279 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,7 +11,7 @@
 * fix newline as first character in formatting [#375](https://github.com/jcubic/jquery.terminal/pull/375).
 * fix error when echo undefined (it will echo string undefined since it's converted to string)
 * fix first argument to keymap function, it's now keypress event
-* trigger resize handler on keypress so it's resizing when scrollbar appear/disappear
+* fix resizing issue when scrollbar appear/disappear while you type
   [#378](https://github.com/jcubic/jquery.terminal/issues/378)
 
 ## 1.12.1

diff --git a/css/jquery.terminal-1.12.1.css b/css/jquery.terminal-1.12.1.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2018 Jakub Jankiewicz <http://jcubic.pl>
  * Released under the MIT license
  *
- * Date: Sun, 11 Mar 2018 14:20:09 +0000
+ * Date: Sun, 18 Mar 2018 19:19:05 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd .prompt, .cmd .prompt div, .terminal .terminal-output div div{
@@ -67,7 +67,7 @@
     position: relative;
     /*overflow: hidden;*/
     overflow-y: auto;
-    overflow-x: hidden;
+    /* overflow-x: hidden; */
 }
 .terminal, .cmd {
     contain: content;
@@ -80,6 +80,20 @@ body.terminal {
 .terminal > div {
     overflow: hidden;
 }
+.terminal > iframe, .terminal .font iframe {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: -1;
+    visibility: hidden;
+    height: 100%;
+    border: none;
+    padding: 0;
+    width: 100%
+}
 .cmd {
     padding: 0;
     position: relative;

diff --git a/css/jquery.terminal-1.12.1.min.css b/css/jquery.terminal-1.12.1.min.css
diff --git a/css/jquery.terminal-src.css b/css/jquery.terminal-src.css
@@ -67,7 +67,7 @@
     position: relative;
     /*overflow: hidden;*/
     overflow-y: auto;
-    overflow-x: hidden;
+    /* overflow-x: hidden; */
 }
 .terminal, .cmd {
     contain: content;
@@ -80,6 +80,20 @@ body.terminal {
 .terminal > div {
     overflow: hidden;
 }
+.terminal > iframe, .terminal .font iframe {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: -1;
+    visibility: hidden;
+    height: 100%;
+    border: none;
+    padding: 0;
+    width: 100%
+}
 .cmd {
     padding: 0;
     position: relative;

diff --git a/css/jquery.terminal.css b/css/jquery.terminal.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2018 Jakub Jankiewicz <http://jcubic.pl>
  * Released under the MIT license
  *
- * Date: Sun, 11 Mar 2018 14:20:09 +0000
+ * Date: Sun, 18 Mar 2018 19:19:05 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd .prompt, .cmd .prompt div, .terminal .terminal-output div div{
@@ -67,7 +67,7 @@
     position: relative;
     /*overflow: hidden;*/
     overflow-y: auto;
-    overflow-x: hidden;
+    /* overflow-x: hidden; */
 }
 .terminal, .cmd {
     contain: content;
@@ -80,6 +80,20 @@ body.terminal {
 .terminal > div {
     overflow: hidden;
 }
+.terminal > iframe, .terminal .font iframe {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: -1;
+    visibility: hidden;
+    height: 100%;
+    border: none;
+    padding: 0;
+    width: 100%
+}
 .cmd {
     padding: 0;
     position: relative;

diff --git a/css/jquery.terminal.min.css b/css/jquery.terminal.min.css
diff --git a/js/jquery.terminal-1.12.1.js b/js/jquery.terminal-1.12.1.js
@@ -32,7 +32,7 @@
  * Copyright (c) 2007-2013 Alexandru Marasteanu <hello at alexei dot ro>
  * licensed under 3 clause BSD license
  *
- * Date: Sun, 18 Mar 2018 11:51:48 +0000
+ * Date: Sun, 18 Mar 2018 19:28:14 +0000
  */
 
 /* TODO:
@@ -736,17 +736,9 @@
         return pos;
     };
     /* eslint-enable */
-    var requestAnimationFrame =
-        window.requestAnimationFrame ||
-        window.mozRequestAnimationFrame ||
-        window.webkitRequestAnimationFrame ||
-        function(fn) {
-            return setTimeout(fn, 20);
-        };
     // -----------------------------------------------------------------------
-    // :: Cross-browser resize element plugin
-    // :: Taken from ResizeSensor.js file from marcj/css-element-queries (MIT license)
-    // :: not all jQuerifided
+    // :: Cross-browser resize element plugin using sentinel iframe or
+    // :: resizeObserver
     // -----------------------------------------------------------------------
     $.fn.resizer = function(callback) {
         var unbind = arguments[0] === "unbind";
@@ -760,6 +752,7 @@
         }
         return this.each(function() {
             var $this = $(this);
+            var iframe;
             var callbacks;
             if (unbind) {
                 callbacks = $this.data('callbacks');
@@ -780,7 +773,12 @@
                             $this.removeData('observer');
                         }
                     } else {
-                        $this.find('.resizer').remove();
+                        iframe = $this.find('> iframe');
+                        if (iframe.length) {
+                            // just in case of memory leaks in IE
+                            $(iframe[0].contentWindow).off('resize').remove();
+                            iframe.remove();
+                        }
                     }
                 }
             } else if ($this.data('callbacks')) {
@@ -801,70 +799,13 @@
                     });
                     resizer.observe(this);
                     $this.data('observer', resizer);
-                    return;
-                }
-                //var iframe = $('<iframe/>').addClass('resizer').appendTo(this)[0];
-                var self = this;
-                resizer = $('<div/>').addClass('resizer').appendTo(this)[0];
-                var style =
-                    'position: absolute; left: 0; top: 0; right: 0; bottom: 0; ' +
-                    'overflow: hidden; z-index: -1; visibility: hidden;';
-                var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
-                resizer.style.cssText = style;
-                //iframe.style.cssText = style;
-                resizer.innerHTML =
-                    '<div class="resize-sensor-expand" style="' + style + '">' +
-                    '<div style="' + styleChild + '"></div>' + "</div>" +
-                    '<div class="resize-sensor-shrink" style="' + style + '">' +
-                    '<div style="' + styleChild + ' width: 200%; height: 200%"></div>' +
-                    "</div>";
-
-                var expand = resizer.childNodes[0];
-                var expandChild = expand.childNodes[0];
-                var shrink = resizer.childNodes[1];
-                var dirty, rafId, newWidth, newHeight;
-                var lastWidth = self.offsetWidth;
-                var lastHeight = self.offsetHeight;
-
-                var reset = function() {
-                    expandChild.style.width = '100000px';
-                    expandChild.style.height = '100000px';
-
-                    expand.scrollLeft = 100000;
-                    expand.scrollTop = 100000;
-
-                    shrink.scrollLeft = 100000;
-                    shrink.scrollTop = 100000;
-                };
-
-                reset();
-
-                var onResized = function() {
-                    rafId = 0;
-
-                    if (!dirty) {
-                        return;
-                    }
-
-                    lastWidth = newWidth;
-                    lastHeight = newHeight;
-                    callbacks.fire();
-                };
-                //$(iframe.contentWindow).on('resize', onResized);
-
-                var onScroll = function() {
-                    newWidth = self.offsetWidth;
-                    newHeight = self.offsetHeight;
-                    dirty = newWidth !== lastWidth || newHeight !== lastHeight;
-
-                    if (dirty && !rafId) {
-                        rafId = requestAnimationFrame(onResized);
-                    }
+                } else {
+                    iframe = $('<iframe/>').addClass('resizer').appendTo(this)[0];
 
-                    reset();
-                };
-                $(expand).on("scroll", onScroll);
-                $(shrink).on("scroll", onScroll);
+                    $(iframe.contentWindow).on('resize', function() {
+                        callbacks.fire();
+                    });
+                }
             }
         });
     };
@@ -2889,7 +2830,7 @@
     }
     $.terminal = {
         version: 'DEV',
-        date: 'Sun, 18 Mar 2018 11:51:48 +0000',
+        date: 'Sun, 18 Mar 2018 19:28:14 +0000',
         // colors from http://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -7120,11 +7061,7 @@
             interpreters = new Stack($.extend({}, settings.extra, {
                 name: settings.name,
                 prompt: settings.prompt,
-                keypress: function keypress(e) {
-                    // resize event don't fire on keypress when scrollbar appear #378
-                    setTimeout(resize, 0);
-                    return settings.keypress(e);
-                },
+                keypress: settings.keypress,
                 keydown: settings.keydown,
                 resize: settings.onResize,
                 greetings: settings.greetings,

diff --git a/js/jquery.terminal-1.12.1.min.js b/js/jquery.terminal-1.12.1.min.js
diff --git a/js/jquery.terminal-src.js b/js/jquery.terminal-src.js
@@ -736,17 +736,9 @@
         return pos;
     };
     /* eslint-enable */
-    var requestAnimationFrame =
-        window.requestAnimationFrame ||
-        window.mozRequestAnimationFrame ||
-        window.webkitRequestAnimationFrame ||
-        function(fn) {
-            return setTimeout(fn, 20);
-        };
     // -----------------------------------------------------------------------
-    // :: Cross-browser resize element plugin
-    // :: Taken from ResizeSensor.js file from marcj/css-element-queries (MIT license)
-    // :: not all jQuerifided
+    // :: Cross-browser resize element plugin using sentinel iframe or
+    // :: resizeObserver
     // -----------------------------------------------------------------------
     $.fn.resizer = function(callback) {
         var unbind = arguments[0] === "unbind";
@@ -760,6 +752,7 @@
         }
         return this.each(function() {
             var $this = $(this);
+            var iframe;
             var callbacks;
             if (unbind) {
                 callbacks = $this.data('callbacks');
@@ -780,7 +773,12 @@
                             $this.removeData('observer');
                         }
                     } else {
-                        $this.find('.resizer').remove();
+                        iframe = $this.find('> iframe');
+                        if (iframe.length) {
+                            // just in case of memory leaks in IE
+                            $(iframe[0].contentWindow).off('resize').remove();
+                            iframe.remove();
+                        }
                     }
                 }
             } else if ($this.data('callbacks')) {
@@ -801,70 +799,13 @@
                     });
                     resizer.observe(this);
                     $this.data('observer', resizer);
-                    return;
-                }
-                //var iframe = $('<iframe/>').addClass('resizer').appendTo(this)[0];
-                var self = this;
-                resizer = $('<div/>').addClass('resizer').appendTo(this)[0];
-                var style =
-                    'position: absolute; left: 0; top: 0; right: 0; bottom: 0; ' +
-                    'overflow: hidden; z-index: -1; visibility: hidden;';
-                var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
-                resizer.style.cssText = style;
-                //iframe.style.cssText = style;
-                resizer.innerHTML =
-                    '<div class="resize-sensor-expand" style="' + style + '">' +
-                    '<div style="' + styleChild + '"></div>' + "</div>" +
-                    '<div class="resize-sensor-shrink" style="' + style + '">' +
-                    '<div style="' + styleChild + ' width: 200%; height: 200%"></div>' +
-                    "</div>";
-
-                var expand = resizer.childNodes[0];
-                var expandChild = expand.childNodes[0];
-                var shrink = resizer.childNodes[1];
-                var dirty, rafId, newWidth, newHeight;
-                var lastWidth = self.offsetWidth;
-                var lastHeight = self.offsetHeight;
-
-                var reset = function() {
-                    expandChild.style.width = '100000px';
-                    expandChild.style.height = '100000px';
-
-                    expand.scrollLeft = 100000;
-                    expand.scrollTop = 100000;
-
-                    shrink.scrollLeft = 100000;
-                    shrink.scrollTop = 100000;
-                };
-
-                reset();
-
-                var onResized = function() {
-                    rafId = 0;
-
-                    if (!dirty) {
-                        return;
-                    }
-
-                    lastWidth = newWidth;
-                    lastHeight = newHeight;
-                    callbacks.fire();
-                };
-                //$(iframe.contentWindow).on('resize', onResized);
-
-                var onScroll = function() {
-                    newWidth = self.offsetWidth;
-                    newHeight = self.offsetHeight;
-                    dirty = newWidth !== lastWidth || newHeight !== lastHeight;
-
-                    if (dirty && !rafId) {
-                        rafId = requestAnimationFrame(onResized);
-                    }
+                } else {
+                    iframe = $('<iframe/>').addClass('resizer').appendTo(this)[0];
 
-                    reset();
-                };
-                $(expand).on("scroll", onScroll);
-                $(shrink).on("scroll", onScroll);
+                    $(iframe.contentWindow).on('resize', function() {
+                        callbacks.fire();
+                    });
+                }
             }
         });
     };
@@ -7120,11 +7061,7 @@
             interpreters = new Stack($.extend({}, settings.extra, {
                 name: settings.name,
                 prompt: settings.prompt,
-                keypress: function keypress(e) {
-                    // resize event don't fire on keypress when scrollbar appear #378
-                    setTimeout(resize, 0);
-                    return settings.keypress(e);
-                },
+                keypress: settings.keypress,
                 keydown: settings.keydown,
                 resize: settings.onResize,
                 greetings: settings.greetings,