Build update

Bump autoprefixer from 10.4.23 to 10.4.24

.github/workflows/mirroring.yml

@@ -1,19 +0,0 @@
-name: Mirroring
-
-on:
-  push:
-    branches:
-      - master
-  delete:
-    branches:
-      - master
-
-jobs:
-  mirroring:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: pixta-dev/repository-mirroring-action@v1
-        with:
-          target_repo_url: git@gitlab.com:hodgef/simple-keyboard.git
-          ssh_private_key: ${{ secrets.GL_KEY }}

README.md

@@ -2,7 +2,7 @@
   <a href="https://simple-keyboard.com/demo">
 	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://user-images.githubusercontent.com/25509135/187999993-fb5422fd-a56f-4a9a-84a9-55c94478f61c.gif">
   </a>
-<a href="https://www.npmjs.com/package/simple-keyboard"><img src="https://badgen.net/npm/v/simple-keyboard?color=blue" alt="npm version"></a> <a href="https://github.com/hodgef/simple-keyboard/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="MIT license"></a> <a href="https://github.com/hodgef/simple-keyboard/actions"><img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg" /></a> <a href="https://github.com/hodgef/simple-keyboard/actions"><img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg" /></a> <a href="https://gitlab.com/hodgef/simple-keyboard" target="_blank"><img alt="Mirroring" src="https://github.com/hodgef/simple-keyboard/actions/workflows/mirroring.yml/badge.svg" /></a>
+<a href="https://www.npmjs.com/package/simple-keyboard"><img src="https://badgen.net/npm/v/simple-keyboard?color=blue" alt="npm version"></a> <a href="https://github.com/hodgef/simple-keyboard/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="MIT license"></a> <a href="https://gitlab.com/hodgef/simple-keyboard" target="_blank"><img alt="Mirroring" src="https://img.shields.io/badge/Mirror-GitLab-blue" /></a> <a href="https://github.com/hodgef/simple-keyboard/actions"><img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg" /></a> <a href="https://github.com/hodgef/simple-keyboard/actions"><img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg" /></a>
 </p>
 
 <blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
@@ -63,6 +63,10 @@ Want to create your own module? Check out the [Modules page](https://hodgef.com/
 
 > Note: If you don't want to support old browsers, you can use the Modern Browsers bundle ([index.modern.js](https://github.com/hodgef/simple-keyboard/blob/master/build)).
 
+## 🔶 Community Libraries & Integrations
+Check out useful community modules for simple-keyboard:<br />
+https://github.com/hodgef/simple-keyboard/wiki/Community-Libraries-&-Integrations
+
 ## ✅ Contributing
 
 PRs and issues are always welcome. Feel free to submit any issues you have at:

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v3.7.108
+ *   simple-keyboard v3.8.104
  *   https://github.com/hodgef/simple-keyboard
  *
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
@@ -8,4 +8,4 @@
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *
- */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}
+ */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span,.hg-theme-default .hg-button span svg{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}

build/interfaces.d.ts

