Added getElementFocusListener method, keysCallback and keysBackspaceCallback

.dev/dev-allinone.js

@@ -2,9 +2,9 @@
 * All In One Generator
 *
 * Description: Creates "kioskboard-aio.js" file automatically from "kioskboard.js" and "kioskboard.css" files.
-* Version: 2.3.0
+* Version: 2.3.3
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 All In One Generator, MIT Licence ('https://opensource.org/licenses/MIT')
+* Copyright 2023 All In One Generator, MIT Licence ('https://opensource.org/licenses/MIT')
 */
 
 // Dev Dependencies

.dev/dev-constants.js

@@ -1,9 +1,9 @@
 /*!
 * Constants
 * Description: Constants for the development.
-* Version: 2.3.0
+* Version: 2.3.3
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 Constants, MIT Licence ('https://opensource.org/licenses/MIT')
+* Copyright 2023 Constants, MIT Licence ('https://opensource.org/licenses/MIT')
 */
 
 // Dev Dependencies

.dev/dev-minifier.js

@@ -2,9 +2,9 @@
 * Minifier
 *
 * Description: Minify the KioskBoard scripts, and clean the KioskBoard styles to the distribution. (Used "Babel Minify", and "Clean CSS")
-* Version: 2.3.0
+* Version: 2.3.3
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 Minifier, MIT Licence ('https://opensource.org/licenses/MIT')
+* Copyright 2023 Minifier, MIT Licence ('https://opensource.org/licenses/MIT')
 */
 
 // Dev Dependencies

.gitignore

@@ -1,3 +1,4 @@
+package-lock.json
 
 # Node Modules
 node_modules/

README.md

@@ -3,15 +3,13 @@
 </p>
 
 [npm-version-badge]: https://img.shields.io/npm/v/kioskboard.svg
-[npm-version-url]: https://www.npmjs.com/package/kioskboard
 [synk-badge]: https://snyk.io/test/github/furcan/KioskBoard/badge.svg?targetFile=package.json
 [synk-url]: https://snyk.io/test/github/furcan/KioskBoard?targetFile=package.json
 [typescript-badge]: https://badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=3178c6&color=555
 [typescript-url]: https://github.com/furcan/KioskBoard/blob/main/index.d.ts
 [lic-badge]: https://img.shields.io/github/license/furcan/KioskBoard.svg
 [lic-url]: https://github.com/furcan/KioskBoard/blob/main/LICENSE
 
-[![NPM Version][npm-version-badge]][npm-version-url]
 [![Known Vulnerabilities][synk-badge]][synk-url]
 [![TypeScript][typescript-badge]][typescript-url]
 [![License][lic-badge]][lic-url]
@@ -22,7 +20,7 @@ A pure JavaScript library for using virtual keyboards.
 ---------
 
 ## Current Version
-2.3.0 [*](https://github.com/furcan/KioskBoard/blob/main/CHANGELOG.md)
+2.3.3 [*](https://github.com/furcan/KioskBoard/blob/main/CHANGELOG.md)
 
 ---------
 
@@ -59,15 +57,15 @@ import KioskBoard from 'kioskboard';
 ### CSS and JS
 
 ```html
-<link rel="stylesheet" href="dist/kioskboard-2.3.0.min.css" />
+<link rel="stylesheet" href="dist/kioskboard-2.3.3.min.css" />
 
-<script src="dist/kioskboard-2.3.0.min.js"></script>
+<script src="dist/kioskboard-2.3.3.min.js"></script>
 ```
 
 ### Or only JS (All in One - Internal CSS)
 
 ```html
-<script src="dist/kioskboard-aio-2.3.0.min.js"></script>
+<script src="dist/kioskboard-aio-2.3.3.min.js"></script>
 ```
 
 ---------
@@ -198,6 +196,12 @@ KioskBoard.init({
   // Size of the icon keys
   keysIconSize: '25px',
 
+  // The callback function of all the keys. This function will be called when any key has been clicked.
+  keysCallback: undefined,
+
+  // The callback function of the Backspace key. This function will be called when the backspace key has been clicked.
+  keysBackspaceCallback: undefined,
+
   // Text of the Enter key (Enter/Return). Without text => " "
   keysEnterText: 'Enter',
 
@@ -268,7 +272,7 @@ An example of a JSON file (for custom keys) in English.
 ---------
 
 ## Copyright
-Copyright © 2022 KioskBoard - Virtual Keyboard
+Copyright © 2023 KioskBoard - Virtual Keyboard
 
 ## License
 MIT license - https://opensource.org/licenses/MIT

build/kioskboard-aio.js

@@ -1,9 +1,9 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
 * Description: This file contains the KioskBoard CSS codes as internal to use the KioskBoard as one file. This file has been created automatically from using the "kioskboard.js", and "kioskboard.css" files.
-* Version: 2.3.0
+* Version: 2.3.3
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
+* Copyright 2023 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
 
 /* global define */
@@ -66,13 +66,16 @@
     keysFontSize: '22px',
     keysFontWeight: 'normal',
     keysIconSize: '25px',
+    keysCallback: undefined,
+    keysBackspaceCallback: undefined,
     keysEnterText: 'Enter',
     keysEnterCallback: undefined,
     keysEnterCanClose: true,
   };
   var kioskBoardCachedKeys;
   var kioskBoardNewOptions;
   var kioskBoardGithubUrl = 'https://github.com/furcan/KioskBoard';
+  var kioskBoardElementsWithFocusListener = {};
   var kioskBoardSpecialCharacters = {
     '0': '!',
     '1': '\'',
@@ -663,6 +666,10 @@
                     // input trigger change event for update the value
                     input.dispatchEvent(changeEvent);
                   }
+
+                  if (typeof opt.keysCallback === 'function') {
+                    opt.keysCallback();
+                  }
                 });
               }
             }
