From 5b608d4f7173e16d676997e51027bd1bee88ea7b Mon Sep 17 00:00:00 2001
From: David Li <dawei.li@gmx.net>
Date: Sat, 2 Nov 2019 09:00:19 +0100
Subject: [PATCH] Visual feedback on mobile&desktop

---
 src/lib/components/Keyboard.css |  5 +++++
 src/lib/components/Keyboard.js  | 36 +++++++++++++++++++++++++++------
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Keyboard.css b/src/lib/components/Keyboard.css
index 8bb9d53c..744b43b2 100644
--- a/src/lib/components/Keyboard.css
+++ b/src/lib/components/Keyboard.css
@@ -69,6 +69,11 @@ html {
   display: flex;
   align-items: center;
   justify-content: center;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {
+  background: #a6a6a6;
 }
 
 /* When using option "useButtonTag" */
diff --git a/src/lib/components/Keyboard.js b/src/lib/components/Keyboard.js
index a3bad740..2b392786 100644
--- a/src/lib/components/Keyboard.js
+++ b/src/lib/components/Keyboard.js
@@ -84,6 +84,8 @@ class SimpleKeyboard {
     this.options.inputName = this.options.inputName || "default";
     this.options.preventMouseDownDefault =
       this.options.preventMouseDownDefault || false;
+    if (this.options.autUseTouchEvents === undefined)
+      this.options.autoUseTouchEvents = true;
 
     /**
      * @type {object} Classes identifying loaded plugins
@@ -1176,6 +1178,8 @@ class SimpleKeyboard {
           buttonDOM.setAttribute(attribute, value);
         });
 
+        const hgActiveButtonClass = "hg-activeButton";
+
         /**
          * Handle button click event
          */
@@ -1189,11 +1193,18 @@ class SimpleKeyboard {
            * Handle PointerEvents
            */
           buttonDOM.onpointerdown = e => {
+            buttonDOM.classList.add(hgActiveButtonClass);
             this.handleButtonClicked(button);
             this.handleButtonMouseDown(button, e);
           };
-          buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
-          buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
+          buttonDOM.onpointerup = () => {
+            buttonDOM.classList.remove(hgActiveButtonClass);
+            this.handleButtonMouseUp(button);
+          };
+          buttonDOM.onpointercancel = () => {
+            buttonDOM.classList.remove(hgActiveButtonClass);
+            this.handleButtonMouseUp(button);
+          };
         } else {
           /**
            * Fallback for browsers not supporting PointerEvents
@@ -1203,11 +1214,18 @@ class SimpleKeyboard {
              * Handle touch events
              */
             buttonDOM.ontouchstart = e => {
+              buttonDOM.classList.add(hgActiveButtonClass);
               this.handleButtonClicked(button);
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
-            buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
+            buttonDOM.ontouchend = () => {
+              buttonDOM.classList.remove(hgActiveButtonClass);
+              this.handleButtonMouseUp(button);
+            };
+            buttonDOM.ontouchcancel = () => {
+              buttonDOM.classList.remove(hgActiveButtonClass);
+              this.handleButtonMouseUp(button);
+            };
           } else {
             /**
              * Handle mouse events
@@ -1216,8 +1234,14 @@ class SimpleKeyboard {
               this.isMouseHold = false;
               this.handleButtonClicked(button);
             };
-            buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
-            buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
+            buttonDOM.onmousedown = e => {
+              buttonDOM.classList.add(hgActiveButtonClass);
+              this.handleButtonMouseDown(button, e);
+            };
+            buttonDOM.onmouseup = () => {
+              buttonDOM.classList.remove(hgActiveButtonClass);
+              this.handleButtonMouseUp(button);
+            };
           }
         }