@@ -13,7 +13,7 @@ export type KeyboardButtonTheme = {
 export interface KeyboardButtonAttributes {
     attribute: string;
     value: string;
-    buttons: string;
+    buttons?: string;
 }
 export interface KeyboardInput {
     [key: string]: string;
@@ -216,6 +216,14 @@ export interface KeyboardOptions {
      * Enables onKeyPress triggering for layoutCandidate items
      */
     enableLayoutCandidatesKeyPress?: boolean;
+    /**
+     * Updates caret when selectionchange event is fired
+     */
+    updateCaretOnSelectionChange?: boolean;
+    /**
+     * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
+     */
+    clickOnMouseDown?: boolean;
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */

build/services/Utilities.d.ts

@@ -197,5 +197,9 @@ declare class Utilities {
      * Reusable empty function
      */
     static noop: () => void;
+    /**
+     * Check if a function is a constructor
+     */
+    isConstructor(f: any): boolean;
 }
 export default Utilities;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "3.8.0",
+  "version": "3.8.104",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "scripts": {
@@ -39,36 +39,36 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/core": "^7.25.2",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-transform-typescript": "^7.25.2",
+    "@babel/plugin-transform-typescript": "^7.28.6",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.25.4",
-    "@types/jest": "^29.5.13",
+    "@babel/preset-env": "^7.29.0",
+    "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.24",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^9.2.1",
     "babel-preset-minify": "^0.5.2",
-    "core-js": "^3.38.1",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
+    "core-js": "^3.48.0",
+    "css-loader": "^7.1.3",
+    "css-minimizer-webpack-plugin": "^7.0.4",
     "eslint": "^8.57.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.6.0",
+    "html-webpack-plugin": "^5.6.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.9.1",
-    "postcss": "^8.4.45",
-    "postcss-loader": "^8.1.1",
+    "mini-css-extract-plugin": "^2.10.0",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "typescript": "^5.6.2",
+    "terser-webpack-plugin": "^5.3.16",
+    "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.3",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1",
     "webpack-dev-server": "4.15.0"
   },
   "jest": {

src/demo/BasicDemo.js

@@ -16,8 +16,9 @@ class Demo {
      * Demo Start
      */
     this.keyboard = new Keyboard({
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      useMouseEvents: true
     });
 
     /**
@@ -28,13 +29,13 @@ class Demo {
     });
   }
 
-  onChange(input) {
+  onChange = (input) => {
     document.querySelector(".input").value = input;
     console.log("Input changed", input);
   }
 
-  onKeyPress(button) {
-    console.log("Button pressed", button);
+  onKeyPress = (button, e) => {
+    console.log("Button pressed", button, e);
 
     /**
      * If you want to handle the shift and caps lock buttons
@@ -42,7 +43,11 @@ class Demo {
     if (button === "{shift}" || button === "{lock}") this.handleShift();
   }
 
-  handleShift() {
+  onKeyReleased = (button, e) => {
+    console.log("Button released", button, e);
+  }
+
+  handleShift = () => {
     const currentLayout = this.keyboard.options.layoutName;
     const shiftToggle = currentLayout === "default" ? "shift" : "default";
 

src/demo/index.js

@@ -3,18 +3,18 @@ import "./css/index.css";
 /**
  * Demos
  */
-//import BasicDemo from "./BasicDemo";
+import BasicDemo from "./BasicDemo";
 //import RTLDemo from "./RTLDemo";
 //import ButtonThemeDemo from "./ButtonThemeDemo";
 //import DOMElementDemo from "./DOMElementDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";
 //import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
-import CandidateBoxDemo from "./CandidateBoxDemo";
+//import CandidateBoxDemo from "./CandidateBoxDemo";
 
 /**
  * Selected demo
  */
-const SELECTED_DEMO = CandidateBoxDemo;
+const SELECTED_DEMO = BasicDemo;
 
 /**
  * Bootstrap

src/lib/components/Keyboard.ts

@@ -138,6 +138,7 @@ class SimpleKeyboard {
      * @property {boolean} disableCandidateNormalization Disables the automatic normalization for selected layout candidates
      * @property {boolean} enableLayoutCandidatesKeyPress Enables onKeyPress triggering for layoutCandidate items
      * @property {boolean} updateCaretOnSelectionChange Updates caret when selectionchange event is fired
+     * @property {boolean} clickOnMouseDown When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
      */
     this.options = {
       layoutName: "default",
@@ -1458,14 +1459,17 @@ class SimpleKeyboard {
           attrObj.attribute &&
           typeof attrObj.attribute === "string" &&
           attrObj.value &&
-          typeof attrObj.value === "string" &&
-          attrObj.buttons &&
-          typeof attrObj.buttons === "string"
+          typeof attrObj.value === "string"
         ) {
-          const attrObjButtons = attrObj.buttons.split(" ");
-
-          if (attrObjButtons.includes(button)) {
+          // If buttons is empty, undefined, or not a string, apply to all buttons
+          if (!attrObj.buttons || typeof attrObj.buttons !== "string") {
             callback(attrObj.attribute, attrObj.value);
+          } else {
+            const attrObjButtons = attrObj.buttons.split(" ");
+
+            if (attrObjButtons.includes(button)) {
+              callback(attrObj.attribute, attrObj.value);
+            }
           }
         } else {
           console.warn(
@@ -1495,7 +1499,7 @@ class SimpleKeyboard {
   /* istanbul ignore next */
   disableContextualWindow() {
     window.oncontextmenu = (event: KeyboardHandlerEvent) => {
-      if (event.target.classList.contains("hg-button")) {
+      if (event.target.classList?.contains("hg-button")) {
         event.preventDefault();
         event.stopPropagation();
         return false;
@@ -1613,7 +1617,9 @@ class SimpleKeyboard {
   loadModules() {
     if (Array.isArray(this.options.modules)) {
       this.options.modules.forEach((KeyboardModule) => {
-        const keyboardModule = new KeyboardModule(this);
+        const keyboardModule = this.utilities.isConstructor(KeyboardModule) ?
+          new KeyboardModule(this) : KeyboardModule(this);
+
         keyboardModule.init && keyboardModule.init(this);
       });
 
@@ -1687,7 +1693,7 @@ class SimpleKeyboard {
           updated_startIndex,
           updated_endIndex - updated_startIndex + 1
         );
-        removedElements = updated_endIndex - updated_startIndex;
+        removedElements += updated_endIndex - updated_startIndex;
 
         /**
          * Inserting elements to container
@@ -1948,7 +1954,10 @@ class SimpleKeyboard {
                  * This fires handler before onKeyReleased, therefore when that option is set we will fire the handler
                  * in onmousedown instead
                  */
-                if (typeof this.options.onKeyReleased !== "function") {
+                if (
+                  typeof this.options.onKeyReleased !== "function" &&
+                  !(this.options.useMouseEvents && this.options.clickOnMouseDown)
+                ) {
                   this.handleButtonClicked(button, e);
                 }
               };
@@ -1957,7 +1966,10 @@ class SimpleKeyboard {
                  * Fire button handler for onKeyReleased use-case
                  */
                 if (
-                  typeof this.options.onKeyReleased === "function" &&
+                  (
+                    typeof this.options.onKeyReleased === "function" ||
+                    (this.options.useMouseEvents && this.options.clickOnMouseDown)
+                  ) &&
                   !this.isMouseHold
                 ) {
                   this.handleButtonClicked(button, e);

src/lib/components/css/Keyboard.css

@@ -15,14 +15,15 @@
   border-radius: 5px;
 }
 
-.hg-theme-default .hg-button span {
+.hg-theme-default .hg-button span,
+.hg-theme-default .hg-button span svg
+ {
   pointer-events: none;
 }
 
 /* When using option "useButtonTag" */
 .hg-theme-default button.hg-button {
   border-width: 0;
-  outline: 0;
   font-size: inherit;
 }
 

src/lib/interfaces.ts

@@ -18,7 +18,7 @@ export type KeyboardButtonTheme = {
 export interface KeyboardButtonAttributes {
     attribute: string;
     value: string;
-    buttons: string;
+    buttons?: string;
 }
 
 export interface KeyboardInput {
@@ -270,6 +270,11 @@ export interface KeyboardOptions {
      */
     updateCaretOnSelectionChange?: boolean;
 
+    /**
+     * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
+     */
+    clickOnMouseDown?: boolean;
+
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */

src/lib/services/Utilities.ts

@@ -561,6 +561,18 @@ class Utilities {
    * Reusable empty function
    */
   static noop = () => {};
+
+  /**
+   * Check if a function is a constructor
+   */
+  isConstructor(f: any) {
+    try {
+      Reflect.construct(String, [], f);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  }
 }
 
 export default Utilities;