fix mobile jumping #914

Author: jcubic

css/jquery.terminal-src.css

@@ -101,6 +101,11 @@ body.terminal, body.full-screen-terminal {
 body.full-screen-terminal .terminal {
     height: 100%;
 }
+body.full-screen-terminal {
+    height: 100%;
+    height: 100dvh;
+    height: calc(var(--terminal-force-height) * 1px);
+}
 .terminal > div.terminal-fill {
     min-height: 100%;
     height: 100%;
@@ -1115,17 +1120,16 @@ terminal .terminal-output > div {
     display: inline-block;
 }
 .cmd-editable {
-    position: absolute;
+    position: fixed;
     top: 0;
-    top: calc(var(--terminal-y, var(--cmd-y, 0)) + var(--terminal-scroll, 0) * 1px);
     right: 0;
     left: 0;
     bottom: 0;
-    bottom: calc(var(--terminal-scroll, 0) * -1px);
     z-index: 500;
     color: transparent;
     background: transparent;
     opacity: 0.01;
+    outline: 0px solid transparent;
 }
 /* Scrollbar */
 .terminal-scroller::-webkit-scrollbar {

js/jquery.terminal-src.js

@@ -2368,7 +2368,9 @@
                 }
                 var tmp = command;
                 // fix scroll the page where there is no scrollbar
-                clip.$node.blur();
+                if (!is_mobile) {
+                    clip.$node.blur();
+                }
                 history.reset();
 
                 // for next input event on firefox/android with google keyboard
@@ -2388,7 +2390,9 @@
                 }
                 self.set('');
                 clip.val('');
-                clip.$node.focus();
+                if (!is_mobile) {
+                    clip.$node.focus();
+                }
                 return false;
             },
             'SHIFT+ENTER': function() {
@@ -5284,6 +5288,21 @@
         }
     }
     // -------------------------------------------------------------------------
+    // :: handler to trigger when window change size. The most important
+    // :: is that it's triggers when virtual keyboard is toggled
+    // -------------------------------------------------------------------------
+    function on_height_change(callback) {
+        var height = window.visualViewport.height;
+        callback(height);
+        window.visualViewport.addEventListener('resize', function() {
+            var newHeight = window.visualViewport.height;
+            if (height !== newHeight) {
+                height = newHeight;
+                callback(height);
+            }
+        });
+    }
+    // -------------------------------------------------------------------------
     $.terminal = {
         version: '{{VER}}',
         date: '{{DATE}}',
@@ -10630,9 +10649,9 @@
                                 '--terminal-height': self.height(),
                                 '--terminal-x': offset.left - self_offset.left,
                                 '--terminal-y': offset.top - self_offset.top,
-                                '--terminal-scroll': self.prop('scrollTop')
+                                '--terminal-scroll': scroller.prop('scrollTop')
                             });
-                            if (enabled) {
+                            if (enabled && !is_mobile) {
                                 // Firefox won't reflow the cursor automatically, so
                                 // hide it briefly then reshow it
                                 cmd_cursor.hide();
@@ -12021,6 +12040,9 @@
                                 if (!enabled) {
                                     clip.focus();
                                     self.focus();
+                                    setTimeout(function() {
+                                        self.scroll_to_bottom();
+                                    }, 100);
                                 } else {
                                     clip.blur();
                                     self.disable();
@@ -12031,6 +12053,13 @@
                         start = null;
                     });
                 })();
+                if ('visualViewport' in window) {
+                    on_height_change(function(height) {
+                        css(document.documentElement, {
+                            '--terminal-force-height': height
+                        });
+                    });
+                }
             } else {
                 // work weird on mobile
                 $win.on('focus.terminal_' + self.id(), focus_terminal).
@@ -12536,7 +12565,7 @@
                         ret = settings.touchscroll(event, delta, self);
                     }
                     css(self[0], {
-                        '--terminal-scroll': self.prop('scrollTop')
+                        '--terminal-scroll': scroller.prop('scrollTop')
                     });
                     if (ret === true) {
                         return;