Add build for modern browsers (index.modern.js)

Bump css-loader from 6.2.0 to 6.4.0

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+    timezone: America/Montreal
+  open-pull-requests-limit: 10
+  versioning-strategy: increase

.github/workflows/main.yml

@@ -1,9 +1,15 @@
 name: Build
-on: [push]
+on:
+  push:
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
+    if: contains(github.ref, 'master')
     strategy:
       matrix:
         node-version: [12.x]

.github/workflows/mirroring.yml

@@ -1,15 +1,19 @@
 name: Mirroring
 
-on: [push, delete]
+on:
+  push:
+    branches:
+      - master
+  delete:
+    branches:
+      - master
 
 jobs:
   mirroring:
     runs-on: ubuntu-18.04
     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 }}
+      - 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 }}

.github/workflows/publish.yml

@@ -4,6 +4,10 @@ on:
   push:
     branches:
       - master
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**
 
 jobs:
   publish:
@@ -15,7 +19,7 @@ jobs:
           node-version: 12
       - run: npm install
       - run: npm run test -- --coverage --watchAll=false
-        
+
       - name: Setup GIT
         run: |
           git reset --hard
@@ -24,8 +28,8 @@ jobs:
           git config user.email "$GH_EMAIL"
           git config user.name "Francisco Hodge"
         env:
-            GH_EMAIL: ${{secrets.GH_EMAIL}}
-          
+          GH_EMAIL: ${{secrets.GH_EMAIL}}
+
       - name: Bump version
         run: |
           git reset --hard
@@ -36,10 +40,10 @@ jobs:
           git push "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY"
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          
+
       - name: npm publish
         run: |
           npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
           npm run trypublish
         env:
-            NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
+          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.github/workflows/pull_request.yml

@@ -1,22 +1,24 @@
-name: Build PR
-on: [pull_request]
+name: Build PR (Standard)
+
+on: pull_request
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
+    if: ${{ github.actor != 'dependabot[bot]' }}
     strategy:
       matrix:
         node-version: [12.x]
         os: [ubuntu-latest]
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node_version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node_version }}
-    - name: npm install, build, and test
-      run: |
-        npm install
-        npm run coverage
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node_version }}
+      - name: npm install, build, and test
+        run: |
+          npm install
+          npm run coverage
+        env:
+          CI: true

.github/workflows/pull_request_dependabot.yml

@@ -0,0 +1,48 @@
+name: Build PR (Dependabot)
+
+on: pull_request_target
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    strategy:
+      matrix:
+        node-version: [12.x]
+        os: [ubuntu-latest]
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node_version }}
+      - name: npm install, build, and test
+        run: |
+          npm install
+          npm run coverage
+        env:
+          CI: true
+      - name: Merge PR
+        if: success()
+        uses: "actions/github-script@v2"
+        with:
+          github-token: "${{ secrets.GH_KEY }}"
+          script: |
+            const pullRequest = context.payload.pull_request
+            const repository = context.repo
+
+            await github.pulls.merge({
+              merge_method: "merge",
+              owner: repository.owner,
+              pull_number: pullRequest.number,
+              repo: repository.repo,
+            })
+      - name: Reject PR
+        if: failure()
+        uses: peter-evans/close-pull@v1
+        with:
+          pull-request-number: ${{github.event.number}}
+          comment: "Closing PR due to failing tests."
+          delete-branch: true

README.md

@@ -18,10 +18,6 @@
   <a href="https://david-dm.org/hodgef/simple-keyboard">
     <img src="https://badgen.net/david/dep/hodgef/simple-keyboard" alt="coverage">
   </a>
-
-  <a href="https://codecov.io/gh/hodgef/simple-keyboard">
-    <img src="https://badgen.net/codecov/c/github/hodgef/simple-keyboard" alt="coverage">
-  </a>
 </p>
 
 <blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v3.2.1
+ *   simple-keyboard v3.3.0
  *   https://github.com/hodgef/simple-keyboard
  *
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.

build/types/components/Keyboard.d.ts

