Merge pull request #66 from furcan/feature/add-enter-button

enter key added

.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.2.0
+* Version: 2.3.0
 * Author: Furkan ('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.2.0
+* Version: 2.3.0
 * Author: Furkan ('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.2.0
+* Version: 2.3.0
 * Author: Furkan ('https://github.com/furcan')
 * Copyright 2022 Minifier, MIT Licence ('https://opensource.org/licenses/MIT')
 */

CHANGELOG.md

@@ -1,3 +1,14 @@
+@2.3.0
+* **Fixed:** Suggested fix for Autoscroll not happening - https://github.com/furcan/KioskBoard/pull/62 (Thanks [revaij83](https://github.com/revaij83))
+* **Fixed:** Specialcharacters keyboard close button is not visible when kioskboard-overflow class present - https://github.com/furcan/KioskBoard/issues/60
+* **Added:** Enter key added.
+  - "`keysEnterText`", "`keysEnterCallback`", and "`keysEnterCanClose`" options are added.
+  - https://github.com/furcan/KioskBoard/issues/50
+  - https://github.com/furcan/KioskBoard/issues/55
+* **Changed:** Refactor.
+
+-----
+
 @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))

README.md

@@ -22,7 +22,7 @@ A pure JavaScript library for using virtual keyboards.
 ---------
 
 ## 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)
 
 ---------
 
@@ -59,15 +59,15 @@ import KioskBoard from 'kioskboard';
 ### CSS and JS
 
 ```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>
 ```
 
 ### Or only JS (All in One - Internal CSS)
 
 ```html
-<script src="dist/kioskboard-aio-2.2.0.min.js"></script>
+<script src="dist/kioskboard-aio-2.3.0.min.js"></script>
 ```
 
 ---------
