Version 2.2.0

- #53
- #52
- #51
- #46

Author: furcan

.dev/dev-allinone.js

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

.dev/dev-constants.js

@@ -1,7 +1,7 @@
 /*!
 * Constants
 * Description: Constants for the development.
-* Version: 2.1.0
+* Version: 2.2.0
 * Author: Furkan MT ('https://github.com/furcan')
 * Copyright 2022 Constants, MIT Licence ('https://opensource.org/licenses/MIT')
 */

.dev/dev-minifier.js

@@ -2,7 +2,7 @@
 * Minifier
 *
 * Description: Minify the KioskBoard scripts, and clean the KioskBoard styles to the distribution. (Used "Babel Minify", and "Clean CSS")
-* Version: 2.1.0
+* Version: 2.2.0
 * Author: Furkan MT ('https://github.com/furcan')
 * Copyright 2022 Minifier, MIT Licence ('https://opensource.org/licenses/MIT')
 */
@@ -126,6 +126,5 @@ if (existsSync(Constants.dirInputDev) && existsSync(Constants.dirOutputDev)) { /
   // Script (All In One): end
 } else {
   Constants.terminalError(`The "${!existsSync(Constants.dirInputDev) ? Constants.dirInputDev : Constants.dirOutputDev}" directory does not exist in the root directory.`, `${thisFilePath} => Line: 128`);
-  return false;
 }
 // Minify: end

CHANGELOG.md

@@ -1,3 +1,12 @@
+@2.2.0
+* **Added:** Using KioskBoard in embedded webview - https://github.com/furcan/KioskBoard/pull/51 (Thanks [surexxx](https://github.com/surexxx))
+* **Added:** Add long press feature - https://github.com/furcan/KioskBoard/pull/53 (Thanks [surexxx](https://github.com/surexxx))
+* **Fixed:** Fix the autofocus behavior - https://github.com/furcan/KioskBoard/pull/52 (Thanks [surexxx](https://github.com/surexxx))
+* **Fixed:** Avoiding CORS in Electron - https://github.com/furcan/KioskBoard/issues/46
+* **Changed:** Refactor.
+
+-----
+
 @2.1.0
 * **Added:** Input based `data-kioskboard-placement` data attribute option has been added. This option sets the placement of the keyboard on `top` or `bottom` for each input/textarea element. The default value is `bottom`.
 

README.md

@@ -22,7 +22,7 @@ A pure JavaScript library for using virtual keyboards.
 ---------
 
 ## Current Version
