Build update

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.15.5
+ *   simple-keyboard v2.16.0
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -8,5 +8,5 @@
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *   
- */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:-webkit-flex;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-webkit-flex-grow:1;flex-grow:1;cursor:pointer}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
+ */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:-webkit-flex;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-webkit-flex-grow:1;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
 /*# sourceMappingURL=index.css.map */

build/css/simple-keyboard.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.15.5 (Non-minified build)
+ *   simple-keyboard v2.16.0 (Non-minified build)
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -48,6 +48,10 @@ html {
   cursor: pointer;
 }
 
+.simple-keyboard .hg-button span {
+  pointer-events: none;
+}
+
 /**
  * hg-theme-default theme
  */
@@ -81,7 +85,7 @@ html {
   font-size: inherit;
 }
 
-.simple-keyboard.hg-theme-default .hg-button:active {
+.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active {
   background: #e4e4e4;
 }
 

build/index.d.ts

@@ -111,6 +111,16 @@ declare module 'simple-keyboard' {
      */
     inputPattern?: any;
 
+    /**
+     * Instructs simple-keyboard to use touch events instead of click events.
+     */
+    useTouchEvents?: boolean;
+
+    /**
+     * Enable useTouchEvents automatically when touch device is detected.
+     */
+    autoUseTouchEvents?: boolean;
+
     /**
      * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
      */
@@ -121,6 +131,16 @@ declare module 'simple-keyboard' {
      */
     onChange?: (input: string) => any;
 
+    /**
+     * Executes the callback function before the first simple-keyboard render.
+     */
+    beforeFirstRender?: () => void;
+
+    /**
+     * Executes the callback function before a simple-keyboard render.
+     */
+    beforeRender?: () => void;
+
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */

build/simple-keyboard.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.15.5 (Non-minified build)
+ *   simple-keyboard v2.16.0 (Non-minified build)
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -347,14 +347,7 @@
      */        this.simpleKeyboardInstance = simpleKeyboardInstance;
         /**
      * Bindings
-     */        this.getButtonClass = this.getButtonClass.bind(this);
-        this.getButtonDisplayName = this.getButtonDisplayName.bind(this);
-        this.getUpdatedInput = this.getUpdatedInput.bind(this);
-        this.updateCaretPos = this.updateCaretPos.bind(this);
-        this.updateCaretPosAction = this.updateCaretPosAction.bind(this);
-        this.isMaxLengthReached = this.isMaxLengthReached.bind(this);
-        this.camelCase = this.camelCase.bind(this);
-        this.countInArray = this.countInArray.bind(this);
+     */        Utilities.bindMethods(Utilities, this);
       }
       /**
    * Adds default classes to a given button
@@ -660,12 +653,21 @@
           return Boolean(this.maxLengthReached);
         }
         /**
+   * Determines whether a touch device is being used
+   */      }, {
+        key: "isTouchDevice",
+        value: function isTouchDevice() {
+          return "ontouchstart" in window || navigator.maxTouchPoints;
+        }
+        /**
+   * Bind all methods in a given class
+   */      }, {
+        key: "camelCase",
+        /**
    * Transforms an arbitrary string to camelCase
    *
    * @param  {string} string The string to transform.
-   */      }, {
-        key: "camelCase",
-        value: function camelCase(string) {
+   */ value: function camelCase(string) {
           return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce(function(string, word) {
             return word.length ? string + word[0].toUpperCase() + word.slice(1) : string;
           });
@@ -682,6 +684,35 @@
             return n + (x === value);
           }, 0);
         }
+      } ], [ {
+        key: "bindMethods",
+        value: function bindMethods(myClass, instance) {
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
+          try {
+            for (var _iterator = Object.getOwnPropertyNames(myClass.prototype)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var myMethod = _step.value;
+              var excludeMethod = myMethod === "constructor" || myMethod === "bindMethods";
+              if (!excludeMethod) {
+                instance[myMethod] = instance[myMethod].bind(instance);
+              }
+            }
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+        }
       } ]);
       return Utilities;
     }();
@@ -809,6 +840,8 @@
      * @property {boolean} useButtonTag Render buttons as a button element instead of a div element.
      * @property {boolean} disableCaretPositioning A prop to ensure characters are always be added/removed at the end of the string.
      * @property {object} inputPattern Restrains input(s) change to the defined regular expression pattern.
+     * @property {boolean} useTouchEvents Instructs simple-keyboard to use touch events instead of click events.
+     * @property {boolean} autoUseTouchEvents Enable useTouchEvents automatically when touch device is detected.
      */        this.options = options;
         this.options.layoutName = this.options.layoutName || "default";
         this.options.theme = this.options.theme || "hg-theme-default";
