From 8e513cbb7057410614352d9137004fdd5e66bb8d Mon Sep 17 00:00:00 2001
From: cpsdqs <cpsdqs@gmail.com>
Date: Sun, 24 Sep 2017 21:34:59 +0200
Subject: [PATCH] kb ext bar: mark modifier key as modifier, add Esc

---
 js/term/soft_keyboard.js | 15 +++++++++++++--
 sass/pages/_term.scss    |  5 +++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/js/term/soft_keyboard.js b/js/term/soft_keyboard.js
index 73ed82e..55bfa82 100644
--- a/js/term/soft_keyboard.js
+++ b/js/term/soft_keyboard.js
@@ -117,14 +117,17 @@ module.exports = function (screen, input) {
 
   // shortcut bar
   const shortcuts = {
+    Control: 'ctrl',
+    Esc: 0x1b,
     Tab: 0x09,
     '←': 0x25,
     '↓': 0x28,
     '↑': 0x26,
-    '→': 0x27,
-    Control: 'ctrl'
+    '→': 0x27
   }
 
+  let touchMoved = false
+
   for (const shortcut in shortcuts) {
     const button = document.createElement('button')
     button.classList.add('shortcut-button')
@@ -132,22 +135,30 @@ module.exports = function (screen, input) {
     shortcutBar.appendChild(button)
 
     const key = shortcuts[shortcut]
+    if (typeof key === 'string') button.classList.add('modifier')
     button.addEventListener('touchstart', e => {
+      touchMoved = false
       if (typeof key === 'string') {
         // modifier button
         input.softModifiers[key] = true
+        button.classList.add('enabled')
 
         // prevent default. This prevents scrolling, but also prevents the
         // selection popup
         e.preventDefault()
       }
     })
+    window.addEventListener('touchmove', e => {
+      touchMoved = true
+    })
     button.addEventListener('touchend', e => {
       e.preventDefault()
       if (typeof key === 'number') {
+        if (touchMoved) return
         let fakeEvent = { which: key, preventDefault: () => {} }
         input.handleKeyDown(fakeEvent)
       } else if (typeof key === 'string') {
+        button.classList.remove('enabled')
         input.softModifiers[key] = false
       }
     })
diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss
index e079d3e..191fd72 100755
--- a/sass/pages/_term.scss
+++ b/sass/pages/_term.scss
@@ -229,6 +229,11 @@ body.term {
 		margin: 0 10px 0 0;
 		font-family: -apple-system, sans-serif;
 		min-width: 2em;
+
+		&.modifier:not(.enabled) {
+			background: #9ea6b1;
+			color: #000;
+		}
 	}
 }