@@ -716,6 +723,10 @@
 
                 // input trigger change event for update the value
                 input.dispatchEvent(changeEvent);
+
+                if (typeof opt.keysBackspaceCallback === 'function') {
+                  opt.keysBackspaceCallback();
+                }
               });
             }
             // backspace key click listener: end
@@ -876,6 +887,9 @@
           // append keyboard: end
         };
         input.addEventListener('focus', inputFocusListener); // add input focus listener
+        if (input.id) {
+          kioskBoardElementsWithFocusListener[input.id] = inputFocusListener;
+        }
         // each input focus listener: end
 
         // each input focusout listener: begin
@@ -947,6 +961,9 @@
       }
       // Step 3: Select the element(s): end
     },
+    getElementFocusListener: function (elementId) {
+      return kioskBoardElementsWithFocusListener[elementId];
+    },
   };
 
   return KioskBoard;

docs/index.css

@@ -1,8 +1,8 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.3.0
+* Version: 2.3.3
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
+* Copyright 2023 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
 
 /* Reset on */

docs/index.html

@@ -24,9 +24,9 @@
   <link id="FontConsolas" href="https://fonts.googleapis.com/css?family=Inconsolata:400,700&amp;subset=latin-ext" rel="stylesheet">
 
   <!-- <link rel="stylesheet" href="../src/kioskboard.css" /> -->
-  <!-- <link rel="stylesheet" href="../dist/kioskboard-2.3.0.min.css" /> -->
+  <!-- <link rel="stylesheet" href="../dist/kioskboard-2.3.3.min.css" /> -->
 
-  <link rel="stylesheet" href="index.css?v=2.3.0" />
+  <link rel="stylesheet" href="index.css?v=2.3.3" />
 </head>
 
 <body>
@@ -55,7 +55,7 @@
       <h1 class="title">KioskBoard<i class="fab fa-js-square"></i></h1>
       <h4 class="sub-title">Virtual Keyboard</h4>
       <p class="desc">A pure JavaScript library for using virtual keyboards.</p>
-      <p class="version" data-toggle="tooltip" title="Current Version">v2.3.0</p>
+      <p class="version" data-toggle="tooltip" title="Current Version">v2.3.3</p>
       <div class="browser-compatibility">
         <h5 class="bc-title">Browser Compatibility</h5>
         <ul class="bc-ul">
@@ -207,15 +207,15 @@ <h2 class="sec-title">Adding to an HTML</h2>
         <code class="html">
           <span class="label">HTML <span class="desc">CSS and JS</span></span>
 
-          <span class="l1">&lt;<span class="link">link</span> <span class="data">rel=<span class="str">"stylesheet"</span></span> <span class="data">href=<span class="str">"dist/kioskboard-2.3.0.min.css"</span></span> /&gt;</span>
+          <span class="l1">&lt;<span class="link">link</span> <span class="data">rel=<span class="str">"stylesheet"</span></span> <span class="data">href=<span class="str">"dist/kioskboard-2.3.3.min.css"</span></span> /&gt;</span>
 
-          <span class="l1">&lt;<span class="link">script</span> <span class="data">src=<span class="str">"dist/kioskboard-2.3.0.min.js"</span></span>&gt;&lt;/<span class="link">script</span>&gt;</span>
+          <span class="l1">&lt;<span class="link">script</span> <span class="data">src=<span class="str">"dist/kioskboard-2.3.3.min.js"</span></span>&gt;&lt;/<span class="link">script</span>&gt;</span>
         </code>
 
         <code class="html">
           <span class="label">HTML <span class="desc">Only JS (Internal CSS)</span></span>
 