@@ -819,28 +852,7 @@
      */        this.keyboardPluginClasses = "";
         /**
      * Bindings
-     */        this.handleButtonClicked = this.handleButtonClicked.bind(this);
-        this.syncInstanceInputs = this.syncInstanceInputs.bind(this);
-        this.clearInput = this.clearInput.bind(this);
-        this.getInput = this.getInput.bind(this);
-        this.setInput = this.setInput.bind(this);
-        this.replaceInput = this.replaceInput.bind(this);
-        this.clear = this.clear.bind(this);
-        this.dispatch = this.dispatch.bind(this);
-        this.addButtonTheme = this.addButtonTheme.bind(this);
-        this.removeButtonTheme = this.removeButtonTheme.bind(this);
-        this.getButtonElement = this.getButtonElement.bind(this);
-        this.handleCaret = this.handleCaret.bind(this);
-        this.caretEventHandler = this.caretEventHandler.bind(this);
-        this.onInit = this.onInit.bind(this);
-        this.onRender = this.onRender.bind(this);
-        this.render = this.render.bind(this);
-        this.loadModules = this.loadModules.bind(this);
-        this.handleButtonMouseUp = this.handleButtonMouseUp.bind(this);
-        this.handleButtonMouseDown = this.handleButtonMouseDown.bind(this);
-        this.handleButtonHold = this.handleButtonHold.bind(this);
-        this.onModulesLoaded = this.onModulesLoaded.bind(this);
-        this.inputPatternIsValid = this.inputPatternIsValid.bind(this);
+     */        services_Utilities.bindMethods(SimpleKeyboard, this);
         /**
      * simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`).
      * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.
@@ -953,7 +965,7 @@
      * @type {object} Time to wait until a key hold is detected
      */          }
           this.holdTimeout = setTimeout(function() {
-            if (_this2.isMouseHold && (!button.includes("{") && !button.includes("}") || button === "{bksp}" || button === "{space}" || button === "{tab}")) {
+            if (_this2.isMouseHold && (!button.includes("{") && !button.includes("}") || button === "{delete}" || button === "{backspace}" || button === "{bksp}" || button === "{space}" || button === "{tab}")) {
               if (_this2.options.debug) {
                 console.log("Button held:", button);
               }
@@ -1257,6 +1269,74 @@
           });
         }
         /**
+   * Process buttonTheme option
+   */      }, {
+        key: "getButtonTheme",
+        value: function getButtonTheme() {
+          var _this7 = this;
+          var buttonThemesParsed = {};
+          this.options.buttonTheme.forEach(function(themeObj) {
+            if (themeObj.buttons && themeObj.class) {
+              var themeButtons;
+              if (typeof themeObj.buttons === "string") {
+                themeButtons = themeObj.buttons.split(" ");
+              }
+              if (themeButtons) {
+                themeButtons.forEach(function(themeButton) {
+                  var themeParsed = buttonThemesParsed[themeButton];
+ // If the button has already been added
+                                    if (themeParsed) {
+                    // Making sure we don't add duplicate classes, even when buttonTheme has duplicates
+                    if (!_this7.utilities.countInArray(themeParsed.split(" "), themeObj.class)) {
+                      buttonThemesParsed[themeButton] = "".concat(themeParsed, " ").concat(themeObj.class);
+                    }
+                  } else {
+                    buttonThemesParsed[themeButton] = themeObj.class;
+                  }
+                });
+              }
+            } else {
+              console.warn('buttonTheme row is missing the "buttons" or the "class". Please check the documentation.');
+            }
+          });
+          return buttonThemesParsed;
+        }
+      }, {
+        key: "onTouchDeviceDetected",
+        value: function onTouchDeviceDetected() {
+          /**
+     * Processing autoTouchEvents
+     */ this.processAutoTouchEvents();
+          /**
+     * Disabling contextual window on touch devices
+     */          this.disableContextualWindow();
+        }
+        /**
+   * Disabling contextual window for hg-button
+   */ /* istanbul ignore next */      }, {
+        key: "disableContextualWindow",
+        value: function disableContextualWindow() {
+          window.oncontextmenu = function(event) {
+            if (event.target.classList.contains("hg-button")) {
+              event.preventDefault();
+              event.stopPropagation();
+              return false;
+            }
+          };
+        }
+        /**
+   * Process autoTouchEvents option
+   */      }, {
+        key: "processAutoTouchEvents",
+        value: function processAutoTouchEvents() {
+          if (this.options.autoUseTouchEvents) {
+            this.options.useTouchEvents = true;
+            if (this.options.debug) {
+              console.log("autoUseTouchEvents: Touch device detected, useTouchEvents enabled.");
+            }
+          }
+        }
+        /**
    * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
    */      }, {
         key: "onInit",
@@ -1272,6 +1352,29 @@
           }
         }
         /**
+   * Executes the callback function before a simple-keyboard render.
+   */      }, {
+        key: "beforeFirstRender",
+        value: function beforeFirstRender() {
+          /**
+     * Performing actions when touch device detected
+     */ if (this.utilities.isTouchDevice()) {
+            this.onTouchDeviceDetected();
+          }
+          if (typeof this.options.beforeFirstRender === "function") {
+            this.options.beforeFirstRender();
+          }
+        }
+        /**
+   * Executes the callback function before a simple-keyboard render.
+   */      }, {
+        key: "beforeRender",
+        value: function beforeRender() {
+          if (typeof this.options.beforeRender === "function") {
+            this.options.beforeRender();
+          }
+        }
+        /**
    * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
    */      }, {
         key: "onRender",
@@ -1296,15 +1399,15 @@
         /**
    * Load modules
    */ value: function loadModules() {
-          var _this7 = this;
+          var _this8 = this;
           if (Array.isArray(this.options.modules)) {
             this.options.modules.forEach(function(Module) {
               var module = new Module();
  /* istanbul ignore next */              if (module.constructor.name && module.constructor.name !== "Function") {
-                var classStr = "module-".concat(_this7.utilities.camelCase(module.constructor.name));
-                _this7.keyboardPluginClasses = _this7.keyboardPluginClasses + " ".concat(classStr);
+                var classStr = "module-".concat(_this8.utilities.camelCase(module.constructor.name));
+                _this8.keyboardPluginClasses = _this8.keyboardPluginClasses + " ".concat(classStr);
               }
-              module.init(_this7);
+              module.init(_this8);
             });
             this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded";
             this.render();
@@ -1318,45 +1421,28 @@
         /**
    * Renders rows and buttons as per options
    */ value: function render() {
-          var _this8 = this;
+          var _this9 = this;
           /**
      * Clear keyboard
      */          this.clear();
+          /**
+     * Calling beforeFirstRender
+     */          if (!this.initialized) {
+            this.beforeFirstRender();
+          }
+          /**
+     * Calling beforeRender
+     */          this.beforeRender();
           var layoutClass = "hg-layout-".concat(this.options.layoutName);
           var layout = this.options.layout || services_KeyboardLayout.getDefaultLayout();
           var useTouchEvents = this.options.useTouchEvents || false;
+          var useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
           /**
      * Account for buttonTheme, if set
-     */          var buttonThemesParsed = {};
-          if (Array.isArray(this.options.buttonTheme)) {
-            this.options.buttonTheme.forEach(function(themeObj) {
-              if (themeObj.buttons && themeObj.class) {
-                var themeButtons;
-                if (typeof themeObj.buttons === "string") {
-                  themeButtons = themeObj.buttons.split(" ");
-                }
-                if (themeButtons) {
-                  themeButtons.forEach(function(themeButton) {
-                    var themeParsed = buttonThemesParsed[themeButton];
- // If the button has already been added
-                                        if (themeParsed) {
-                      // Making sure we don't add duplicate classes, even when buttonTheme has duplicates
-                      if (!_this8.utilities.countInArray(themeParsed.split(" "), themeObj.class)) {
-                        buttonThemesParsed[themeButton] = "".concat(themeParsed, " ").concat(themeObj.class);
-                      }
-                    } else {
-                      buttonThemesParsed[themeButton] = themeObj.class;
-                    }
-                  });
-                }
-              } else {
-                console.warn('buttonTheme row is missing the "buttons" or the "class". Please check the documentation.');
-              }
-            });
-          }
+     */          var buttonThemesParsed = Array.isArray(this.options.buttonTheme) ? this.getButtonTheme() : {};
           /**
      * Adding themeClass, layoutClass to keyboardDOM
-     */          this.keyboardDOM.className += " ".concat(this.options.theme, " ").concat(layoutClass, " ").concat(this.keyboardPluginClasses);
+     */          this.keyboardDOM.className += " ".concat(this.options.theme, " ").concat(layoutClass, " ").concat(this.keyboardPluginClasses, " ").concat(useTouchEventsClass);
           /**
      * Iterating through each row
      */          layout[this.options.layoutName].forEach(function(row, rIndex) {
@@ -1368,35 +1454,35 @@
             /**
        * Iterating through each button in row
        */            rowArray.forEach(function(button, bIndex) {
-              var fctBtnClass = _this8.utilities.getButtonClass(button);
+              var fctBtnClass = _this9.utilities.getButtonClass(button);
               var buttonThemeClass = buttonThemesParsed[button];
-              var buttonDisplayName = _this8.utilities.getButtonDisplayName(button, _this8.options.display, _this8.options.mergeDisplay);
+              var buttonDisplayName = _this9.utilities.getButtonDisplayName(button, _this9.options.display, _this9.options.mergeDisplay);
               /**
          * Creating button
-         */              var buttonType = _this8.options.useButtonTag ? "button" : "div";
+         */              var buttonType = _this9.options.useButtonTag ? "button" : "div";
               var buttonDOM = document.createElement(buttonType);
               buttonDOM.className += "hg-button ".concat(fctBtnClass).concat(buttonThemeClass ? " " + buttonThemeClass : "");
               if (useTouchEvents) {
                 buttonDOM.ontouchstart = function(e) {
-                  _this8.handleButtonClicked(button);
-                  _this8.handleButtonMouseDown(button, e);
+                  _this9.handleButtonClicked(button);
+                  _this9.handleButtonMouseDown(button, e);
                 };
                 buttonDOM.ontouchend = function(e) {
-                  return _this8.handleButtonMouseUp();
+                  return _this9.handleButtonMouseUp();
                 };
                 buttonDOM.ontouchcancel = function(e) {
-                  return _this8.handleButtonMouseUp();
+                  return _this9.handleButtonMouseUp();
                 };
               } else {
                 buttonDOM.onclick = function() {
-                  _this8.isMouseHold = false;
-                  _this8.handleButtonClicked(button);
+                  _this9.isMouseHold = false;
+                  _this9.handleButtonClicked(button);
                 };
                 buttonDOM.onmousedown = function(e) {
-                  if (_this8.options.preventMouseDownDefault) {
+                  if (_this9.options.preventMouseDownDefault) {
                     e.preventDefault();
                   }
-                  _this8.handleButtonMouseDown(button, e);
+                  _this9.handleButtonMouseDown(button, e);
                 };
               }
               /**
@@ -1405,7 +1491,7 @@
               /**
          * Adding unique id
          * Since there's no limit on spawning same buttons, the unique id ensures you can style every button
-         */              var buttonUID = "".concat(_this8.options.layoutName, "-r").concat(rIndex, "b").concat(bIndex);
+         */              var buttonUID = "".concat(_this9.options.layoutName, "-r").concat(rIndex, "b").concat(bIndex);
               buttonDOM.setAttribute("data-skBtnUID", buttonUID);
               /**
          * Adding display label
@@ -1417,30 +1503,30 @@
               buttonDOM.appendChild(buttonSpanDOM);
               /**
          * Adding to buttonElements
-         */              if (!_this8.buttonElements[button]) {
-                _this8.buttonElements[button] = [];
+         */              if (!_this9.buttonElements[button]) {
+                _this9.buttonElements[button] = [];
               }
-              _this8.buttonElements[button].push(buttonDOM);
+              _this9.buttonElements[button].push(buttonDOM);
               /**
          * Appending button to row
          */              rowDOM.appendChild(buttonDOM);
             });
             /**
        * Appending row to keyboard
-       */            _this8.keyboardDOM.appendChild(rowDOM);
+       */            _this9.keyboardDOM.appendChild(rowDOM);
           });
           /**
      * Calling onRender
      */          this.onRender();
           if (!this.initialized) {
             /**
-       * Ensures that onInit is only called once per instantiation
+       * Ensures that onInit and beforeFirstRender are only called once per instantiation
        */ this.initialized = true;
             /**
        * Handling mouseup
        */            if (!useTouchEvents) {
               document.onmouseup = function() {
-                return _this8.handleButtonMouseUp();
+                return _this9.handleButtonMouseUp();
               };
             }
             /**

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.15.5",
+  "version": "2.16.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5041,7 +5041,7 @@
       "dependencies": {
         "globby": {
           "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
           "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
           "dev": true,
           "requires": {
@@ -5054,7 +5054,7 @@
           "dependencies": {
             "pify": {
               "version": "2.3.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
               "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
               "dev": true
             }
@@ -7000,7 +7000,7 @@
     },
     "finalhandler": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "dev": true,
       "requires": {
@@ -8650,7 +8650,7 @@
     },
     "http-errors": {
       "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "dev": true,
       "requires": {
@@ -11014,7 +11014,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -12050,7 +12050,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.15.5",
+  "version": "2.16.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/lib/components/Keyboard.js

@@ -604,9 +604,9 @@ class SimpleKeyboard {
   /**
    * Process buttonTheme option
    */
-  getButtonTheme(){
+  getButtonTheme() {
     let buttonThemesParsed = {};
-    
+
     this.options.buttonTheme.forEach(themeObj => {
       if (themeObj.buttons && themeObj.class) {
         let themeButtons;
@@ -643,12 +643,11 @@ class SimpleKeyboard {
         );
       }
     });
-    
 
     return buttonThemesParsed;
   }
 
-  onTouchDeviceDetected(){
+  onTouchDeviceDetected() {
     /**
      * Processing autoTouchEvents
      */
@@ -664,9 +663,9 @@ class SimpleKeyboard {
    * Disabling contextual window for hg-button
    */
   /* istanbul ignore next */
-  disableContextualWindow(){
-    window.oncontextmenu = (event) => {
-      if(event.target.classList.contains("hg-button")){
+  disableContextualWindow() {
+    window.oncontextmenu = event => {
+      if (event.target.classList.contains("hg-button")) {
         event.preventDefault();
         event.stopPropagation();
         return false;
@@ -677,12 +676,14 @@ class SimpleKeyboard {
   /**
    * Process autoTouchEvents option
    */
-  processAutoTouchEvents(){
-    if (this.options.autoUseTouchEvents){
+  processAutoTouchEvents() {
+    if (this.options.autoUseTouchEvents) {
       this.options.useTouchEvents = true;
 
       if (this.options.debug) {
-        console.log(`autoUseTouchEvents: Touch device detected, useTouchEvents enabled.`);
+        console.log(
+          `autoUseTouchEvents: Touch device detected, useTouchEvents enabled.`
+        );
       }
     }
   }
@@ -706,22 +707,24 @@ class SimpleKeyboard {
   /**
    * Executes the callback function before a simple-keyboard render.
    */
-  beforeFirstRender(){
+  beforeFirstRender() {
     /**
      * Performing actions when touch device detected
      */
-    if(this.utilities.isTouchDevice()){
+    if (this.utilities.isTouchDevice()) {
       this.onTouchDeviceDetected();
     }
 
-    if (typeof this.options.beforeFirstRender === "function") this.options.beforeFirstRender();
+    if (typeof this.options.beforeFirstRender === "function")
+      this.options.beforeFirstRender();
   }
 
   /**
    * Executes the callback function before a simple-keyboard render.
    */
-  beforeRender(){
-    if (typeof this.options.beforeRender === "function") this.options.beforeRender();
+  beforeRender() {
+    if (typeof this.options.beforeRender === "function")
+      this.options.beforeRender();
   }
 
   /**
@@ -804,7 +807,7 @@ class SimpleKeyboard {
     /**
      * Calling beforeFirstRender
      */
-    if(!this.initialized){
+    if (!this.initialized) {
       this.beforeFirstRender();
     }
 
@@ -821,12 +824,16 @@ class SimpleKeyboard {
     /**
      * Account for buttonTheme, if set
      */
-    let buttonThemesParsed = Array.isArray(this.options.buttonTheme) ? this.getButtonTheme() : {};
+    let buttonThemesParsed = Array.isArray(this.options.buttonTheme)
+      ? this.getButtonTheme()
+      : {};
 
     /**
      * Adding themeClass, layoutClass to keyboardDOM
      */
-    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses} ${useTouchEventsClass}`;
+    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${
+      this.keyboardPluginClasses
+    } ${useTouchEventsClass}`;
 
     /**
      * Iterating through each row

src/lib/services/Utilities.js

@@ -366,10 +366,10 @@ class Utilities {
   }
 
   /**
-   * Determines whether a touch device is being used 
+   * Determines whether a touch device is being used
    */
-  isTouchDevice(){
-    return 'ontouchstart' in window || navigator.maxTouchPoints;   
+  isTouchDevice() {
+    return "ontouchstart" in window || navigator.maxTouchPoints;
   }
 
   /**
@@ -377,10 +377,11 @@ class Utilities {
    */
   static bindMethods(myClass, instance) {
     for (let myMethod of Object.getOwnPropertyNames(myClass.prototype)) {
-        let excludeMethod = (myMethod === "constructor" || myMethod === "bindMethods");
-        if (!excludeMethod) {
-          instance[myMethod] = instance[myMethod].bind(instance);
-        }
+      let excludeMethod =
+        myMethod === "constructor" || myMethod === "bindMethods";
+      if (!excludeMethod) {
+        instance[myMethod] = instance[myMethod].bind(instance);
+      }
     }
   }