@@ -198,6 +198,10 @@ declare class SimpleKeyboard {
      * Event Handler: Select
      */
     handleSelect(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: SelectionChange
+     */
+    handleSelectionChange(event: KeyboardHandlerEvent): void;
     /**
      * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
      */

build/types/index.modern.d.ts

@@ -0,0 +1,2 @@
+import SimpleKeyboard from "./components/Keyboard";
+export default SimpleKeyboard;

build/types/interfaces.d.ts

@@ -108,9 +108,15 @@ export interface KeyboardOptions {
      */
     physicalKeyboardHighlight?: boolean;
     /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
      */
     physicalKeyboardHighlightPress?: boolean;
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */

package.json

@@ -1,12 +1,13 @@
 {
   "name": "simple-keyboard",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/types/index.d.ts",
   "scripts": {
     "start": "webpack serve --config webpack.config.demo.js",
-    "build": "webpack && tsc",
+    "build": "webpack && tsc && npm run build-modern",
+    "build-modern": "webpack --config webpack.config.modern.js",
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
     "prepare": "npm run build",
@@ -39,38 +40,38 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-typescript": "^7.14.6",
+    "@babel/plugin-transform-typescript": "^7.15.8",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.14.7",
-    "@types/jest": "^26.0.23",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
-    "autoprefixer": "^10.2.6",
+    "@babel/preset-env": "^7.15.8",
+    "@types/jest": "^27.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.33.0",
+    "autoprefixer": "^10.3.6",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-preset-minify": "^0.5.0",
-    "core-js": "^3.15.1",
-    "css-loader": "^5.2.6",
-    "eslint": "^7.29.0",
+    "core-js": "^3.18.2",
+    "css-loader": "^6.4.0",
+    "eslint": "^7.31.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.6.1",
+    "mini-css-extract-plugin": "^2.4.2",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.5",
-    "postcss-loader": "^6.1.0",
-    "prettier": "^2.3.2",
+    "postcss": "^8.3.9",
+    "postcss-loader": "^6.1.1",
+    "prettier": "^2.4.1",
     "prettier-webpack-plugin": "^1.2.0",
-    "style-loader": "^3.0.0",
-    "terser-webpack-plugin": "^5.1.4",
-    "typescript": "^4.3.4",
+    "style-loader": "^3.3.0",
+    "terser-webpack-plugin": "^5.2.4",
+    "typescript": "^4.4.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.40.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "4.0.0-beta.3"
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "4.3.1"
   },
   "jest": {
     "roots": [

src/lib/components/Keyboard.ts

@@ -1048,6 +1048,7 @@ class SimpleKeyboard {
       document.addEventListener("mouseup", this.handleMouseUp);
       document.addEventListener("touchend", this.handleTouchEnd);
       document.addEventListener("select", this.handleSelect);
+      document.addEventListener("selectionchange", this.handleSelectionChange);
     }
   }
 
@@ -1094,6 +1095,14 @@ class SimpleKeyboard {
     this.caretEventHandler(event);
   }
 
+  /**
+   * Event Handler: SelectionChange
+   */
+  /* istanbul ignore next */
+  handleSelectionChange(event: KeyboardHandlerEvent): void {
+    this.caretEventHandler(event);
+  }
+
   /**
    * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
    */
@@ -1143,7 +1152,10 @@ class SimpleKeyboard {
             `(${instance.keyboardDOMClass})`
           );
         }
-      } else if (instance.options.disableCaretPositioning || !isKeyboard) {
+      } else if (
+        (instance.options.disableCaretPositioning || !isKeyboard) &&
+        event?.type !== "selectionchange"
+      ) {
         /**
          * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
          */
@@ -1192,6 +1204,7 @@ class SimpleKeyboard {
     document.removeEventListener("mouseup", this.handleMouseUp);
     document.removeEventListener("touchend", this.handleTouchEnd);
     document.removeEventListener("select", this.handleSelect);
+    document.removeEventListener("selectionchange", this.handleSelectionChange);
     document.onpointerup = null;
     document.ontouchend = null;
     document.ontouchcancel = null;

src/lib/index.modern.ts

@@ -0,0 +1,2 @@
+import SimpleKeyboard from "./components/Keyboard";
+export default SimpleKeyboard;

src/lib/interfaces.ts

@@ -136,10 +136,17 @@ export interface KeyboardOptions {
     physicalKeyboardHighlight?: boolean;
 
     /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
      */
     physicalKeyboardHighlightPress?: boolean;
 
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
+
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */

src/lib/services/PhysicalKeyboard.ts

@@ -29,9 +29,22 @@ class PhysicalKeyboard {
     const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch((instance: any) => {
-      const buttonDOM =
-        instance.getButtonElement(buttonPressed) ||
-        instance.getButtonElement(`{${buttonPressed}}`);
+      const standardButtonPressed = instance.getButtonElement(buttonPressed);
+      const functionButtonPressed = instance.getButtonElement(
+        `{${buttonPressed}}`
+      );
+      let buttonDOM;
+      let buttonName;
+
+      if (standardButtonPressed) {
+        buttonDOM = standardButtonPressed;
+        buttonName = buttonPressed;
+      } else if (functionButtonPressed) {
+        buttonDOM = functionButtonPressed;
+        buttonName = `{${buttonPressed}}`;
+      } else {
+        return;
+      }
 
       if (buttonDOM) {
         buttonDOM.style.backgroundColor =
@@ -40,7 +53,11 @@ class PhysicalKeyboard {
           options.physicalKeyboardHighlightTextColor || "black";
 
         if (options.physicalKeyboardHighlightPress) {
-          buttonDOM.click();
+          if (options.physicalKeyboardHighlightPressUseClick) {
+            buttonDOM.click();
+          } else {
+            instance.handleButtonClicked(buttonName, event);
+          }
         }
       }
     });

webpack.config.modern.js

@@ -0,0 +1,75 @@
+/**
+ * Config to support modern browsers only (build/index.modern.js)
+ */
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const getPackageJson = require('./scripts/getPackageJson');
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author,
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version} (index.modern.js - Modern Browsers bundle)
+  ${repository.url}
+
+  NOTE: This modern browsers bundle (index.modern.js) removes all polyfills
+  included in the standard version. Use this if you are supporting
+  modern browsers only. Otherwise, use the standard version (index.js).
+
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")} and project contributors.
+
+  This source code is licensed under the ${license} license found in the
+  LICENSE file in the root directory of this source tree.
+`;
+
+module.exports = {
+  mode: "production",
+  entry: './src/lib/index.modern.ts',
+  target: 'es5',
+  output: {
+    filename: 'index.modern.js',
+    path: path.resolve(__dirname, 'build'),
+    library: "SimpleKeyboard",
+    libraryTarget: 'umd',
+    globalObject: 'this'
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+    ],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?(j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ["@babel/env"]
+            ],
+            plugins: [
+              ["@babel/plugin-proposal-class-properties"],
+              ["@babel/plugin-transform-typescript"]
+            ]
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.IgnorePlugin({ resourceRegExp: /\.(sa|sc|c)ss$/ }),
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};