Mobile Paste #458

jcubic · Mar 14, 2020 · 371da3b · 371da3b
1 parent 3f4aef6
commit 371da3b
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 79 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## 2.15.0
 ### Features
 * add new API event touchscroll for mobile (use it in less) [#556](https://github.com/jcubic/jquery.terminal/issues/556)
+* mobile paste [#458](https://github.com/jcubic/jquery.terminal/issues/458)
 ### Bugfix
 * fix vertical bar cursor animation on empty command line
 * fix edge case while splitting the command line with formatting (better fix for [#379](https://github.com/jcubic/jquery.terminal/379))

diff --git a/css/jquery.terminal-2.14.1.css b/css/jquery.terminal-2.14.1.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2020 Jakub Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license
  *
- * Date: Tue, 10 Mar 2020 10:02:44 +0000
+ * Date: Sat, 14 Mar 2020 14:09:25 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -663,6 +663,7 @@ terminal .terminal-output > div {
 }
 .terminal .cmd {
     margin-bottom: 10px;
+    position: relative;
 }
 @supports (--css: variables) {
     .terminal,
@@ -920,3 +921,12 @@ terminal .terminal-output > div {
 .terminal-mobile .terminal-wrapper {
     pointer-events: none;
 }
+.cmd-editable {
+    position: absolute;
+    top: calc(var(--cmd-y, 0) * 1px);
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    opacity: 0.01;
+}
diff --git a/css/jquery.terminal-2.14.1.min.css b/css/jquery.terminal-2.14.1.min.css
diff --git a/css/jquery.terminal-src.css b/css/jquery.terminal-src.css
@@ -921,3 +921,12 @@ terminal .terminal-output > div {
 .terminal-mobile .terminal-wrapper {
     pointer-events: none;
 }
+.cmd-editable {
+    position: absolute;
+    top: calc(var(--cmd-y, 0) * 1px);
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    opacity: 0.01;
+}
diff --git a/css/jquery.terminal.css b/css/jquery.terminal.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2020 Jakub Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license
  *
- * Date: Tue, 10 Mar 2020 10:02:44 +0000
+ * Date: Sat, 14 Mar 2020 14:09:25 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -663,6 +663,7 @@ terminal .terminal-output > div {
 }
 .terminal .cmd {
     margin-bottom: 10px;
+    position: relative;
 }
 @supports (--css: variables) {
     .terminal,
@@ -920,3 +921,12 @@ terminal .terminal-output > div {
 .terminal-mobile .terminal-wrapper {
     pointer-events: none;
 }
+.cmd-editable {
+    position: absolute;
+    top: calc(var(--cmd-y, 0) * 1px);
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    opacity: 0.01;
+}
diff --git a/css/jquery.terminal.min.css b/css/jquery.terminal.min.css
diff --git a/css/jquery.terminal.min.css.map b/css/jquery.terminal.min.css.map
diff --git a/js/jquery.terminal-2.14.1.js b/js/jquery.terminal-2.14.1.js
@@ -41,11 +41,9 @@
  *
  * broken image by Sophia Bai from the Noun Project (CC-BY)
  *
- * Date: Sat, 14 Mar 2020 10:51:59 +0000
+ * Date: Sat, 14 Mar 2020 14:07:27 +0000
  */
-/* global location, setTimeout, window, global, sprintf, setImmediate,
-          IntersectionObserver,  ResizeObserver, module, require, define,
-          setInterval, clearInterval, clearTimeout, Blob, Map, Image */
+/* global define, Map */
 /* eslint-disable */
 /* istanbul ignore next */
 (function(ctx) {
@@ -1217,6 +1215,21 @@
         space.remove();
     });
     // -----------------------------------------------------------------------
+    // :: css helper that work with css variables
+    // :: jQuery css method from 3.4 support them by default
+    // -----------------------------------------------------------------------
+    function css(node, obj, value) {
+        if ($.isPlainObject(obj)) {
+            Object.keys(obj).forEach(function(key) {
+                node.style.setProperty(key, obj[key]);
+            });
+        } else if (typeof value === 'undefined') {
+            return node.style.getPropertyValue(obj);
+        } else {
+            node.style.setProperty(obj, value);
+        }
+    }
+    // -----------------------------------------------------------------------
     // :: hide elements from screen readers
     // -----------------------------------------------------------------------
     function a11y_hide(element) {
@@ -1597,12 +1610,26 @@
         // on mobile the only way to hide textarea on desktop it's needed because
         // textarea show up after focus
         //self.append('<span class="mask"></mask>');
-        var clip = $('<textarea>').attr({
-            autocapitalize: 'off',
-            spellcheck: 'false',
-            tabindex: settings.tabindex
-        }).addClass('cmd-clipboard').appendTo(self);
-        if (!is_mobile) {
+        var clip;
+        if (is_mobile) {
+            clip = $('<div class="cmd-editable" contenteditable/>').appendTo('body');
+            clip.val = function(value) {
+                if (value) {
+                    clip.html(value);
+                } else {
+                    return clip.text();
+                }
+            };
+            clip.on('focus', function() {
+                self.enable();
+            });
+            self.addClass('cmd-mobile');
+        } else {
+            clip = $('<textarea>').attr({
+                autocapitalize: 'off',
+                spellcheck: 'false',
+                tabindex: settings.tabindex
+            }).addClass('cmd-clipboard').appendTo(self);
             clip.val(' ');
         }
         if (settings.width) {
@@ -2283,7 +2310,7 @@
                         clip.trigger('focus', [true]);
                     }
                 });
-            } else if (focus && (is_mobile || !enabled)) {
+            } else if (focus && !enabled) {
                 clip.trigger('blur', [true]);
             }
         }
@@ -2346,7 +2373,7 @@
         // terminal animation don't work on android because they animate
         // 2 properties
         // -------------------------------------------------------------------------------
-        if (animation_supported) { // && !is_android) {
+        if (animation_supported && !is_android) {
             animation = function(toggle) {
                 if (toggle) {
                     cursor.addClass('cmd-blink');
@@ -3111,7 +3138,7 @@
                 doc.unbind('input.cmd', input_event);
                 self.stopTime('blink', blink);
                 self.find('.cmd-wrapper').remove();
-                self.find('.cmd-prompt, .cmd-clipboard').remove();
+                self.find('.cmd-prompt, .cmd-clipboard, .cmd-editable').remove();
                 self.removeClass('cmd').removeData('cmd').off('.cmd');
                 return self;
             },
@@ -3274,6 +3301,9 @@
                 doc.trigger(e);
                 return self;
             },
+            clip: function() {
+                return clip;
+            },
             enable: function(silent) {
                 if (!enabled) {
                     enabled = true;
@@ -4250,7 +4280,7 @@
     // -------------------------------------------------------------------------
     $.terminal = {
         version: 'DEV',
-        date: 'Sat, 14 Mar 2020 10:51:59 +0000',
+        date: 'Sat, 14 Mar 2020 14:07:27 +0000',
         // colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -8697,6 +8727,11 @@
                     limit_lines();
                     output.css('visibilty', '');
                     fire_event('onFlush');
+                    var position = self.find('.cmd').position();
+                    css(document.body, {
+                        '--cmd-x': position.left,
+                        '--cmd-y': position.top
+                    });
 
                     if ((settings.scrollOnEcho && options.scroll) || bottom) {
                         self.scroll_to_bottom();
@@ -9726,6 +9761,9 @@
                 commands: commands
             });
             function disable(e) {
+                if (is_mobile) {
+                    return;
+                }
                 e = e.originalEvent;
                 if (e) {
                     // e.terget is body when click outside of context menu to close it
@@ -9750,16 +9788,28 @@
             });
             // istanbul ignore next
             if (is_mobile) {
-                self.addClass('terminal-mobile').click(function() {
-                    if (!frozen) {
-                        if (!self.enabled()) {
-                            self.focus();
-                            command_line.enable();
-                        } else {
-                            self.disable();
+                (function() {
+                    self.addClass('terminal-mobile');
+                    var timer;
+                    self.on('touchstart.terminal', function() {
+                        if (!frozen) {
+                            if (!self.enabled()) {
+                                command_line.clip().css('top', 0);
+                                self.focus();
+                            } else {
+                                self.disable();
+                                command_line.clip().blur();
+                                // just in case of Webkit bug
+                                window.getSelection().removeAllRanges();
+                            }
                         }
-                    }
-                });
+                    }).on('touchend.terminal', function() {
+                        clearTimeout(timer);
+                        timer = setTimeout(function() {
+                            command_line.clip().css('top', '');
+                        }, 100);
+                    });
+                })();
             } else {
                 // work weird on mobile
                 $win.on('focus.terminal_' + self.id(), focus_terminal).

diff --git a/js/jquery.terminal-2.14.1.min.js b/js/jquery.terminal-2.14.1.min.js