-          <span class="l1">&lt;<span class="link">script</span> <span class="data">src=<span class="str">"dist/kioskboard-aio-2.3.0.min.js"</span></span>&gt;&lt;/<span class="link">script</span>&gt;</span>
+          <span class="l1">&lt;<span class="link">script</span> <span class="data">src=<span class="str">"dist/kioskboard-aio-2.3.3.min.js"</span></span>&gt;&lt;/<span class="link">script</span>&gt;</span>
         </code>
       </div>
 
@@ -368,6 +368,12 @@ <h2 class="sec-title">Run / Initialize</h2>
           <span class="l1 l2 cmmnt">// Size of the icon keys</span>
           <span class="l1 l2"><span class="fnc1">keysIconSize:</span> <span class="str">'25px'</span>,</span>
 
+          <span class="l1 l2 cmmnt">// The callback function of all the keys. This function will be called when any key has been clicked.</span>
+          <span class="l1 l2"><span class="fnc1">keysCallback:</span> <span class="bool">undefined</span>,</span>
+
+          <span class="l1 l2 cmmnt">// The callback function of the Backspace key. This function will be called when the backspace key has been clicked.</span>
+          <span class="l1 l2"><span class="fnc1">keysBackspaceCallback:</span> <span class="bool">undefined</span>,</span>
+
           <span class="l1 l2 cmmnt">// Text of the Enter key (Enter/Return). Without text => " "</span>
           <span class="l1 l2"><span class="fnc1">keysEnterText:</span> <span class="str">'Enter'</span>,</span>
 
@@ -477,11 +483,11 @@ <h2 class="sec-title">Language (JSON)</h2>
 
   <!-- <script src="../src/kioskboard.js"></script> -->
   <!-- <script src="../build/kioskboard-aio.js"></script> -->
-  <!-- <script src="../dist/kioskboard-2.3.0.min.js"></script> -->
-  <!-- <script src="../dist/kioskboard-aio-2.3.0.min.js"></script> -->
+  <!-- <script src="../dist/kioskboard-2.3.3.min.js"></script> -->
+  <!-- <script src="../dist/kioskboard-aio-2.3.3.min.js"></script> -->
 
-  <script src="kioskboard-aio-2.3.0.min.js"></script>
-  <script src="index.js?v=2.3.0"></script>
+  <script src="kioskboard-aio-2.3.3.min.js"></script>
+  <script src="index.js?v=2.3.3"></script>
 </body>
 
 </html>

docs/index.js

@@ -1,8 +1,8 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.3.0
+* Version: 2.3.3
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
+* Copyright 2023 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
 
 // DEMO: Tooltip: begin

index.d.test.ts

@@ -42,6 +42,8 @@ KioskBoard.init({
   keysFontSize: '22px',
   keysFontWeight: 'normal',
   keysIconSize: '25px',
+  keysCallback: () => undefined,
+  keysBackspaceCallback: () => undefined,
   keysEnterText: 'Enter',
   keysEnterCanClose: false,
   keysEnterCallback: () => undefined,

index.d.ts

@@ -1,9 +1,9 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.3.0
+* Version: 2.3.3
 * Description: TypeScript Declaration.
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
+* Copyright 2023 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
 
 /**
@@ -149,6 +149,18 @@ declare namespace KioskBoard {
      */
     keysIconSize?: string;
 
+    /**
+     * @property {function} - Optional, The callback function of all the keys. This function will be called when any key has been clicked.
+     * @defaultValue `undefined`
+     */
+    keysCallback?: () => void;
+
+    /**
+     * @property {function} - Optional, The callback function of the Backspace key. This function will be called when the backspace key has been clicked.
+     * @defaultValue `undefined`
+     */
+    keysBackspaceCallback?: () => void;
+
     /**
      * @property {string} - Optional, Text of the Enter key (Enter/Return). Without text => `" "`
      * @defaultValue `Enter`
@@ -188,6 +200,13 @@ declare namespace KioskBoard {
     initOptions: IKioskBoardOptions,
   ): void;
 
+  /**
+    * This method can be used to get the focus listener of an element by its id.
+    * @function getElementFocusListener
+    * @memberof KioskBoard
+    * @param {string} elementId - Required, `KioskBoard.IKioskBoardOptions`.
+    */
+  function getElementFocusListener(elementId: string): function;
 }
 
 export = KioskBoard;

package.json

@@ -1,8 +1,8 @@
 {
   "name": "kioskboard",
-  "main": "dist/kioskboard-aio-2.3.0.min.js",
+  "main": "dist/kioskboard-aio-2.3.3.min.js",
   "types": "index.d.ts",
-  "version": "2.3.0",
+  "version": "2.3.3",
   "description": "A pure JavaScript library for using virtual keyboards.",
   "homepage": "https://github.com/furcan/KioskBoard",
   "files": [

src/kioskboard.css

@@ -1,8 +1,8 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.3.0
+* Version: 2.3.3
 * Author: Furkan ('https://github.com/furcan')
-* Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
+* Copyright 2023 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
 
 /* KioskBoard: Main: begin */