2.9.0 - Adding useTouchEvents

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

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+## Description
+
+A few sentences describing the overall goals of the pull request's commits.
+
+## Checks
+
+- [ ] Tests ( `npm run test -- --coverage` ) Coverage at `./coverage/lcov-report/index.html` should be 100%
+- [ ] Documentation ( `npm run docs` ) Coverage at `./docs/source.html` should be 100%

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.8.0
+ *   simple-keyboard v2.9.0
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6496,7 +6496,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6911,7 +6912,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6967,6 +6969,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7010,12 +7013,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -7269,9 +7274,9 @@
       "dev": true
     },
     "har-validator": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.2.tgz",
-      "integrity": "sha512-OFxb5MZXCUMx43X7O8LK4FKggEQx6yC5QPmOcBnYbJ9UjxEcMcrMbaR0af5HZpqeFopw2GwQRQi34ZXI7YLM5w==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
       "dev": true,
       "requires": {
         "ajv": "^6.5.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "scripts": {
@@ -52,6 +52,9 @@
     "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
+    "esdoc": "^1.1.0",
+    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
+    "esdoc-standard-plugin": "^1.0.0",
     "eslint": "5.6.0",
     "eslint-config-react-app": "^3.0.5",
     "eslint-loader": "2.1.1",
@@ -62,6 +65,7 @@
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.0",
+    "har-validator": "^5.1.3",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
@@ -86,10 +90,7 @@
     "webpack": "4.19.1",
     "webpack-dev-server": "3.1.9",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3",
-    "esdoc": "^1.1.0",
-    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
-    "esdoc-standard-plugin": "^1.0.0"
+    "workbox-webpack-plugin": "3.6.3"
   },
   "eslintConfig": {
     "extends": "react-app"

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,12 +701,22 @@ class SimpleKeyboard {
          */
         var buttonDOM = document.createElement('div');
         buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
-        buttonDOM.onclick = () => {
-          this.isMouseHold = false;
-          this.handleButtonClicked(button);
+        
+        if (useTouchEvents) {
+          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({