@@ -156,6 +156,9 @@ KioskBoard.init({
   // The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
   theme: 'light',
 
+  // 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"
   capsLockActive: true,
 
@@ -195,8 +198,14 @@ KioskBoard.init({
   // Size of the icon keys
   keysIconSize: '25px',
 
-  // 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,
 });
 ```
 

docs/index.css

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

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.2.0.min.css" /> -->
+  <!-- <link rel="stylesheet" href="../dist/kioskboard-2.3.0.min.css" /> -->
 
-  <link rel="stylesheet" href="index.css?v=2.2.0" />
+  <link rel="stylesheet" href="index.css?v=2.3.0" />
 </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.2.0</p>
+      <p class="version" data-toggle="tooltip" title="Current Version">v2.3.0</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.2.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.0.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.2.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.0.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.2.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.0.min.js"</span></span>&gt;&lt;/<span class="link">script</span>&gt;</span>
         </code>
       </div>
 
@@ -328,6 +328,9 @@ <h2 class="sec-title">Run / Initialize</h2>
           <span class="l1 l2 cmmnt">// The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"</span>
           <span class="l1 l2"><span class="fnc1">theme:</span> <span class="str">'light'</span>,</span>
 
+          <span class="l1 l2 cmmnt">// Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"</span>
+          <span class="l1 l2"><span class="fnc1">autoScroll:</span> <span class="bool">true</span>,</span>
+
           <span class="l1 l2 cmmnt">// Uppercase or lowercase to start. Uppercased when "true"</span>
           <span class="l1 l2"><span class="fnc1">capsLockActive:</span> <span class="bool">true</span>,</span>
 
@@ -350,7 +353,7 @@ <h2 class="sec-title">Run / Initialize</h2>
           <span class="l1 l2 cmmnt">// Enable or Disable Spacebar functionality on the keyboard. The Spacebar will be passive when "false"</span>
           <span class="l1 l2"><span class="fnc1">keysAllowSpacebar:</span> <span class="bool">true</span>,</span>
 
-          <span class="l1 l2 cmmnt">// Text of the space key (Spacebar). Without text => " "</span>
+          <span class="l1 l2 cmmnt">// Text of the Space key (Spacebar). Without text => " "</span>
           <span class="l1 l2"><span class="fnc1">keysSpacebarText:</span> <span class="str">'Space'</span>,</span>
 
           <span class="l1 l2 cmmnt">// Font family of the keys</span>
@@ -365,8 +368,14 @@ <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">// Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"</span>
-          <span class="l1 l2"><span class="fnc1">autoScroll:</span> <span class="bool">true</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>
+
+          <span class="l1 l2 cmmnt">// The callback function of the Enter key. This function will be called when the enter key has been clicked.</span>
+          <span class="l1 l2"><span class="fnc1">keysEnterCallback:</span> <span class="bool">undefined</span>,</span>
+
+          <span class="l1 l2 cmmnt">// The Enter key can close and remove the keyboard. Prevented when "false"</span>
+          <span class="l1 l2"><span class="fnc1">keysEnterCanClose:</span> <span class="bool">true</span>,</span>
 
           <span class="l1">});</span>
         </code>
@@ -467,12 +476,12 @@ <h2 class="sec-title">Language (JSON)</h2>
   <script src="index-tooltip.js"></script>
 
   <!-- <script src="../src/kioskboard.js"></script> -->
-  <!-- <script src="../dist/kioskboard-2.2.0.min.js"></script> -->
   <!-- <script src="../build/kioskboard-aio.js"></script> -->
-  <!-- <script src="../dist/kioskboard-aio-2.2.0.min.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="kioskboard-aio-2.2.0.min.js"></script>
-  <script src="index.js?v=2.2.0"></script>
+  <script src="kioskboard-aio-2.3.0.min.js"></script>
+  <script src="index.js?v=2.3.0"></script>
 </body>
 
 </html>

docs/index.js

@@ -1,6 +1,6 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.2.0
+* Version: 2.3.0
 * Author: Furkan ('https://github.com/furcan')
 * Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
@@ -123,6 +123,11 @@ KioskBoard.run('.js-kioskboard-input-furcan-top', {
   allowMobileKeyboard: false,
   language: 'en',
   theme: 'dark',
+  keysEnterText: 'Close',
+  keysEnterCanClose: true,
+  keysEnterCallback: function () {
+    console.log('closed');
+  },
 });
 
 KioskBoard.run('.js-kioskboard-input-furcan-bottom', {

index.d.test.ts

@@ -29,6 +29,7 @@ KioskBoard.init({
   keysNumpadArrayOfNumbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
   language: 'en',
   theme: 'light',
+  autoScroll: true,
   capsLockActive: true,
   allowRealKeyboard: false,
   allowMobileKeyboard: false,
@@ -41,7 +42,9 @@ KioskBoard.init({
   keysFontSize: '22px',
   keysFontWeight: 'normal',
   keysIconSize: '25px',
-  autoScroll: true,
+  keysEnterText: 'Enter',
+  keysEnterCanClose: false,
+  keysEnterCallback: () => undefined,
 });
 
 KioskBoard.run('.js-kioskboard', {

index.d.ts

@@ -1,6 +1,6 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.2.0
+* Version: 2.3.0
 * Description: TypeScript Declaration.
 * Author: Furkan ('https://github.com/furcan')
 * Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
@@ -69,6 +69,12 @@ declare namespace KioskBoard {
      */
     theme?: 'light' | 'dark' | 'flat' | 'material' | 'oldschool';
 
+    /**
+     * @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`.
      * @defaultValue `true`
@@ -144,10 +150,22 @@ declare namespace KioskBoard {
     keysIconSize?: string;
 
     /**
-     * @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;
   }
 
   /**

package.json

@@ -1,8 +1,8 @@
 {
   "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.",
   "homepage": "https://github.com/furcan/KioskBoard",
   "files": [

src/kioskboard.css

@@ -1,6 +1,6 @@
 /*!
 * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
-* Version: 2.2.0
+* Version: 2.3.0
 * Author: Furkan ('https://github.com/furcan')
 * Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
@@ -235,6 +235,7 @@
   background: #5decaa;
 }
 
+#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-enter,
 #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace {
   position: relative;
   max-width: 100%;
@@ -246,20 +247,20 @@
   flex: 1 1 auto;
 }
 
-/* 140+16=>CapsLock && 140+16=>BackSpace */
+/* 140+16=>CapsLock && 140+16=>BackSpace && 140+16=>Enter */
 #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space {
   min-height: 60px;
   max-width: 100%;
-  width: calc(100% - 16px - 140px - 16px - 140px - 16px);
+  width: calc(100% - 16px - 140px - 16px - 140px - 16px - 140px - 16px);
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
 
-/* 140+16=>CapsLock && 140+16=>BackSpace && 140+16=>SpecialChar */
+/* 140+16=>CapsLock && 140+16=>BackSpace && 140+16=>SpecialChar && 140+16=>Enter */
 #KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-space {
-  width: calc(100% - 16px - 140px - 16px - 140px - 16px - 140px - 16px);
+  width: calc(100% - 16px - 140px - 16px - 140px - 16px - 140px - 16px - 140px - 16px);
 }
 
 #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space.spacebar-denied {
@@ -282,7 +283,7 @@
 
 /* KioskBoard: Row & Keys Numpad Group: begin */
 #KioskBoard-VirtualKeyboard .kioskboard-row-numpad {
-  display: block;
+  display: flex;
   max-width: 320px;
   margin: auto;
 }
@@ -299,10 +300,16 @@
 }
 /* stylelint-enable no-descending-specificity */
 
-#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-last,
+#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-last {
+  order: 11;
+}
+
 #KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace {
-  max-width: 100%;
-  width: calc(50% - 16px);
+  order: 10;
+}
+
+#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-enter {
+  order: 12;
 }
 
 /* KioskBoard: Row & Keys Numpad Group: end */
@@ -337,7 +344,7 @@
   position: absolute;
   z-index: 30;
   right: 0;
-  top: -42.5px;
+  top: 0;
   width: 40px;
   height: 40px;
   background: #a9a9a9;
@@ -590,11 +597,7 @@
     min-height: 55px;
   }
 
-  #KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-last,
-  #KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace {
-    width: calc(50% - 20px);
-  }
-
+  #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-enter,
   #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace,
   #KioskBoard-VirtualKeyboard .kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter,
   #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock {
@@ -636,7 +639,7 @@
   #KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close {
     width: 30px;
     height: 30px;
-    top: -27px;
+    top: 0;
     right: 5px;
   }
 }