kioskboard - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

build/kioskboard-aio.d.ts

 import KioskBoard from '../index.d';
 export = KioskBoard;
 export as namespace KioskBoard;

dist/kioskboard-keys-arabic.json

@@ -0,0 +0,0 @@ [

dist/kioskboard-keys-english.json

@@ -0,0 +0,0 @@ [

dist/kioskboard-keys-hungarian.json

@@ -0,0 +0,0 @@ [

dist/kioskboard-keys-persian.json

@@ -0,0 +0,0 @@ [

dist/kioskboard-keys-russian.json

@@ -0,0 +0,0 @@ [

dist/kioskboard-keys-turkish.json

@@ -0,0 +0,0 @@ [

index.d.ts

 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.2.0
+* Version: 2.3.0
 * Description: TypeScript Declaration.
-* Author: Furkan MT ('https://github.com/furcan')
+* Author: Furkan ('https://github.com/furcan')
 * Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
@@ -73,2 +73,8 @@ */
     /**
+     * @property {boolean} - Optional, Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when `false`.
+     * @defaultValue `true`
+     */
+    autoScroll?: boolean;
+
+    /**
      * @property {boolean} - Optional, Uppercase or lowercase to start. Uppercased when `true`.
@@ -148,6 +154,18 @@ * @defaultValue `true`
     /**
-     * @property {boolean} - Optional, Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when `false`.
+     * @property {string} - Optional, Text of the Enter key (Enter/Return). Without text => `" "`
+     * @defaultValue `Enter`
+     */
+    keysEnterText?: string;
+
+    /**
+     * @property {function} - Optional, The callback function of the Enter key. This function will be called when the enter key has been clicked.
+     * @defaultValue `undefined`
+     */
+    keysEnterCallback?: () => void;
+
+    /**
+     * @property {boolean} - Optional, The Enter key can close and remove the keyboard. Prevented when `false`
      * @defaultValue `true`
      */
-    autoScroll?: boolean;
+    keysEnterCanClose?: boolean;
   }
@@ -154,0 +172,0 @@

package.json

 {
   "name": "kioskboard",
-  "main": "dist/kioskboard-aio-2.2.0.min.js",
+  "main": "dist/kioskboard-aio-2.3.0.min.js",
   "types": "index.d.ts",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A pure JavaScript library for using virtual keyboards.",
@@ -29,5 +29,5 @@ "homepage": "https://github.com/furcan/KioskBoard",
   },
-  "author": "Furkan MT (https://github.com/furcan)",
+  "author": "Furkan (https://github.com/furcan)",
   "contributors": [
-    "Furkan MT (https://github.com/furcan)"
+    "Furkan (https://github.com/furcan)"
   ],
@@ -34,0 +34,0 @@ "license": "MIT",

README.md

@@ -25,3 +25,3 @@ <p align="center">
 ## Current Version
-2.2.0 [*](https://github.com/furcan/KioskBoard/blob/main/CHANGELOG.md)
+2.3.0 [*](https://github.com/furcan/KioskBoard/blob/main/CHANGELOG.md)
 
@@ -63,5 +63,5 @@ ---------
 ```html
-<link rel="stylesheet" href="dist/kioskboard-2.2.0.min.css" />
+<link rel="stylesheet" href="dist/kioskboard-2.3.0.min.css" />
 
-<script src="dist/kioskboard-2.2.0.min.js"></script>
+<script src="dist/kioskboard-2.3.0.min.js"></script>
 ```
@@ -72,3 +72,3 @@
 ```html
-<script src="dist/kioskboard-aio-2.2.0.min.js"></script>
+<script src="dist/kioskboard-aio-2.3.0.min.js"></script>
 ```
@@ -162,2 +162,5 @@
 
+  // Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"
+  autoScroll: true,
+
   // Uppercase or lowercase to start. Uppercased when "true"
@@ -202,4 +205,10 @@ capsLockActive: true,
 
-  // Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"
-  autoScroll: true,
+  // Text of the Enter key (Enter/Return). Without text => " "
+  keysEnterText: 'Enter',
+
+  // The callback function of the Enter key. This function will be called when the enter key has been clicked.
+  keysEnterCallback: undefined,
+
+  // The Enter key can close and remove the keyboard. Prevented when "false"
+  keysEnterCanClose: true,
 });
@@ -206,0 +215,0 @@ ```

src/kioskboard.d.ts

 import KioskBoard from '../index.d';
 export = KioskBoard;
 export as namespace KioskBoard;

src/kioskboard.js

 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.2.0
-* Author: Furkan MT ('https://github.com/furcan')
+* Version: 2.3.0
+* Author: Furkan ('https://github.com/furcan')
 * Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
@@ -55,2 +55,3 @@ */
     theme: 'light', // "light" || "dark" || "flat" || "material" || "oldschool"
+    autoScroll: true,
     capsLockActive: true,
@@ -68,3 +69,5 @@ allowRealKeyboard: false,
     keysIconSize: '25px',
-    autoScroll: true,
+    keysEnterText: 'Enter',
+    keysEnterCallback: undefined,
+    keysEnterCanClose: true,
   };
@@ -124,3 +127,3 @@ var kioskBoardCachedKeys;
   };
-  var kioskBoardAllKeysObject = {
+  var kioskBoardAllKeysNumbersObject = {
     '0': '1',
@@ -403,2 +406,3 @@ '1': '2',
           var keysSpacebarText = typeof opt.keysSpacebarText === 'string' && opt.keysSpacebarText.length > 0 ? opt.keysSpacebarText : 'Space';
+          var keysEnterText = typeof opt.keysEnterText === 'string' && opt.keysEnterText.length > 0 ? opt.keysEnterText : 'Enter';
 
@@ -408,2 +412,3 @@ var spaceKey = '<span style="font-family:' + fontFamily + ',sans-serif;font-weight:' + fontWeight + ';font-size:' + fontSize + ';" class="kioskboard-key kioskboard-key-space ' + (keysAllowSpacebar ? 'spacebar-allowed' : 'spacebar-denied') + '" data-value="' + spaceKeyValue + '">' + keysSpacebarText + '</span>';
           var backspaceKey = '<span style="font-family:' + fontFamily + ',sans-serif;font-weight:' + fontWeight + ';font-size:' + fontSize + ';" class="kioskboard-key-backspace">' + kioskBoardIconBackspace(keysIconWidth, keysIconColor) + '</span>';
+          var enterKey = '<span style="font-family:' + fontFamily + ',sans-serif;font-weight:' + fontWeight + ';font-size:' + fontSize + ';" class="kioskboard-key-enter">' + keysEnterText + '</span>';
           // static keys: end
@@ -462,3 +467,3 @@
             }
-            keysRowElements += '<div class="kioskboard-row kioskboard-row-numpad">' + numpadKeysContent + backspaceKey + '</div>';
+            keysRowElements += '<div class="kioskboard-row kioskboard-row-numpad">' + numpadKeysContent + backspaceKey + enterKey + '</div>';
           }
@@ -472,6 +477,6 @@ // keyboard type is "numpad": end
               var numberKeysContent = '';
-              for (var key4 in kioskBoardAllKeysObject) {
-                if (Object.prototype.hasOwnProperty.call(kioskBoardAllKeysObject, key4)) {
+              for (var key4 in kioskBoardAllKeysNumbersObject) {
+                if (Object.prototype.hasOwnProperty.call(kioskBoardAllKeysNumbersObject, key4)) {
                   var index4 = key4;
-                  var value4 = kioskBoardAllKeysObject[key4];
+                  var value4 = kioskBoardAllKeysNumbersObject[key4];
                   var eachKey4 = '<span style="font-family:' + fontFamily + ',sans-serif;font-weight:' + fontWeight + ';font-size:' + fontSize + ';" class="kioskboard-key kioskboard-key-' + value4.toString() + '" data-index="' + index4.toString() + '" data-value="' + value4.toString() + '">' + value4.toString() + '</span>';
@@ -502,3 +507,3 @@ numberKeysContent += eachKey4;
             // bottom keys group: begin
-            keysRowElements += '<div class="kioskboard-row kioskboard-row-bottom ' + (allowedSpecialCharacters ? 'kioskboard-with-specialcharacter' : '') + '">' + capsLockKey + specialCharacterKey + spaceKey + backspaceKey + '</div>';
+            keysRowElements += '<div class="kioskboard-row kioskboard-row-bottom ' + (allowedSpecialCharacters ? 'kioskboard-with-specialcharacter' : '') + '">' + capsLockKey + specialCharacterKey + spaceKey + enterKey + backspaceKey + '</div>';
             // bottom keys group: end
@@ -543,4 +548,5 @@
           var theTheme = typeof opt.theme === 'string' && opt.theme.length > 0 ? opt.theme.trim() : 'light';
+          var kioskBoardVirtualKeyboardId = 'KioskBoard-VirtualKeyboard';
           var kioskBoardVirtualKeyboard = window.document.createElement('div');
-          kioskBoardVirtualKeyboard.id = 'KioskBoard-VirtualKeyboard';
+          kioskBoardVirtualKeyboard.id = kioskBoardVirtualKeyboardId;
           kioskBoardVirtualKeyboard.classList.add('kioskboard-theme-' + theTheme);
@@ -557,2 +563,21 @@ kioskBoardVirtualKeyboard.classList.add('kioskboard-placement-' + keyboardPlacement);
 
+          // remove the keyboard: begin
+          var removeKeyboard = function () {
+            // add remove class
+            var keyboardElm = window.document.getElementById(kioskBoardVirtualKeyboardId);
+            if (keyboardElm) {
+              keyboardElm.classList.add(cssAnimationsStyle + '-remove');
+
+              // remove after the animation has been ended
+              var removeTimeout = setTimeout(function () {
+                if (keyboardElm.parentNode !== null) {
+                  keyboardElm.parentNode.removeChild(keyboardElm); // remove keyboard
+                  window.document.body.classList.remove('kioskboard-body-padding'); // remove body padding class
+                }
+                clearTimeout(removeTimeout);
+              }, cssAnimationsDuration);
+            }
+          };
+          // remove the keyboard: end
+
           // event for input element trigger change: begin
@@ -604,3 +629,3 @@ var changeEvent = new Event('change', {
             // each key click listener: begin
-            var eachKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key');
+            var eachKeyElm = window.document.querySelectorAll('.kioskboard-key');
             if (eachKeyElm && eachKeyElm.length > 0) {
@@ -657,3 +682,3 @@ for (var ekIndex = 0; ekIndex < eachKeyElm.length; ekIndex++) {
             // capslock key click listener: begin
-            var capsLockKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-capslock')[0];
+            var capsLockKeyElm = window.document.querySelector('.kioskboard-key-capslock');
             if (capsLockKeyElm) {
@@ -681,3 +706,3 @@ keysEventListeners(capsLockKeyElm, function (e) {
             // backspace key click listener: begin
-            var backspaceKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-backspace')[0];
+            var backspaceKeyElm = window.document.querySelector('.kioskboard-key-backspace');
             if (backspaceKeyElm) {
@@ -706,3 +731,2 @@ keysEventListeners(backspaceKeyElm, function (e) {
                 input.dispatchEvent(changeEvent);
-
               });
@@ -713,4 +737,4 @@ }
             // specialcharacter key click listener: begin
-            var specialCharacterKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-specialcharacter')[0];
-            var specialCharactersRowElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-row-specialcharacters')[0];
+            var specialCharacterKeyElm = window.document.querySelector('.kioskboard-key-specialcharacter');
+            var specialCharactersRowElm = window.document.querySelector('.kioskboard-row-specialcharacters');
             // open
@@ -731,3 +755,3 @@ if (specialCharacterKeyElm && specialCharactersRowElm) {
             // close
-            var specialCharCloseElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-specialcharacter-close')[0];
+            var specialCharCloseElm = window.document.querySelector('.kioskboard-specialcharacter-close');
             if (specialCharCloseElm && specialCharacterKeyElm && specialCharactersRowElm) {
@@ -743,2 +767,15 @@ keysEventListeners(specialCharCloseElm, function (e) {
 
+            // enter key click listener: begin
+            var enterKeyElm = window.document.querySelector('.kioskboard-key-enter');
+            if (enterKeyElm) {
+              keysEventListeners(enterKeyElm, function () {
+                if (opt.keysEnterCanClose === true) {
+                  removeKeyboard();
+                }
+                if (typeof opt.keysEnterCallback === 'function') {
+                  opt.keysEnterCallback();
+                }
+              });
+            }
+            // enter key click listener: end
           };
@@ -748,7 +785,6 @@ // keys click listeners: end
           // append keyboard: begin
-          var keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id);
+          var keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboardId);
           if (!keyboardElement) {
             // append the keyboard to body and cache
             window.document.body.appendChild(kioskBoardVirtualKeyboard);
-            keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id);
 
@@ -758,5 +794,5 @@ // check window and keyboard height: begin
             var documentHeight = Math.round(window.document.body.clientHeight);
-            var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight);
+            var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboardId).offsetHeight);
             if (keyboardHeight > Math.round((windowHeight / 3) * 2)) {
-              var keyboardWrapper = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0];
+              var keyboardWrapper = window.document.querySelector('.kioskboard-wrapper');
               keyboardWrapper.style.maxHeight = Math.round((windowHeight / 5) * 4) + 'px';
@@ -771,8 +807,7 @@ keyboardWrapper.style.overflowX = 'hidden';
             var isPlacementTop = keyboardPlacement === kioskBoardPlacements.Top;
-            var inputTop = (isPlacementTop ? theInput.getBoundingClientRect().bottom : theInput.getBoundingClientRect().top) || 0;
+            var inputVisibleEdge = (isPlacementTop ? theInput.getBoundingClientRect().top : theInput.getBoundingClientRect().bottom) || 0;
             var docTop = window.document.documentElement.scrollTop || 0;
-            var inputThreshold = isPlacementTop ? (theInput.clientHeight + 20) : 50;
-            var theInputOffsetTop = Math.round(inputTop + docTop) - inputThreshold;
+            var theInputOffsetTop = Math.round(inputVisibleEdge + docTop);
             var isPaddingTop = (theInputOffsetTop < keyboardHeight) && isPlacementTop;
-            var isPaddingBottom = documentHeight <= (theInputOffsetTop + keyboardHeight);
+            var isPaddingBottom = documentHeight <= (theInputOffsetTop + keyboardHeight) && !isPlacementTop;
 
@@ -797,5 +832,8 @@ if (isPaddingTop || isPaddingBottom) {
             if (autoScroll) {
+              var inputThreshold = isPlacementTop ? 20 : 50;
+              var inputTop = theInput.getBoundingClientRect().top || 0;
+              var inputScrollOffsetTop = Math.round(inputTop + docTop);
               var scrollBehavior = opt.cssAnimations === true ? 'smooth' : 'auto';
               var scrollDelay = opt.cssAnimations === true && typeof opt.cssAnimationsDuration === 'number' ? opt.cssAnimationsDuration : 0;
-              var scrollTop = theInputOffsetTop - (isPlacementTop ? keyboardHeight : 0);
+              var scrollTop = inputScrollOffsetTop - inputThreshold - (isPlacementTop ? keyboardHeight : 0);
 
@@ -810,3 +848,3 @@ var userAgent = window.navigator.userAgent.toLocaleLowerCase('en');
                   if (isBrowserEdgeWebView) {
-                    window.scrollBy(0, theInputOffsetTop);
+                    window.scrollBy(0, inputScrollOffsetTop);
                   } else {
@@ -830,19 +868,11 @@ window.scrollTo({ top: scrollTop, left: 0, behavior: scrollBehavior });
                 // check event target to remove keyboard: begin
+                var keyboardElm = window.document.getElementById(kioskBoardVirtualKeyboardId);
                 if (
-                  e.target !== theInput &&
-                  !kioskBoardEventTargetIsElementOrChilds(e, keyboardElement) &&
-                  !e.target.classList.contains('kioskboard-body-padding')
+                  keyboardElm
+                  && e.target !== theInput
+                  && !kioskBoardEventTargetIsElementOrChilds(e, keyboardElm)
+                  && !e.target.classList.contains('kioskboard-body-padding')
                 ) {
-                  // add remove class
-                  kioskBoardVirtualKeyboard.classList.add(cssAnimationsStyle + '-remove');
-
-                  // remove after the animation has been ended
-                  var removeTimeout = setTimeout(function () {
-                    if (keyboardElement.parentNode !== null) {
-                      keyboardElement.parentNode.removeChild(keyboardElement); // remove keyboard
-                      window.document.body.classList.remove('kioskboard-body-padding'); // remove body padding class
-                      window.document.removeEventListener('click', docClickListener); // remove document click listener
-                    }
-                    clearTimeout(removeTimeout);
-                  }, cssAnimationsDuration);
+                  removeKeyboard();
+                  window.document.removeEventListener('click', docClickListener);
                 }
@@ -849,0 +879,0 @@ // check event target to remove keyboard: end

No alert changes

Improved metrics

Total package byte prevSize

232981

increased by0.49%

Lines of code

3051

increased by2.62%

Number of lines in readme file

275

increased by3.38%

No dependency changes