Merge pull request #35 from MadDeveloper/tactile-touch-events

feat(Keyboard): add touch events (by @MadDeveloper)

src/lib/components/Keyboard.js

@@ -635,6 +635,7 @@ class SimpleKeyboard {
 
     let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
     let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
+    let useTouchEvents = this.options.useTouchEvents || false
 
     /**
      * Account for buttonTheme, if set
@@ -700,11 +701,21 @@ class SimpleKeyboard {
          */
         var buttonDOM = document.createElement('div');
         buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
-        buttonDOM.onclick = () => {
+        
-          this.isMouseHold = false;
+        if (useTouchEvents) {
-          this.handleButtonClicked(button);
+          buttonDOM.ontouchstart = (e) => {
+            this.handleButtonClicked(button);
+            this.handleButtonMouseDown(button, e);
+          }
+          buttonDOM.ontouchend = e => this.handleButtonMouseUp();
+          buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
+        } else {
+          buttonDOM.onclick = () => {
+            this.isMouseHold = false;
+            this.handleButtonClicked(button);
+          }
+          buttonDOM.onmousedown = (e) => this.handleButtonMouseDown(button, e);
         }
-        buttonDOM.onmousedown = (e) => this.handleButtonMouseDown(button, e);
         
         /**
          * Adding identifier
@@ -759,7 +770,9 @@ class SimpleKeyboard {
     /**
      * Handling mouseup
      */
-    document.onmouseup = () => this.handleButtonMouseUp();
+    if (!useTouchEvents) {
+      document.onmouseup = () => this.handleButtonMouseUp();
+    }
 
     if(!this.initialized){
       /**

src/lib/components/tests/Keyboard.test.js

@@ -45,6 +45,31 @@ it('Keyboard will run with debug option set', () => {
   expect(keyboard.options.debug).toBeTruthy();
 });
 
+it('Keyboard will use touch events', () => {
+  let touched = false
+
+  testUtil.clear()
+
+  document.body.innerHTML = `
+    <div id="keyboard"></div>
+  `;
+
+  const keyboard = new Keyboard('#keyboard', {
+    useTouchEvents: true,
+    onChange: () => touched = true,
+    layout: {
+      default: ["q"]
+    }
+  });
+
+  keyboard.getButtonElement("q").ontouchstart();
+  keyboard.getButtonElement("q").ontouchend();
+  
+  expect(keyboard.options.useTouchEvents).toBeTruthy();
+  expect(touched).toBeTruthy();
+  expect(keyboard.getInput()).toBe('q');
+})
+
 it('Keyboard standard buttons will work', () => {
   testUtil.setDOM();
   let keyboard = new Keyboard({