-2.1.0 [*](https://github.com/furcan/KioskBoard/blob/main/CHANGELOG.md)
+2.2.0 [*](https://github.com/furcan/KioskBoard/blob/main/CHANGELOG.md)
 
 ---------
 
@@ -59,15 +59,15 @@ import KioskBoard from 'kioskboard';
 ### CSS and JS
 
 ```html
-<link rel="stylesheet" href="dist/kioskboard-2.1.0.min.css" />
+<link rel="stylesheet" href="dist/kioskboard-2.2.0.min.css" />
 
-<script src="dist/kioskboard-2.1.0.min.js"></script>
+<script src="dist/kioskboard-2.2.0.min.js"></script>
 ```
 
 ### Or only JS (All in One - Internal CSS)
 
 ```html
-<script src="dist/kioskboard-aio-2.1.0.min.js"></script>
+<script src="dist/kioskboard-aio-2.2.0.min.js"></script>
 ```
 
 ---------

build/kioskboard-aio.js

@@ -1,7 +1,7 @@
 /*!
 * 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.1.0
+* Version: 2.2.0
 * Author: Furkan MT ('https://github.com/furcan')
 * Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
@@ -572,14 +572,31 @@
           }, false);
           // input element keypress listener: end
 
+          // keys event listeners: begin
+          var keysEventListeners = function (keyElement, onClickHandler) {
+            if (keyElement) {
+              var isTouchableDevice = 'ontouchend' in window || window.navigator.maxTouchPoints > 0;
+
+              if (isTouchableDevice) {
+                keyElement.addEventListener('contextmenu', function (event) {
+                  event.preventDefault();
+                }, false);
+                keyElement.addEventListener('touchend', onClickHandler);
+              }
+
+              keyElement.addEventListener('click', onClickHandler);
+            }
+          };
+          // keys event listeners: end
+
           // keys click listeners: begin
           var keysClickListeners = function (input) {
             // each key click listener: begin
             var eachKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key');
             if (eachKeyElm && eachKeyElm.length > 0) {
               for (var ekIndex = 0; ekIndex < eachKeyElm.length; ekIndex++) {
                 var keyElm = eachKeyElm[ekIndex];
-                keyElm.addEventListener('click', function (e) {
+                keysEventListeners(keyElm, function (e) {
                   e.preventDefault();
 
                   // check input max & maxlength
@@ -621,15 +638,15 @@
                     // input trigger change event for update the value
                     input.dispatchEvent(changeEvent);
                   }
-                }, false);
+                });
               }
             }
             // each key click listener: end
 
             // capslock key click listener: begin
             var capsLockKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-capslock')[0];
             if (capsLockKeyElm) {
-              capsLockKeyElm.addEventListener('click', function (e) {
+              keysEventListeners(capsLockKeyElm, function (e) {
                 e.preventDefault();
                 // focus the input
                 input.focus();
@@ -645,14 +662,14 @@
                   kioskBoardVirtualKeyboard.classList.add('kioskboard-touppercase');
                   isCapsLockActive = true;
                 }
-              }, false);
+              });
             }
             // capslock key click listener: end
 
             // backspace key click listener: begin
             var backspaceKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-backspace')[0];
             if (backspaceKeyElm) {
-              backspaceKeyElm.addEventListener('click', function (e) {
+              keysEventListeners(backspaceKeyElm, function (e) {
                 e.preventDefault();
 
                 // update the selectionStart
@@ -675,7 +692,7 @@
                 // input trigger change event for update the value
                 input.dispatchEvent(changeEvent);
 
-              }, false);
+              });
             }
             // backspace key click listener: end
 
@@ -684,7 +701,7 @@
             var specialCharactersRowElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-row-specialcharacters')[0];
             // open
             if (specialCharacterKeyElm && specialCharactersRowElm) {
-              specialCharacterKeyElm.addEventListener('click', function (e) {
+              keysEventListeners(specialCharacterKeyElm, function (e) {
                 e.preventDefault();
                 input.focus(); // focus the input
                 if (e.currentTarget.classList.contains('specialcharacter-active')) {
@@ -694,17 +711,17 @@
                   e.currentTarget.classList.add('specialcharacter-active');
                   specialCharactersRowElm.classList.add('kioskboard-specialcharacter-show');
                 }
-              }, false);
+              });
             }
             // close
             var specialCharCloseElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-specialcharacter-close')[0];
             if (specialCharCloseElm && specialCharacterKeyElm && specialCharactersRowElm) {
-              specialCharCloseElm.addEventListener('click', function (e) {
+              keysEventListeners(specialCharCloseElm, function (e) {
                 e.preventDefault();
                 input.focus(); // focus the input
                 specialCharacterKeyElm.classList.remove('specialcharacter-active');
                 specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show');
-              }, false);
+              });
             }
             // specialcharacter key click listener: end
 
@@ -737,7 +754,7 @@
             var docTop = window.document.documentElement.scrollTop || 0;
             var inputThreshold = isPlacementTop ? (theInput.clientHeight + 20) : 50;
             var theInputOffsetTop = Math.round(inputTop + docTop) - inputThreshold;
-            var isPaddingTop = theInputOffsetTop < keyboardHeight;
+            var isPaddingTop = (theInputOffsetTop < keyboardHeight) && isPlacementTop;
             var isPaddingBottom = documentHeight <= (theInputOffsetTop + keyboardHeight);
 
             if (isPaddingTop || isPaddingBottom) {
@@ -760,11 +777,20 @@
             if (autoScroll) {
               var scrollBehavior = opt.cssAnimations === true ? 'smooth' : 'auto';
               var scrollDelay = opt.cssAnimations === true && typeof opt.cssAnimationsDuration === 'number' ? opt.cssAnimationsDuration : 0;
-              var userAgent = navigator.userAgent.toLocaleLowerCase('en');
               var scrollTop = theInputOffsetTop - (isPlacementTop ? keyboardHeight : 0);
-              if (userAgent.indexOf('edge') < 0 && userAgent.indexOf('.net4') < 0) {
+
+              var userAgent = window.navigator.userAgent.toLocaleLowerCase('en');
+              var isBrowserInternetExplorer = userAgent.indexOf('.net4') > -1;
+              var isBrowserEdgeLegacy = userAgent.indexOf('edge') > -1;
+              var isBrowserEdgeWebView = isBrowserEdgeLegacy && userAgent.indexOf('webview') > -1;
+
+              if ((!isBrowserEdgeLegacy || isBrowserEdgeWebView) && !isBrowserInternetExplorer) {
                 var scrollTimeout = setTimeout(function () {
-                  window.scrollTo({ top: scrollTop, left: 0, behavior: scrollBehavior });
+                  if (isBrowserEdgeWebView) {
+                    window.scrollBy(0, theInputOffsetTop);
+                  } else {
+                    window.scrollTo({ top: scrollTop, left: 0, behavior: scrollBehavior });
+                  }
                   clearTimeout(scrollTimeout);
                 }, scrollDelay);
               } else {
@@ -835,14 +861,6 @@
 
       // Functions: Get the Keys from JSON by XMLHttpRequest and AppendTo: begin
       var getKeysViaXmlHttpRequest = function (jsonUrl, input) {
-        // check the protocol
-        var protocolSchemes = ['http:', 'data:', 'chrome:', 'chrome-extension:', 'https:'];
-        var protocol = (window.location || {}).protocol;
-        if (protocolSchemes.indexOf(protocol) <= -1) {
-          kioskBoardConsoleError('The Browser has blocked this request by CORS policy.');
-          return false;
-        }
-
         // if "kioskBoardCachedKeys" is undefined || null => send XMLHttpRequest
         if (!kioskBoardCachedKeys) {
           var xmlHttp = new XMLHttpRequest();

dist/kioskboard-2.1.0.min.css dist/kioskboard-2.2.0.min.cssdist/kioskboard-2.1.0.min.css renamed to dist/kioskboard-2.2.0.min.css

@@ -1,6 +1,6 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.1.0
+* Version: 2.2.0
 * Author: Furkan MT ('https://github.com/furcan')
 * Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */