From 26ba695dd417813ee39c265e7b6f1daaa5dc30f1 Mon Sep 17 00:00:00 2001 From: Furkan MT Date: Fri, 20 Mar 2020 17:29:49 +0300 Subject: [PATCH] Version 1.2.1 Released Fixed: Document Object Model definition fixes. --- README.md | 12 +- ReleaseNotes.md | 5 + dist/kioskboard-1.2.1.css | 496 +++++++++++ dist/kioskboard-1.2.1.js | 781 +++++++++++++++++ .../kioskboard-aio-1.2.1.js | 56 +- docs/index.html | 14 +- docs/kioskboard-aio-1.2.1.js | 800 ++++++++++++++++++ package.json | 4 +- .../1.2.0}/kioskboard-1.2.0.css | 0 .../1.2.0}/kioskboard-1.2.0.js | 0 .../1.2.0}/kioskboard-aio-1.2.0.js | 0 .../1.2.0/kioskboard-keys-english.json | 34 + .../1.2.0/kioskboard-keys-french.json | 38 + .../1.2.0/kioskboard-keys-german.json | 37 + .../1.2.0/kioskboard-keys-spanish.json | 35 + .../1.2.0/kioskboard-keys-turkish.json | 40 + 16 files changed, 2309 insertions(+), 43 deletions(-) create mode 100644 dist/kioskboard-1.2.1.css create mode 100644 dist/kioskboard-1.2.1.js rename docs/kioskboard-aio-1.2.0.js => dist/kioskboard-aio-1.2.1.js (95%) create mode 100644 docs/kioskboard-aio-1.2.1.js rename {dist => previous-versions/1.2.0}/kioskboard-1.2.0.css (100%) rename {dist => previous-versions/1.2.0}/kioskboard-1.2.0.js (100%) rename {dist => previous-versions/1.2.0}/kioskboard-aio-1.2.0.js (100%) create mode 100644 previous-versions/1.2.0/kioskboard-keys-english.json create mode 100644 previous-versions/1.2.0/kioskboard-keys-french.json create mode 100644 previous-versions/1.2.0/kioskboard-keys-german.json create mode 100644 previous-versions/1.2.0/kioskboard-keys-spanish.json create mode 100644 previous-versions/1.2.0/kioskboard-keys-turkish.json diff --git a/README.md b/README.md index 1ed92f7..0540dff 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ A pure JavaScript library for using the Virtual Keyboard. --------- ### Current Version -1.2.0 [*](https://github.com/furcan/KioskBoard/blob/master/ReleaseNotes.md) +1.2.1 [*](https://github.com/furcan/KioskBoard/blob/master/ReleaseNotes.md) --------- @@ -19,7 +19,7 @@ https://furcan.github.io/KioskBoard/ --------- ### Browser Compatibility -`Chrome` - `Firefox` - `Safari` - `Opera` +`Chrome` - `Firefox` - `Safari` - `Opera` - `Edge` --------- @@ -46,15 +46,15 @@ import KioskBoard from "kioskboard"; ##### CSS and JS ```html - + - + ``` ##### Or only JS (All in One - Internal CSS) ```html - + ``` --------- @@ -232,4 +232,4 @@ An example of a JSON file (for custom keys) is as below. Copyright © 2020 KioskBoard - Virtual Keyboard #### License -MIT license - https://opensource.org/licenses/MIT +MIT license - https://opensource.org/licenses/MIT \ No newline at end of file diff --git a/ReleaseNotes.md b/ReleaseNotes.md index da721b7..7573f83 100644 --- a/ReleaseNotes.md +++ b/ReleaseNotes.md @@ -1,3 +1,8 @@ +@1.2.1 +* **Fixed:** Document Object Model definition fixes. + +----- + @1.2.0 * **Added:** Universal Module Definition. * Code Review diff --git a/dist/kioskboard-1.2.1.css b/dist/kioskboard-1.2.1.css new file mode 100644 index 0000000..b2f1176 --- /dev/null +++ b/dist/kioskboard-1.2.1.css @@ -0,0 +1,496 @@ +/*! +* KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard') +* Version: 1.2.1 +* Author: Furkan MT ('https://github.com/furcan') +* Copyright 2020 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')* +*/ + +/* KioskBoard: Main on */ +#KioskBoard-VirtualKeyboard { +box-sizing: border-box !important; +position: fixed; +z-index: 2000; +width: 100%; +max-width: 1440px; +background: #e3e3e3; +background: linear-gradient(to right bottom, #eeeeee, #ebebeb, #e8e8e8, #e6e6e6, #e3e3e3); +box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.25), 0 0 20px -8px rgba(0, 0, 0, 0.15); +padding: 25px 20px 20px; +border-radius: 10px 10px 0 0; +left: 0; +right: 0; +bottom: 0; +margin: auto;} +#KioskBoard-VirtualKeyboard * { +box-sizing: border-box !important;} + +#KioskBoard-VirtualKeyboard .kioskboard-wrapper { +position: relative; +background: inherit; +float: left; +width: 100%;} + +#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow { +padding-right: 12px !important; +overflow: hidden auto;} + +#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar { +height: 6px; +width: 6px;} +#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar-track { +border-radius: 3px; +background: rgba(255, 255, 255, 0.75);} +#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar-thumb { +border-radius: 3px; +background: rgba(0, 0, 0, 0.25); +cursor: pointer;} + +#KioskBoard-VirtualKeyboard .kioskboard-row { +position: relative; +text-align: center; +float: left; +width: 100%;} + +#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] { +-webkit-user-select: none; +-ms-user-select: none; +-moz-user-select: none; +user-select: none; +position: relative; +transition: all .2s ease-in-out; +transform-origin: bottom center; +cursor: pointer; +font-size: 22px; +line-height: 1; +font-weight: normal; +font-family: sans-serif; +text-align: left; +display: inline-block; +max-width: 120px; +width: calc(8.3333% - 16px); +margin: 8px 8px 12px; +padding: 12px 12px 22px; +border-radius: 8px; +background: #fafafa; +color: #707070; +border: 2px solid rgba(255, 255, 255, 0.04); +box-shadow: 0 4px 0 0.04px rgba(0, 0, 0, 0.12); +border-bottom-color: rgba(255, 255, 255, 0.1); +border-bottom-width: 4px;} + +#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]:not(.spacebar-denied):hover { +transform: scaleY(.98) translateY(1px);} + +#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]:not(.spacebar-denied):active { +transform: scaleY(.95) translateY(4px);} + +#KioskBoard-VirtualKeyboard.kioskboard-tolowercase .kioskboard-row-dynamic span[class^=kioskboard-key] { +text-transform: lowercase;} + +#KioskBoard-VirtualKeyboard.kioskboard-touppercase .kioskboard-row-dynamic span[class^=kioskboard-key] { +text-transform: uppercase;} + +#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] svg { +position: absolute; +z-index: 10; +left: 10px; +top: 10px;} +/* KioskBoard: Main off */ + +/* KioskBoard: Keys Top Group on */ +#KioskBoard-VirtualKeyboard .kioskboard-row-top { +padding: 0 0 10px; +border-bottom: 1px solid rgba(0, 0, 0, 0.06); +margin: 0 0 10px;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-top span[class^=kioskboard-key] { +max-width:90px;} +/* KioskBoard: Keys Top Group off */ + +/* KioskBoard: Keys Bottom Group on */ +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom { +padding: 10px 0 0; +border-top: 1px solid rgba(0, 0, 0, 0.06); +margin: 10px 0 0;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span[class^=kioskboard-key] { +float: left;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock { +max-width: unset; +min-height: 60px; +width: 140px;} +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock:before { +content:""; +position: absolute; +z-index: 2; +width: 10px; +height: 10px; +border-radius: 10px; +right: 6px; +top: 6px; +background: #c4c4c4;} +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before { +background: #5decaa;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace { +position: relative; +max-width: unset; +min-height: 60px; +width: 140px;} + +/* 140+16=>CapsLock && 140+16=>BackSpace */ +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space { +min-height: 60px; +max-width: unset; +width: calc(100% - 16px - 140px - 16px - 140px - 16px);} + +/* 140+16=>CapsLock && 140+16=>BackSpace && 140+16=>SpecialChar */ +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-space { +width: calc(100% - 16px - 140px - 16px - 140px - 16px - 140px - 16px);} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space.spacebar-denied { +opacity: .4 !important; +cursor: not-allowed !important;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter { +position: relative; +max-width: unset; +min-height: 60px; +width: 140px;} +/* KioskBoard: Keys Bottom Group off */ + +/* KioskBoard: Keys Numpad Group on */ +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad { +float: none; +display: block; +max-width: 320px; +margin: auto;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span[class^=kioskboard-key] { +min-height: 60px; +float: left; +width: calc(33.3333% - 16px);} + +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-0, +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace { +max-width: unset; +width: calc(50% - 16px);} +/* KioskBoard: Keys Numpad Group off */ + +/* KioskBoard: Keys SpecialChar Group on */ +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters { +transition: all .2s ease-in-out; +visibility: hidden; +opacity: 0; +position: absolute; +background: inherit; +padding: 20px; +z-index: 20; +left: 0; +top: 0; +height: 100%; +width: 100%;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters.kioskboard-specialcharacter-show { +visibility: visible; +opacity: 1;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close { +transition: all .36s ease-in-out; +cursor: pointer; +position: absolute; +z-index: 30; +right: 0px; +top: -42.5px; +width: 40px; +height: 40px; +background: #a9a9a9; +border-radius: 20px; +box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.25);} + +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close svg { +position: absolute; +left: 0; +top: 0; +right:0; +bottom:0; +margin:auto; +fill:#fff !important; +width: 16px !important; +height: 16px !important;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close:hover { +transform:rotate(90deg);} + +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content { +float:left; +width:100%; +max-height: 100%; +padding-right:5px; +overflow-x:hidden; +overflow-y: auto;} +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content::-webkit-scrollbar { +height: 6px; +width: 6px;} +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content::-webkit-scrollbar-track { +border-radius: 3px; +background: rgba(255, 255, 255, 0.75);} +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content::-webkit-scrollbar-thumb { +border-radius: 3px; +background: rgba(0, 0, 0, 0.25); +cursor: pointer;} +/* KioskBoard: Keys SpecialChar Group off */ + +/* KioskBoard: Theme on */ +#KioskBoard-VirtualKeyboard.kioskboard-theme-material, +#KioskBoard-VirtualKeyboard.kioskboard-theme-light { +box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.25), 0 0 20px -8px rgba(0, 0, 0, 0.15); +background: #e3e3e3; +background: linear-gradient(to right bottom, #eeeeee, #ebebeb, #e8e8e8, #e6e6e6, #e3e3e3);} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark { +box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.25), 0 0 20px -8px rgba(0, 0, 0, 0.15); +background: #151515; +background: linear-gradient(to left top, #151515, #171717, #1a1a1a, #1c1c1c, #1e1e1e);} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat { +box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.25), 0 0 20px -8px rgba(0, 0, 0, 0.15); +background: #dfdfdf;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool { +box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.02), 0 0 20px -8px rgba(0, 0, 0, 0.1); +background: #e5e5e5; +background: linear-gradient(to right bottom, #e5e5e5, #e6e6e6, #e7e7e7, #e7e7e7, #e8e8e8);} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row span[class^=kioskboard-key], +#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row span[class^=kioskboard-key] { +color: #707070; +background: #fafafa;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row span[class^=kioskboard-key] { +border-color: rgba(255, 255, 255, 0.02); +border-bottom-color: rgba(255, 255, 255, 0.04); +box-shadow: 0 5px 0 0.05px rgba(255, 255, 255, 0.2); +color: #b7b7b7; +background: #323232;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key] { +color: #707070; +background: #fafafa; +box-shadow: unset; +border: 1px solid rgba(0, 0, 0, 0.05);} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key] { +color: #8f8f8f; +text-shadow: 0 0 1px rgba(0, 0, 0, 0.2); +background: #fafafa; +box-shadow: 0 4px 6px 0.06px rgba(0, 0, 0, 0.05);} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key]:after { +content: ""; +position: absolute; +left: 0px; +top: -5px; +right: 0; +bottom: 0; +width: 100%; +height: calc(100% - 5px); +background: rgba(255, 255, 255, 0.1); +box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.4); +margin: auto; +border-radius: inherit; +border: 4px solid rgba(0, 0, 0, 0.06); +border-top-color: rgba(0, 0, 0, 0.02); +border-bottom-color: transparent; +box-sizing: border-box; +border-top-width: 2px; +border-bottom-width: 6px;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-bottom span.kioskboard-key-capslock:before { +right: 9px; +top: 9px;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-bottom span.kioskboard-key-capslock:before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-bottom span.kioskboard-key-capslock:before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row-bottom span.kioskboard-key-capslock:before { +background: #c4c4c4;} +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-bottom span.kioskboard-key-capslock:before { +background: #a9a9a9;} +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-capslock:before { +background: #e6e6e6;} +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before { +background: #5decaa;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key] svg, +#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row span[class^=kioskboard-key] svg { +fill:#707070 !important;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row span[class^=kioskboard-key] svg { +fill:#a9a9a9 !important;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key] svg { +left: 12px; +fill: #a1a1a1 !important;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-numpad span.kioskboard-key-backspace, +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-specialcharacter, +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-capslock, +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-backspace { +box-shadow: 0 4px 0 0.04px rgba(0, 0, 0, 0.3); +border-bottom-color: rgba(0, 0, 0, 0.03); +color:#fafafa; +background: #b0b0b0;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row span[class^=kioskboard-key] svg { +fill:#fafafa !important;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close, +#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close, +#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close, +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close { +background:#a9a9a9 !important;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close { +background:#323232 !important;} +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close svg { +fill:#b7b7b7 !important;} +/* KioskBoard: Theme off */ + +/* KioskBoard: Animations on */ +#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-fade { +opacity:1; +animation: kioskboard-animation-fade .36s ease-in-out 0s normal; +-webkit-animation: kioskboard-animation-fade .36s ease-in-out 0s normal;} +@keyframes kioskboard-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} +@-webkit-keyframes kioskboard-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} + +#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-fade.kioskboard-fade-remove { +opacity:0; +animation: kioskboard-animation-fade-remove .36s ease-in-out 0s normal; +-webkit-animation: kioskboard-animation-fade-remove .36s ease-in-out 0s normal;} +@keyframes kioskboard-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} +@-webkit-keyframes kioskboard-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} + +#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-slide { +bottom:0; +animation: kioskboard-animation-slide 1.2s ease-in-out 0s normal; +-webkit-animation: kioskboard-animation-slide 1.2s ease-in-out 0s normal;} +@keyframes kioskboard-animation-slide { +0% {bottom: -100%;} +100% {bottom: 0;} +} +@-webkit-keyframes kioskboard-animation-slide { +0% {bottom: -100%;} +100% {bottom: 0;} +} + +#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-slide.kioskboard-slide-remove { +bottom:-100%; +animation: kioskboard-animation-slide-remove 1.2s ease-in-out 0s normal; +-webkit-animation: kioskboard-animation-slide-remove 1.2s ease-in-out 0s normal;} +@keyframes kioskboard-animation-slide-remove { +0% {bottom: 0;} +100% {bottom: -100%;} +} +@-webkit-keyframes kioskboard-animation-slide-remove { +0% {bottom: 0;} +100% {bottom: -100%;} +} +/* KioskBoard: Animations off */ + +/* KioskBoard: Responsive on */ +@media only screen and (max-width: 767px) { + +#KioskBoard-VirtualKeyboard { +min-height: 210px; +padding:12px 6px;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters { +padding: 30px 0;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close { +top:-30px; +width: 35px; +height: 35px;} + +#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] { +font-size: 13.5px !important; +line-height: 1 !important; +padding: 4px 2px !important; +text-align: center; +min-width: 21px; +margin: 4px 4px 10px; +border-radius: 3px;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key] { +line-height: 22px !important;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span[class^=kioskboard-key] { +font-size: 16px !important; +line-height: 36px !important; +padding: 0 2px !important; +width: calc(33.3333% - 8px); +min-height: 36px;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row.kioskboard-row-numpad span[class^=kioskboard-key] { +line-height: 36px !important;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter, +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace, +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock { +max-width: unset; +min-height: 40px; +width:60px;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space { +max-width: unset; +min-height: 40px; +width: calc(100% - 8px - 60px - 8px - 60px - 8px);} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-space { +width: calc(100% - 8px - 60px - 8px - 60px - 8px - 60px - 8px);} + +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-0, +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace { +max-width: unset; +min-height: 36px; +width: calc(50% - 8px);} + +#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace { +min-height: 42px;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-numpad span.kioskboard-key-backspace { +min-height: 38px;} + +#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] svg { +left: 6px; +top: 5px; +width: 18px !important; +height: 18px !important;} + +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter svg { +width: 36px !important; +height: 18px !important;} + +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key] svg { +left: 10px;} + +} +/* KioskBoard: Responsive off */ \ No newline at end of file diff --git a/dist/kioskboard-1.2.1.js b/dist/kioskboard-1.2.1.js new file mode 100644 index 0000000..f6fc041 --- /dev/null +++ b/dist/kioskboard-1.2.1.js @@ -0,0 +1,781 @@ +/*! +* KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard') +* Version: 1.2.1 +* Author: Furkan MT ('https://github.com/furcan') +* Copyright 2020 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')* +*/ + +/* global define */ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], function () { + return factory(root); + }); + } else if (typeof module === 'object' && typeof module.exports === 'object') { + module.exports = factory(root); + } else { + root.KioskBoard = factory(root); + } +})(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this, function (window) { + + // eslint-disable-next-line + 'use strict'; + + // SSR check on + if (typeof window === 'undefined' && typeof window.document === 'undefined') { + return; + } + // SSR check off + + // KioskBoard: Default Options on + var kioskBoardDefaultOptions = { + keysArrayOfObjects: null, + keysJsonUrl: null, + specialCharactersObject: null, + language: 'en', + theme: 'light', // "light" || "dark" || "flat" || "material" || "oldschool" + capsLockActive: true, + allowRealKeyboard: false, + allowMobileKeyboard: false, + cssAnimations: true, + cssAnimationsDuration: 360, + cssAnimationsStyle: 'slide', // "slide" || "fade" + keysAllowSpacebar: true, + keysSpacebarText: 'Space', + keysFontFamily: 'sans-serif', + keysFontSize: '22px', + keysFontWeight: 'normal', + keysIconSize: '25px', + }; + var kioskBoardCachedKeys; + var kioskBoardNewOptions; + var kioskBoardGithubUrl = 'https://github.com/furcan/KioskBoard'; + // KioskBoard: Default Options off + + // KioskBoard: Extend Options on + var extendKioskBoard = function () { + var extended = {}; + var deep = false; + var i = 0; + if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') { + deep = arguments[0]; + i++; + } + var merge = function (obj) { + for (var prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') { + extended[prop] = extendKioskBoard(extended[prop], obj[prop]); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + for (; i < arguments.length; i++) { + merge(arguments[i]); + } + return extended; + }; + // KioskBoard: Extend Options off + + // KioskBoard: Console Error Function on + var kioskBoardConsoleError = function (errorMessage) { + return console.error('%c KioskBoard (Error) ', 'padding:2px;border-radius:20px;color:#fff;background:#f44336', '\n' + errorMessage); + }; + // KioskBoard: Console Error Function off + + // KioskBoard: Console Log Function on + var kioskBoardConsoleLog = function (logMessage) { + return console.log('%c KioskBoard (Info) ', 'padding:2px;border-radius:20px;color:#fff;background:#00bcd4', '\n' + logMessage); + }; + // KioskBoard: Console Log Function off + + // KioskBoard: Icons on + var kioskBoardIconBackspace = function (width, color) { + if (!width) { width = 25; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + var kioskBoardIconCapslock = function (width, color) { + if (!width) { width = 25; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + var kioskBoardIconSpecialCharacters = function (width, height, color) { + if (!width) { width = 50; } + if (!height) { width = 25; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + var kioskBoardIconClose = function (width, color) { + if (!width) { width = 18; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + // KioskBoard: Icons off + + // KioskBoard: Main on + var KioskBoard = { + // Initialize + Init: function (userInitOptions) { + kioskBoardNewOptions = extendKioskBoard(true, kioskBoardDefaultOptions, userInitOptions); + }, + // Merge + Merge: function (userMergeOptions) { + if (kioskBoardNewOptions) { // if initialized + kioskBoardNewOptions = extendKioskBoard(true, kioskBoardNewOptions, userMergeOptions); + } else { // initialize first + kioskBoardConsoleError('You have to initialize KioskBoard before call Merge function.'); + return false; + } + }, + // Run + Run: function (keyboardElement) { + // Check the initialize on + if (!kioskBoardNewOptions) { + kioskBoardConsoleError('You have to initialize KioskBoard first. \n\nVisit to learn how: ' + kioskBoardGithubUrl); + return false; + } + // Check the initialize off + + // Keys Object + var keysArrayOfObjects = kioskBoardNewOptions.keysArrayOfObjects; + var hasKeysObject = false; + + // Step 1: check the "keysArrayOfObjects" on + if (keysArrayOfObjects && typeof keysArrayOfObjects === 'object' && keysArrayOfObjects.length > 0) { + // check least one if exist + if (typeof keysArrayOfObjects[0] === 'object') { + for (var key in keysArrayOfObjects[0]) { + if (Object.prototype.hasOwnProperty.call(keysArrayOfObjects[0], key)) { + // has keys object + hasKeysObject = true; + // cache the keys object + kioskBoardCachedKeys = keysArrayOfObjects; + } + } + } + } + // Step 1: check the "keysArrayOfObjects" off + + // Step 2: check the "keysJsonUrl" on + if (!hasKeysObject) { + // keys json url + var keysJsonUrl = kioskBoardNewOptions.keysJsonUrl; + // check the "keysJsonUrl" + if (!keysJsonUrl) { + kioskBoardConsoleError('You have to set the path of KioskBoard Keys JSON file to "keysJsonUrl" option. \n\nVisit to learn how: ' + kioskBoardGithubUrl); + return false; + } + } + // Step 2: check the "keysJsonUrl" off + + // Create Keyboard and AppendTo... on + var createKeyboardAndAppendTo = function (data, input) { + // all inputs + var allInputs = []; + allInputs.push(input); + + // all inputs readonly check + var allowMobileKeyboard = typeof kioskBoardNewOptions.allowMobileKeyboard === 'boolean' ? kioskBoardNewOptions.allowMobileKeyboard : false; + var getReadOnlyAttr = input.getAttribute('readonly'); + + // each input focus listener on + var inputFocusListener = function (e) { + // input element variables on + var theInput = this; + var theInputSelIndex = 0; + var theInputValArray = []; + var keyboadType = (theInput.dataset.kioskboardType ? theInput.dataset.kioskboardType.toString().toLowerCase() : 'all'); + var allowedSpecialCharacters = (theInput.dataset.kioskboardSpecialcharacters ? JSON.parse(theInput.dataset.kioskboardSpecialcharacters) : false); + // input element variables off + + // check mobile keyboard allowed on + if (!allowMobileKeyboard) { + theInput.setAttribute('readonly', 'readonly'); + } + // check mobile keyboard allowed off + + // update theInputSelIndex on focus + theInputSelIndex = theInput.selectionStart; + + // update theInputValArray on focus + theInputValArray = theInput.value.split(''); + + // data + var jsonData = data; + + // row keys element on + var keysRowElements = ''; + // row keys element off + + // all keys styles on + var fontFamily = (kioskBoardNewOptions.keysFontFamily && kioskBoardNewOptions.keysFontFamily.length > 0 ? kioskBoardNewOptions.keysFontFamily : 'sans-serif'); + var fontSize = (kioskBoardNewOptions.keysFontSize && kioskBoardNewOptions.keysFontSize.length > 0 ? kioskBoardNewOptions.keysFontSize : '22px'); + var fontWeight = (kioskBoardNewOptions.keysFontWeight && kioskBoardNewOptions.keysFontWeight.length > 0 ? kioskBoardNewOptions.keysFontWeight : 'normal'); + // all keys styles off + + // static keys on + var isCapsLockActive = (typeof kioskBoardNewOptions.capsLockActive === 'boolean' ? kioskBoardNewOptions.capsLockActive : true); + var keysIconWidth = (kioskBoardNewOptions.keysIconSize && kioskBoardNewOptions.keysIconSize.length > 0 ? kioskBoardNewOptions.keysIconSize : '25px'); + var keysIconColor = '#707070'; + var keysAllowSpacebar = (typeof kioskBoardNewOptions.keysAllowSpacebar === 'boolean' ? kioskBoardNewOptions.keysAllowSpacebar : true); + var spaceKeyValue = keysAllowSpacebar ? ' ' : ''; + var keysSpacebarText = (kioskBoardNewOptions.keysSpacebarText && kioskBoardNewOptions.keysSpacebarText.length > 0 ? kioskBoardNewOptions.keysSpacebarText : 'Space'); + + var spaceKey = '' + keysSpacebarText + ''; + var capsLockKey = '' + kioskBoardIconCapslock(keysIconWidth, keysIconColor) + ''; + var backspaceKey = '' + kioskBoardIconBackspace(keysIconWidth, keysIconColor) + ''; + // static keys off + + // keyboard "specialcharacter" setting is "true" on + var specialCharacterKey = ''; + var specialCharactersContent = ''; + if (allowedSpecialCharacters) { + var theUnit = (keysIconWidth.includes('%') ? '%' : 'px'); + var theSize = keysIconWidth.toString().match(/\d/g); + var specialKeyWidth = (theSize.join('') * 2) + theUnit; + var specialKeyHeight = theSize.join('') + theUnit; + specialCharacterKey = '' + kioskBoardIconSpecialCharacters(specialKeyWidth, specialKeyHeight, keysIconColor) + ''; + var specialKeysObject = { + "0": "!", + "1": "'", + "2": "^", + "3": "#", + "4": "+", + "5": "$", + "6": "%", + "7": "½", + "8": "&", + "9": "/", + "10": "{", + "11": "}", + "12": "(", + "13": ")", + "14": "[", + "15": "]", + "16": "=", + "17": "*", + "18": "?", + "19": "\\", + "20": "-", + "21": "_", + "22": "|", + "23": "@", + "24": "€", + "25": "₺", + "26": "~", + "27": "æ", + "28": "ß", + "29": "<", + "30": ">", + "31": ",", + "32": ";", + "33": ".", + "34": ":", + "35": "`" + }; + + // check "specialCharactersObject" for override on + var specialCharsObj = kioskBoardNewOptions.specialCharactersObject; + if (specialCharsObj && typeof specialCharsObj === 'object') { + // check least one if exist + if (typeof specialCharsObj[0] === 'object') { + for (var key in specialCharsObj[0]) { + if (Object.prototype.hasOwnProperty.call(specialCharsObj[0], key)) { + specialKeysObject = specialCharsObj; // override special characters object + } + } + } + } + // check "specialCharactersObject" for override off + + for (var key in specialKeysObject) { + if (Object.prototype.hasOwnProperty.call(specialKeysObject, key)) { + var index = key; + var value = specialKeysObject[key]; + var length = Object.keys(specialKeysObject).length; + var eachKey = '' + value.toString() + ''; + specialCharactersContent += eachKey; + } + } + } + // keyboard "specialcharacter" setting is "true" off + + // keyboard type is 'numpad' on + if (keyboadType === 'numpad') { + var numpadKeysObject = { + "0": "7", + "1": "8", + "2": "9", + "3": "4", + "4": "5", + "5": "6", + "6": "1", + "7": "2", + "8": "3", + "9": "0", + }; + + var numpadKeysContent = ''; + for (var key in numpadKeysObject) { + if (Object.prototype.hasOwnProperty.call(numpadKeysObject, key)) { + var index = key; + var value = numpadKeysObject[key]; + var length = Object.keys(numpadKeysObject).length; + var eachKey = '' + value.toString() + ''; + numpadKeysContent += eachKey; + } + } + keysRowElements += '
' + numpadKeysContent + backspaceKey + '
'; + } + // keyboard type is 'numpad' off + + // keyboard type is 'all' or 'keyboard' on + if (keyboadType === 'keyboard' || keyboadType === 'all') { + + // only keyboard type is 'all' on + if (keyboadType === 'all') { + var numberKeysObject = { + "0": "1", + "1": "2", + "2": "3", + "3": "4", + "4": "5", + "5": "6", + "6": "7", + "7": "8", + "8": "9", + "9": "0", + }; + + var numberKeysContent = ''; + for (var key in numberKeysObject) { + if (Object.prototype.hasOwnProperty.call(numberKeysObject, key)) { + var index = key; + var value = numberKeysObject[key]; + var length = Object.keys(numberKeysObject).length; + var eachKey = '' + value.toString() + ''; + numberKeysContent += eachKey; + } + } + keysRowElements += '
' + numberKeysContent + '
'; + } + // only keyboard type is 'all' off + + // dynamic keys group on + for (var i = 0; i < jsonData.length; i++) { + var eachObj = data[i]; + var rowKeysContent = ''; + for (var key in eachObj) { + if (Object.prototype.hasOwnProperty.call(eachObj, key)) { + var index = key; + var value = eachObj[key]; + var length = Object.keys(eachObj).length; + var eachKey = '' + value.toString() + ''; + rowKeysContent += eachKey; + } + } + keysRowElements += '
' + rowKeysContent + '
'; + } + // dynamic keys group off + + // bottom keys group on + keysRowElements += '
' + capsLockKey + specialCharacterKey + spaceKey + backspaceKey + '
'; + // bottom keys group off + + // add special character keys if allowed on + if (allowedSpecialCharacters) { + var closeSpecialCharacters = '' + kioskBoardIconClose('18px', keysIconColor) + ''; + var specialCharactersWrapper = '
' + specialCharactersContent + '
'; + keysRowElements += '
' + closeSpecialCharacters + specialCharactersWrapper + '
'; + } + // add special character keys if allowed off + + } + // keyboard type is 'all' or 'keyboard' off + + // keyboard language + var keyboardLanguage = (kioskBoardNewOptions.language && kioskBoardNewOptions.language.length > 0 ? kioskBoardNewOptions.language.toString().toLowerCase() : 'en'); + + // create keys wrapper on + var wrapKeysElement = function (stringHtml) { + var div = window.document.createElement('div'); + div.className = 'kioskboard-wrapper'; + div.innerHTML = stringHtml.trim(); + return div; + }; + var allKeysElement = wrapKeysElement(keysRowElements); // all keyboard element + // create keys wrapper off + + // check "cssAnimations" on + var cssAnimations = (typeof kioskBoardNewOptions.cssAnimations === 'boolean' ? kioskBoardNewOptions.cssAnimations : true); + var cssAnimationsClass = 'no-animation'; + var cssAnimationsStyle = 'no-animation'; + var cssAnimationsDuration = 0; + if (cssAnimations) { + cssAnimationsClass = 'kioskboard-with-animation'; + cssAnimationsStyle = 'kioskboard-fade'; + cssAnimationsDuration = (typeof kioskBoardNewOptions.cssAnimationsDuration === 'number' ? kioskBoardNewOptions.cssAnimationsDuration : 360); + + if (kioskBoardNewOptions.cssAnimationsStyle === 'slide') { + cssAnimationsStyle = 'kioskboard-slide'; + } + } + // check "cssAnimations" off + + // create the keyboard on + var theTheme = (kioskBoardNewOptions.theme && kioskBoardNewOptions.theme.length > 0 ? kioskBoardNewOptions.theme : 'light'); + var kioskBoardVirtualKeyboard = window.document.createElement('div'); + kioskBoardVirtualKeyboard.id = 'KioskBoard-VirtualKeyboard'; + kioskBoardVirtualKeyboard.classList.add('kioskboard-theme-' + theTheme); + kioskBoardVirtualKeyboard.classList.add(cssAnimationsClass); + kioskBoardVirtualKeyboard.classList.add(cssAnimationsStyle); + kioskBoardVirtualKeyboard.classList.add((isCapsLockActive ? 'kioskboard-touppercase' : 'kioskboard-tolowercase')); + kioskBoardVirtualKeyboard.lang = keyboardLanguage; + kioskBoardVirtualKeyboard.style.webkitLocale = '"' + keyboardLanguage + '"'; + kioskBoardVirtualKeyboard.style.animationDuration = (cssAnimations ? cssAnimationsDuration + 'ms' : ''); + + kioskBoardVirtualKeyboard.appendChild(allKeysElement); + // create the keyboard off + + // input element trigger change on + var changeEvent = new Event('change', { + 'bubbles': true, + 'cancelable': true + }); + // input element trigger change off + + // input element keyup listener on + theInput.addEventListener('keypress', function (e) { + // if: allowed real keyboard use + var allowRealKeyboard = typeof kioskBoardNewOptions.allowRealKeyboard === 'boolean' ? kioskBoardNewOptions.allowRealKeyboard : false; + if (allowRealKeyboard) { + // update theInputValArray on keyup + theInputValArray = this.value.split(''); + } + // else: stop + else { + e.stopPropagation(); + e.preventDefault(); + e.returnValue = false; + e.cancelBubble = true; + return false; + } + }, false); + // input element keyup listener off + + // input element change listener on + theInput.addEventListener('change', function (e) { + theInputSelIndex = this.selectionStart; // update selectionStart + }, false); + // input element change listener off + + // keys click listeners on + var keysClickListeners = function (input) { + + // each key click listener on + var eachKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key'); + if (eachKeyElm && eachKeyElm.length > 0) { + for (var i = 0; i < eachKeyElm.length; i++) { + var keyElm = eachKeyElm[i]; + + keyElm.addEventListener('click', function (e) { + e.preventDefault(); + + // input trigger change for selectionStart + input.dispatchEvent(changeEvent); + + // input trigger focus + input.focus(); + + // key's value + var keyValue = this.dataset.value; + + // check capslock on + if (typeof keyValue === 'string') { + if (isCapsLockActive) { + keyValue = keyValue.toString().toLocaleUpperCase(keyboardLanguage); + } else { + keyValue = keyValue.toString().toLocaleLowerCase(keyboardLanguage); + } + } + // check capslock off + + // add value by index + theInputValArray.splice(theInputSelIndex, 0, keyValue); + + // update input value + input.value = theInputValArray.join(''); + + }, false); + } + } + // each key click listener off + + // capslock key click listener on + var capsLockKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-capslock')[0]; + if (capsLockKeyElm) { + capsLockKeyElm.addEventListener('click', function (e) { + e.preventDefault(); + input.focus(); // focus the input + if (this.classList.contains('capslock-active')) { + this.classList.remove('capslock-active'); + kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase'); + kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase'); + isCapsLockActive = false; + } else { + this.classList.add('capslock-active'); + kioskBoardVirtualKeyboard.classList.remove('kioskboard-tolowercase'); + kioskBoardVirtualKeyboard.classList.add('kioskboard-touppercase'); + isCapsLockActive = true; + } + }, false); + } + // capslock key click listener off + + // backspace key click listener on + var backspaceKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-backspace')[0]; + if (backspaceKeyElm) { + backspaceKeyElm.addEventListener('click', function (e) { + e.preventDefault(); + + // trigger for selectionStart + input.dispatchEvent(changeEvent); + + // input trigger focus + input.focus(); + + // remove value by index + theInputValArray.splice(theInputSelIndex - 1, 1); + + // update input value + input.value = theInputValArray.join(''); + + }, false); + } + // backspace key click listener off + + // specialcharacter key click listener on + var specialCharacterKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-specialcharacter')[0]; + var specialCharactersRowElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-row-specialcharacters')[0]; + // open + if (specialCharacterKeyElm && specialCharactersRowElm) { + specialCharacterKeyElm.addEventListener('click', function (e) { + e.preventDefault(); + input.focus(); // focus the input + if (this.classList.contains('specialcharacter-active')) { + this.classList.remove('specialcharacter-active'); + specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show'); + } else { + this.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) { + e.preventDefault(); + input.focus(); // focus the input + specialCharacterKeyElm.classList.remove('specialcharacter-active'); + specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show'); + }, false); + } + // specialcharacter key click listener off + + } + // keys click listeners off + + // append keyboard on + var keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id); + if (!keyboardElement) { + + // append the keyboard to body + window.document.body.appendChild(kioskBoardVirtualKeyboard); + keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id); + + // check window and keyboard heights on + var windowHeight = Math.round(window.innerHeight); + var documentHeight = Math.round(window.document.body.clientHeight); + var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight); + if (keyboardHeight > Math.round((windowHeight / 3) * 2)) { + var keyboardWrapper = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0]; + keyboardWrapper.style.maxHeight = Math.round((windowHeight / 5) * 3) + 'px'; + keyboardWrapper.style.overflowX = 'hidden'; + keyboardWrapper.style.overflowY = 'auto'; + keyboardWrapper.classList.add('kioskboard-overflow'); + } + // check window and keyboard heights off + + // body padding bottom on + var theInputOffsetTop = Math.round(theInput.getBoundingClientRect().top + window.document.documentElement.scrollTop); + if (documentHeight <= theInputOffsetTop + keyboardHeight + 50) { + // body padding style on + var styleElm = window.document.getElementById('KioskboardBodyPadding'); + if (styleElm && styleElm.parentNode !== null) { + styleElm.parentNode.removeChild(styleElm); + } + + var style = ''; + var styleRange = window.document.createRange(); + styleRange.selectNode(window.document.head); + var styleFragment = styleRange.createContextualFragment(style); + window.document.head.appendChild(styleFragment); + window.document.body.classList.add('kioskboard-body-padding'); + // body padding style off + } + + var userAgent = navigator.userAgent.toLowerCase(); + if (!userAgent.includes('edge') && !userAgent.includes('.net4')) { + var scrollTimeout = setTimeout(function () { + window.scrollTo({ top: theInputOffsetTop - 50, left: 0, behavior: 'smooth' }); + clearTimeout(scrollTimeout); + }, 360); + } + // body padding bottom off + + // keyboard keys click listeners + keysClickListeners(theInput); + + // keyboard click outside listener on + var docClickListener = function (e) { + + // check event target to remove keyboard on + if (e.target !== theInput && e.target !== keyboardElement && !e.target.closest('#' + kioskBoardVirtualKeyboard.id)) { + + kioskBoardVirtualKeyboard.classList.add(cssAnimationsStyle + '-remove'); // add remove class + + 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); + } + // check event target to remove keyboard off + + // toggle inputs on + if (allInputs.includes(theInput)) { + var toggleTimeout = setTimeout(function () { + e.target.blur(); + e.target.focus(); + clearTimeout(toggleTimeout); + }, cssAnimationsDuration); + } + // toggle inputs off + + } + window.document.addEventListener('click', docClickListener); // add document click listener + // keyboard click outside listener off + + } + // append keyboard off + + } + input.addEventListener('focus', inputFocusListener); // add input focus listener + // each input focus listener off + + // each input focusout listener on + var inputFocusoutListener = function (e) { + if (!allowMobileKeyboard && getReadOnlyAttr === null) { + this.removeAttribute('readonly'); + } + } + input.addEventListener('focusout', inputFocusoutListener); // add input focusout listener + // each input focusout listener off + + }; + // Create Keyboard and AppendTo... off + + // Get the Keys from JSON by XMLHttpRequest and AppendTo... on + var getKeysXmlHttpRequest = function (jsonUrl, input) { + + // check the protocol on + if (window.location.protocol.indexOf('http') <= -1) { + kioskBoardConsoleError('The Browser blocked this request by CORS policy.'); + return false; + } + // check the protocol off + + // if "kioskBoardCachedKeys" is undefined || null => send XMLHttpRequest on + if (!kioskBoardCachedKeys) { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.open('GET', jsonUrl, true); + xmlHttp.setRequestHeader('Content-type', 'application/json; charset=utf-8'); + xmlHttp.send(); + xmlHttp.onreadystatechange = function () { + if (this.readyState === 4) { + if (this.status === 200) { // success + var data = this.responseText; // data + var parsedData = JSON.parse(data); // JSON parse data + kioskBoardCachedKeys = parsedData; // cache the keys + createKeyboardAndAppendTo(parsedData, input); // create the keyboard + } else { + kioskBoardConsoleError('XMLHttpRequest Failed. Please check your URL path or protocol.'); + } + } + }; + } + // if "kioskBoardCachedKeys" is undefined || null => send XMLHttpRequest off + }; + // Get the Keys from JSON by XMLHttpRequest and AppendTo... off + + // Check the arguments for proceed on + if (arguments && arguments.length === 1) { + // get all elements + var kbElements = window.document.querySelectorAll(keyboardElement); + + // if: elements exist on the document + if (kbElements && kbElements.length > 0) { + for (var i = 0; i < kbElements.length; i++) { + // each element + var eachElement = kbElements[i]; + + // each element tag name + var getTagName = eachElement.tagName.toString().toLowerCase(); + + // if: an input or textarea element + if (getTagName === 'input' || getTagName === 'textarea') { + + // if: has cached keys => create keyboard by using cached keys + if (kioskBoardCachedKeys) { + createKeyboardAndAppendTo(kioskBoardCachedKeys, eachElement); + } + // else: try to get keys from JSON via XmlHttpRequest + else { + getKeysXmlHttpRequest(keysJsonUrl, eachElement); + } + } + // else: other elements + else { + kioskBoardConsoleLog('You have to call the "KioskBoard" with an ID/ClassName of an Input or a TextArea element. Your element\'s tag name is: "' + getTagName + '". \n\nYou can visit the Documentation page to learn more. \n\nVisit: ' + kioskBoardGithubUrl); + } + } + } + // else: there is no such element... + else { + kioskBoardConsoleError('You called the KioskBoard with "' + keyboardElement + '" selector, but there is no such element on the document.'); + } + + } else if (arguments && arguments.length > 1) { + kioskBoardConsoleError('More parameters than allowed.'); + return false; + } else { + kioskBoardConsoleError('You have to call the "KioskBoard" with an ID/ClassName of an Input or a TextArea element. \n\nYou can visit the Documentation page to learn more. \n\nVisit: ' + kioskBoardGithubUrl); + return false; + } + // Check the arguments for proceed off + }, + }; + return KioskBoard; + // KioskBoard: Main off +}); diff --git a/docs/kioskboard-aio-1.2.0.js b/dist/kioskboard-aio-1.2.1.js similarity index 95% rename from docs/kioskboard-aio-1.2.0.js rename to dist/kioskboard-aio-1.2.1.js index 296bb17..53a427d 100644 --- a/docs/kioskboard-aio-1.2.0.js +++ b/dist/kioskboard-aio-1.2.1.js @@ -1,6 +1,6 @@ /*! * KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard') -* Version: 1.2.0 +* Version: 1.2.1 * Author: Furkan MT ('https://github.com/furcan') * Copyright 2020 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')* */ @@ -36,11 +36,11 @@ // KioskBoard: Internal CSS on var kioskBoardInternalCSS = function () { - if (!document.getElementById('KioskBoardInternalCSS')) { - var internalCSS = document.createElement('style'); + if (!window.document.getElementById('KioskBoardInternalCSS')) { + var internalCSS = window.document.createElement('style'); internalCSS.id = 'KioskBoardInternalCSS'; internalCSS.innerHTML = kioskBoardInternalCSSCodes(); - document.head.appendChild(internalCSS); + window.document.head.appendChild(internalCSS); } }; // KioskBoard: Internal CSS off @@ -424,7 +424,7 @@ // create keys wrapper on var wrapKeysElement = function (stringHtml) { - var div = document.createElement('div'); + var div = window.document.createElement('div'); div.className = 'kioskboard-wrapper'; div.innerHTML = stringHtml.trim(); return div; @@ -450,7 +450,7 @@ // create the keyboard on var theTheme = (kioskBoardNewOptions.theme && kioskBoardNewOptions.theme.length > 0 ? kioskBoardNewOptions.theme : 'light'); - var kioskBoardVirtualKeyboard = document.createElement('div'); + var kioskBoardVirtualKeyboard = window.document.createElement('div'); kioskBoardVirtualKeyboard.id = 'KioskBoard-VirtualKeyboard'; kioskBoardVirtualKeyboard.classList.add('kioskboard-theme-' + theTheme); kioskBoardVirtualKeyboard.classList.add(cssAnimationsClass); @@ -499,7 +499,7 @@ var keysClickListeners = function (input) { // each key click listener on - var eachKeyElm = document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key'); + var eachKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key'); if (eachKeyElm && eachKeyElm.length > 0) { for (var i = 0; i < eachKeyElm.length; i++) { var keyElm = eachKeyElm[i]; @@ -538,7 +538,7 @@ // each key click listener off // capslock key click listener on - var capsLockKeyElm = document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-capslock')[0]; + var capsLockKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-capslock')[0]; if (capsLockKeyElm) { capsLockKeyElm.addEventListener('click', function (e) { e.preventDefault(); @@ -559,7 +559,7 @@ // capslock key click listener off // backspace key click listener on - var backspaceKeyElm = document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-backspace')[0]; + var backspaceKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-backspace')[0]; if (backspaceKeyElm) { backspaceKeyElm.addEventListener('click', function (e) { e.preventDefault(); @@ -581,8 +581,8 @@ // backspace key click listener off // specialcharacter key click listener on - var specialCharacterKeyElm = document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-specialcharacter')[0]; - var specialCharactersRowElm = document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-row-specialcharacters')[0]; + var specialCharacterKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-specialcharacter')[0]; + var specialCharactersRowElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-row-specialcharacters')[0]; // open if (specialCharacterKeyElm && specialCharactersRowElm) { specialCharacterKeyElm.addEventListener('click', function (e) { @@ -598,7 +598,7 @@ }, false); } // close - var specialCharCloseElm = document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-specialcharacter-close')[0]; + var specialCharCloseElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-specialcharacter-close')[0]; if (specialCharCloseElm && specialCharacterKeyElm && specialCharactersRowElm) { specialCharCloseElm.addEventListener('click', function (e) { e.preventDefault(); @@ -613,19 +613,19 @@ // keys click listeners off // append keyboard on - var keyboardElement = document.getElementById(kioskBoardVirtualKeyboard.id); + var keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id); if (!keyboardElement) { // append the keyboard to body - document.body.appendChild(kioskBoardVirtualKeyboard); - keyboardElement = document.getElementById(kioskBoardVirtualKeyboard.id); + window.document.body.appendChild(kioskBoardVirtualKeyboard); + keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id); // check window and keyboard heights on var windowHeight = Math.round(window.innerHeight); - var documentHeight = Math.round(document.body.clientHeight); - var keyboardHeight = Math.round(document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight); + var documentHeight = Math.round(window.document.body.clientHeight); + var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight); if (keyboardHeight > Math.round((windowHeight / 3) * 2)) { - var keyboardWrapper = document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0]; + var keyboardWrapper = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0]; keyboardWrapper.style.maxHeight = Math.round((windowHeight / 5) * 3) + 'px'; keyboardWrapper.style.overflowX = 'hidden'; keyboardWrapper.style.overflowY = 'auto'; @@ -634,20 +634,20 @@ // check window and keyboard heights off // body padding bottom on - var theInputOffsetTop = Math.round(theInput.getBoundingClientRect().top + document.documentElement.scrollTop); + var theInputOffsetTop = Math.round(theInput.getBoundingClientRect().top + window.document.documentElement.scrollTop); if (documentHeight <= theInputOffsetTop + keyboardHeight + 50) { // body padding style on - var styleElm = document.getElementById('KioskboardBodyPadding'); + var styleElm = window.document.getElementById('KioskboardBodyPadding'); if (styleElm && styleElm.parentNode !== null) { styleElm.parentNode.removeChild(styleElm); } var style = ''; - var styleRange = document.createRange(); - styleRange.selectNode(document.head); + var styleRange = window.document.createRange(); + styleRange.selectNode(window.document.head); var styleFragment = styleRange.createContextualFragment(style); - document.head.appendChild(styleFragment); - document.body.classList.add('kioskboard-body-padding'); + window.document.head.appendChild(styleFragment); + window.document.body.classList.add('kioskboard-body-padding'); // body padding style off } @@ -674,8 +674,8 @@ var removeTimeout = setTimeout(function () { if (keyboardElement.parentNode !== null) { keyboardElement.parentNode.removeChild(keyboardElement); // remove keyboard - document.body.classList.remove('kioskboard-body-padding'); // remove body padding class - document.removeEventListener('click', docClickListener); // remove document click listener + window.document.body.classList.remove('kioskboard-body-padding'); // remove body padding class + window.document.removeEventListener('click', docClickListener); // remove document click listener } clearTimeout(removeTimeout); }, cssAnimationsDuration); @@ -693,7 +693,7 @@ // toggle inputs off } - document.addEventListener('click', docClickListener); // add document click listener + window.document.addEventListener('click', docClickListener); // add document click listener // keyboard click outside listener off } @@ -751,7 +751,7 @@ // Check the arguments for proceed on if (arguments && arguments.length === 1) { // get all elements - var kbElements = document.querySelectorAll(keyboardElement); + var kbElements = window.document.querySelectorAll(keyboardElement); // if: elements exist on the document if (kbElements && kbElements.length > 0) { diff --git a/docs/index.html b/docs/index.html index 6144445..9e2b0f5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,7 +24,7 @@ - + @@ -49,7 +49,7 @@

KioskBoard

Virtual Keyboard

A pure JavaScript library for using the Virtual Keyboard.

-

v1.2.0

+

v1.2.1

Browser Compatibility
@@ -400,9 +400,9 @@

Language (JSON)

- + - + \ No newline at end of file diff --git a/docs/kioskboard-aio-1.2.1.js b/docs/kioskboard-aio-1.2.1.js new file mode 100644 index 0000000..53a427d --- /dev/null +++ b/docs/kioskboard-aio-1.2.1.js @@ -0,0 +1,800 @@ +/*! +* KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard') +* Version: 1.2.1 +* Author: Furkan MT ('https://github.com/furcan') +* Copyright 2020 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')* +*/ + +/* global define */ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], function () { + return factory(root); + }); + } else if (typeof module === 'object' && typeof module.exports === 'object') { + module.exports = factory(root); + } else { + root.KioskBoard = factory(root); + } +})(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this, function (window) { + + // eslint-disable-next-line + 'use strict'; + + // SSR check on + if (typeof window === 'undefined' && typeof window.document === 'undefined') { + return; + } + // SSR check off + + // KioskBoard: Internal CSS codes on + var kioskBoardInternalCSSCodes = function () { + var css = '#KioskBoard-VirtualKeyboard{box-sizing:border-box!important;position:fixed;z-index:2000;width:100%;max-width:1440px;background:#e3e3e3;background:linear-gradient(to right bottom,#eee,#ebebeb,#e8e8e8,#e6e6e6,#e3e3e3);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);padding:25px 20px 20px;border-radius:10px 10px 0 0;left:0;right:0;bottom:0;margin:auto}#KioskBoard-VirtualKeyboard *{box-sizing:border-box!important}#KioskBoard-VirtualKeyboard .kioskboard-wrapper{position:relative;background:inherit;float:left;width:100%}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow{padding-right:12px!important;overflow:hidden auto}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar{height:6px;width:6px}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar-track{border-radius:3px;background:rgba(255,255,255,.75)}#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(0,0,0,.25);cursor:pointer}#KioskBoard-VirtualKeyboard .kioskboard-row{position:relative;text-align:center;float:left;width:100%}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]{-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;position:relative;transition:all .2s ease-in-out;transform-origin:bottom center;cursor:pointer;font-size:22px;line-height:1;font-weight:400;font-family:sans-serif;text-align:left;display:inline-block;max-width:120px;width:calc(8.3333% - 16px);margin:8px 8px 12px;padding:12px 12px 22px;border-radius:8px;background:#fafafa;color:#707070;border:2px solid rgba(255,255,255,.04);box-shadow:0 4px 0 .04px rgba(0,0,0,.12);border-bottom-color:rgba(255,255,255,.1);border-bottom-width:4px}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]:not(.spacebar-denied):hover{transform:scaleY(.98) translateY(1px)}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]:not(.spacebar-denied):active{transform:scaleY(.95) translateY(4px)}#KioskBoard-VirtualKeyboard.kioskboard-tolowercase .kioskboard-row-dynamic span[class^=kioskboard-key]{text-transform:lowercase}#KioskBoard-VirtualKeyboard.kioskboard-touppercase .kioskboard-row-dynamic span[class^=kioskboard-key]{text-transform:uppercase}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] svg{position:absolute;z-index:10;left:10px;top:10px}#KioskBoard-VirtualKeyboard .kioskboard-row-top{padding:0 0 10px;border-bottom:1px solid rgba(0,0,0,.06);margin:0 0 10px}#KioskBoard-VirtualKeyboard .kioskboard-row-top span[class^=kioskboard-key]{max-width:90px}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom{padding:10px 0 0;border-top:1px solid rgba(0,0,0,.06);margin:10px 0 0}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span[class^=kioskboard-key]{float:left}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock{max-width:unset;min-height:60px;width:140px}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock:before{content:"";position:absolute;z-index:2;width:10px;height:10px;border-radius:10px;right:6px;top:6px;background:#c4c4c4}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before{background:#5decaa}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace{position:relative;max-width:unset;min-height:60px;width:140px}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space{min-height:60px;max-width:unset;width:calc(100% - 16px - 140px - 16px - 140px - 16px)}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-space{width:calc(100% - 16px - 140px - 16px - 140px - 16px - 140px - 16px)}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space.spacebar-denied{opacity:.4!important;cursor:not-allowed!important}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter{position:relative;max-width:unset;min-height:60px;width:140px}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad{float:none;display:block;max-width:320px;margin:auto}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span[class^=kioskboard-key]{min-height:60px;float:left;width:calc(33.3333% - 16px)}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-0,#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace{max-width:unset;width:calc(50% - 16px)}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters{transition:all .2s ease-in-out;visibility:hidden;opacity:0;position:absolute;background:inherit;padding:20px;z-index:20;left:0;top:0;height:100%;width:100%}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters.kioskboard-specialcharacter-show{visibility:visible;opacity:1}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close{transition:all .36s ease-in-out;cursor:pointer;position:absolute;z-index:30;right:0;top:-42.5px;width:40px;height:40px;background:#a9a9a9;border-radius:20px;box-shadow:0 0 16px -6px rgba(0,0,0,.25)}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close svg{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;fill:#fff!important;width:16px!important;height:16px!important}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close:hover{transform:rotate(90deg)}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content{float:left;width:100%;max-height:100%;padding-right:5px;overflow-x:hidden;overflow-y:auto}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content::-webkit-scrollbar{height:6px;width:6px}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content::-webkit-scrollbar-track{border-radius:3px;background:rgba(255,255,255,.75)}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters .kioskboard-specialcharacters-content::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(0,0,0,.25);cursor:pointer}#KioskBoard-VirtualKeyboard.kioskboard-theme-light,#KioskBoard-VirtualKeyboard.kioskboard-theme-material{box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);background:#e3e3e3;background:linear-gradient(to right bottom,#eee,#ebebeb,#e8e8e8,#e6e6e6,#e3e3e3)}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark{box-shadow:inset 1px 1px 0 rgba(0,0,0,.25),0 0 20px -8px rgba(0,0,0,.15);background:#151515;background:linear-gradient(to left top,#151515,#171717,#1a1a1a,#1c1c1c,#1e1e1e)}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat{box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 20px -8px rgba(0,0,0,.15);background:#dfdfdf}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool{box-shadow:inset 4px 4px 4px rgba(0,0,0,.02),0 0 20px -8px rgba(0,0,0,.1);background:#e5e5e5;background:linear-gradient(to right bottom,#e5e5e5,#e6e6e6,#e7e7e7,#e7e7e7,#e8e8e8)}#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row span[class^=kioskboard-key],#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row span[class^=kioskboard-key]{color:#707070;background:#fafafa}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row span[class^=kioskboard-key]{border-color:rgba(255,255,255,.02);border-bottom-color:rgba(255,255,255,.04);box-shadow:0 5px 0 .05px rgba(255,255,255,.2);color:#b7b7b7;background:#323232}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key]{color:#707070;background:#fafafa;box-shadow:unset;border:1px solid rgba(0,0,0,.05)}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key]{color:#8f8f8f;text-shadow:0 0 1px rgba(0,0,0,.2);background:#fafafa;box-shadow:0 4px 6px .06px rgba(0,0,0,.05)}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key]:after{content:"";position:absolute;left:0;top:-5px;right:0;bottom:0;width:100%;height:calc(100% - 5px);background:rgba(255,255,255,.1);box-shadow:0 5px 15px -10px rgba(0,0,0,.4);margin:auto;border-radius:inherit;border:4px solid rgba(0,0,0,.06);border-top-color:rgba(0,0,0,.02);border-bottom-color:transparent;box-sizing:border-box;border-top-width:2px;border-bottom-width:6px}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-bottom span.kioskboard-key-capslock:before{right:9px;top:9px}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-bottom span.kioskboard-key-capslock:before,#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row-bottom span.kioskboard-key-capslock:before,#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-bottom span.kioskboard-key-capslock:before{background:#c4c4c4}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-bottom span.kioskboard-key-capslock:before{background:#a9a9a9}#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-capslock:before{background:#e6e6e6}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before,#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before,#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before,#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-active:before{background:#5decaa}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key] svg,#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row span[class^=kioskboard-key] svg{fill:#707070!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row span[class^=kioskboard-key] svg{fill:#a9a9a9!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key] svg{left:12px;fill:#a1a1a1!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-backspace,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-capslock,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-bottom span.kioskboard-key-specialcharacter,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-numpad span.kioskboard-key-backspace{box-shadow:0 4px 0 .04px rgba(0,0,0,.3);border-bottom-color:rgba(0,0,0,.03);color:#fafafa;background:#b0b0b0}#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row span[class^=kioskboard-key] svg{fill:#fafafa!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close,#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close,#KioskBoard-VirtualKeyboard.kioskboard-theme-material .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close,#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close{background:#a9a9a9!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close{background:#323232!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-dark .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close svg{fill:#b7b7b7!important}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-fade{opacity:1;animation:kioskboard-animation-fade .36s ease-in-out 0s normal;-webkit-animation:kioskboard-animation-fade .36s ease-in-out 0s normal}@keyframes kioskboard-animation-fade{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes kioskboard-animation-fade{0%{opacity:0}100%{opacity:1}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-fade.kioskboard-fade-remove{opacity:0;animation:kioskboard-animation-fade-remove .36s ease-in-out 0s normal;-webkit-animation:kioskboard-animation-fade-remove .36s ease-in-out 0s normal}@keyframes kioskboard-animation-fade-remove{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes kioskboard-animation-fade-remove{0%{opacity:1}100%{opacity:0}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-slide{bottom:0;animation:kioskboard-animation-slide 1.2s ease-in-out 0s normal;-webkit-animation:kioskboard-animation-slide 1.2s ease-in-out 0s normal}@keyframes kioskboard-animation-slide{0%{bottom:-100%}100%{bottom:0}}@-webkit-keyframes kioskboard-animation-slide{0%{bottom:-100%}100%{bottom:0}}#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-slide.kioskboard-slide-remove{bottom:-100%;animation:kioskboard-animation-slide-remove 1.2s ease-in-out 0s normal;-webkit-animation:kioskboard-animation-slide-remove 1.2s ease-in-out 0s normal}@keyframes kioskboard-animation-slide-remove{0%{bottom:0}100%{bottom:-100%}}@-webkit-keyframes kioskboard-animation-slide-remove{0%{bottom:0}100%{bottom:-100%}}@media only screen and (max-width:767px){#KioskBoard-VirtualKeyboard{min-height:210px;padding:12px 6px}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters{padding:30px 0}#KioskBoard-VirtualKeyboard .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close{top:-30px;width:35px;height:35px}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key]{font-size:13.5px!important;line-height:1!important;padding:4px 2px!important;text-align:center;min-width:21px;margin:4px 4px 10px;border-radius:3px}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^=kioskboard-key]{line-height:22px!important}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span[class^=kioskboard-key]{font-size:16px!important;line-height:36px!important;padding:0 2px!important;width:calc(33.3333% - 8px);min-height:36px}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row.kioskboard-row-numpad span[class^=kioskboard-key]{line-height:36px!important}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace,#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock,#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter{max-width:unset;min-height:40px;width:60px}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-space{max-width:unset;min-height:40px;width:calc(100% - 8px - 60px - 8px - 60px - 8px)}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-space{width:calc(100% - 8px - 60px - 8px - 60px - 8px - 60px - 8px)}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-0,#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace{max-width:unset;min-height:36px;width:calc(50% - 8px)}#KioskBoard-VirtualKeyboard .kioskboard-row-numpad span.kioskboard-key-backspace{min-height:42px}#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row-numpad span.kioskboard-key-backspace{min-height:38px}#KioskBoard-VirtualKeyboard .kioskboard-row span[class^=kioskboard-key] svg{left:6px;top:5px;width:18px!important;height:18px!important}#KioskBoard-VirtualKeyboard .kioskboard-row-bottom.kioskboard-with-specialcharacter span.kioskboard-key-specialcharacter svg{width:36px!important;height:18px!important}#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool .kioskboard-row span[class^=kioskboard-key] svg{left:10px}}'; + return css; + }; + // KioskBoard: Internal CSS codes off + + // KioskBoard: Internal CSS on + var kioskBoardInternalCSS = function () { + if (!window.document.getElementById('KioskBoardInternalCSS')) { + var internalCSS = window.document.createElement('style'); + internalCSS.id = 'KioskBoardInternalCSS'; + internalCSS.innerHTML = kioskBoardInternalCSSCodes(); + window.document.head.appendChild(internalCSS); + } + }; + // KioskBoard: Internal CSS off + + // KioskBoard: Default Options on + var kioskBoardDefaultOptions = { + keysArrayOfObjects: null, + keysJsonUrl: null, + specialCharactersObject: null, + language: 'en', + theme: 'light', // "light" || "dark" || "flat" || "material" || "oldschool" + capsLockActive: true, + allowRealKeyboard: false, + allowMobileKeyboard: false, + cssAnimations: true, + cssAnimationsDuration: 360, + cssAnimationsStyle: 'slide', // "slide" || "fade" + keysAllowSpacebar: true, + keysSpacebarText: 'Space', + keysFontFamily: 'sans-serif', + keysFontSize: '22px', + keysFontWeight: 'normal', + keysIconSize: '25px', + }; + var kioskBoardCachedKeys; + var kioskBoardNewOptions; + var kioskBoardGithubUrl = 'https://github.com/furcan/KioskBoard'; + // KioskBoard: Default Options off + + // KioskBoard: Extend Options on + var extendKioskBoard = function () { + var extended = {}; + var deep = false; + var i = 0; + if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') { + deep = arguments[0]; + i++; + } + var merge = function (obj) { + for (var prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') { + extended[prop] = extendKioskBoard(extended[prop], obj[prop]); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + for (; i < arguments.length; i++) { + merge(arguments[i]); + } + return extended; + }; + // KioskBoard: Extend Options off + + // KioskBoard: Console Error Function on + var kioskBoardConsoleError = function (errorMessage) { + return console.error('%c KioskBoard (Error) ', 'padding:2px;border-radius:20px;color:#fff;background:#f44336', '\n' + errorMessage); + }; + // KioskBoard: Console Error Function off + + // KioskBoard: Console Log Function on + var kioskBoardConsoleLog = function (logMessage) { + return console.log('%c KioskBoard (Info) ', 'padding:2px;border-radius:20px;color:#fff;background:#00bcd4', '\n' + logMessage); + }; + // KioskBoard: Console Log Function off + + // KioskBoard: Icons on + var kioskBoardIconBackspace = function (width, color) { + if (!width) { width = 25; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + var kioskBoardIconCapslock = function (width, color) { + if (!width) { width = 25; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + var kioskBoardIconSpecialCharacters = function (width, height, color) { + if (!width) { width = 50; } + if (!height) { width = 25; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + var kioskBoardIconClose = function (width, color) { + if (!width) { width = 18; } + if (!color) { color = '#707070'; } + var icon = ''; + return icon; + }; + // KioskBoard: Icons off + + // KioskBoard: Main on + var KioskBoard = { + // Initialize + Init: function (userInitOptions) { + kioskBoardNewOptions = extendKioskBoard(true, kioskBoardDefaultOptions, userInitOptions); + kioskBoardInternalCSS(); + }, + // Merge + Merge: function (userMergeOptions) { + if (kioskBoardNewOptions) { // if initialized + kioskBoardNewOptions = extendKioskBoard(true, kioskBoardNewOptions, userMergeOptions); + } else { // initialize first + kioskBoardConsoleError('You have to initialize KioskBoard before call Merge function.'); + return false; + } + }, + // Run + Run: function (keyboardElement) { + // Check the initialize on + if (!kioskBoardNewOptions) { + kioskBoardConsoleError('You have to initialize KioskBoard first. \n\nVisit to learn how: ' + kioskBoardGithubUrl); + return false; + } + // Check the initialize off + + // Keys Object + var keysArrayOfObjects = kioskBoardNewOptions.keysArrayOfObjects; + var hasKeysObject = false; + + // Step 1: check the "keysArrayOfObjects" on + if (keysArrayOfObjects && typeof keysArrayOfObjects === 'object' && keysArrayOfObjects.length > 0) { + // check least one if exist + if (typeof keysArrayOfObjects[0] === 'object') { + for (var key in keysArrayOfObjects[0]) { + if (Object.prototype.hasOwnProperty.call(keysArrayOfObjects[0], key)) { + // has keys object + hasKeysObject = true; + // cache the keys object + kioskBoardCachedKeys = keysArrayOfObjects; + } + } + } + } + // Step 1: check the "keysArrayOfObjects" off + + // Step 2: check the "keysJsonUrl" on + if (!hasKeysObject) { + // keys json url + var keysJsonUrl = kioskBoardNewOptions.keysJsonUrl; + // check the "keysJsonUrl" + if (!keysJsonUrl) { + kioskBoardConsoleError('You have to set the path of KioskBoard Keys JSON file to "keysJsonUrl" option. \n\nVisit to learn how: ' + kioskBoardGithubUrl); + return false; + } + } + // Step 2: check the "keysJsonUrl" off + + // Create Keyboard and AppendTo... on + var createKeyboardAndAppendTo = function (data, input) { + // all inputs + var allInputs = []; + allInputs.push(input); + + // all inputs readonly check + var allowMobileKeyboard = typeof kioskBoardNewOptions.allowMobileKeyboard === 'boolean' ? kioskBoardNewOptions.allowMobileKeyboard : false; + var getReadOnlyAttr = input.getAttribute('readonly'); + + // each input focus listener on + var inputFocusListener = function (e) { + // input element variables on + var theInput = this; + var theInputSelIndex = 0; + var theInputValArray = []; + var keyboadType = (theInput.dataset.kioskboardType ? theInput.dataset.kioskboardType.toString().toLowerCase() : 'all'); + var allowedSpecialCharacters = (theInput.dataset.kioskboardSpecialcharacters ? JSON.parse(theInput.dataset.kioskboardSpecialcharacters) : false); + // input element variables off + + // check mobile keyboard allowed on + if (!allowMobileKeyboard) { + theInput.setAttribute('readonly', 'readonly'); + } + // check mobile keyboard allowed off + + // update theInputSelIndex on focus + theInputSelIndex = theInput.selectionStart; + + // update theInputValArray on focus + theInputValArray = theInput.value.split(''); + + // data + var jsonData = data; + + // row keys element on + var keysRowElements = ''; + // row keys element off + + // all keys styles on + var fontFamily = (kioskBoardNewOptions.keysFontFamily && kioskBoardNewOptions.keysFontFamily.length > 0 ? kioskBoardNewOptions.keysFontFamily : 'sans-serif'); + var fontSize = (kioskBoardNewOptions.keysFontSize && kioskBoardNewOptions.keysFontSize.length > 0 ? kioskBoardNewOptions.keysFontSize : '22px'); + var fontWeight = (kioskBoardNewOptions.keysFontWeight && kioskBoardNewOptions.keysFontWeight.length > 0 ? kioskBoardNewOptions.keysFontWeight : 'normal'); + // all keys styles off + + // static keys on + var isCapsLockActive = (typeof kioskBoardNewOptions.capsLockActive === 'boolean' ? kioskBoardNewOptions.capsLockActive : true); + var keysIconWidth = (kioskBoardNewOptions.keysIconSize && kioskBoardNewOptions.keysIconSize.length > 0 ? kioskBoardNewOptions.keysIconSize : '25px'); + var keysIconColor = '#707070'; + var keysAllowSpacebar = (typeof kioskBoardNewOptions.keysAllowSpacebar === 'boolean' ? kioskBoardNewOptions.keysAllowSpacebar : true); + var spaceKeyValue = keysAllowSpacebar ? ' ' : ''; + var keysSpacebarText = (kioskBoardNewOptions.keysSpacebarText && kioskBoardNewOptions.keysSpacebarText.length > 0 ? kioskBoardNewOptions.keysSpacebarText : 'Space'); + + var spaceKey = '' + keysSpacebarText + ''; + var capsLockKey = '' + kioskBoardIconCapslock(keysIconWidth, keysIconColor) + ''; + var backspaceKey = '' + kioskBoardIconBackspace(keysIconWidth, keysIconColor) + ''; + // static keys off + + // keyboard "specialcharacter" setting is "true" on + var specialCharacterKey = ''; + var specialCharactersContent = ''; + if (allowedSpecialCharacters) { + var theUnit = (keysIconWidth.includes('%') ? '%' : 'px'); + var theSize = keysIconWidth.toString().match(/\d/g); + var specialKeyWidth = (theSize.join('') * 2) + theUnit; + var specialKeyHeight = theSize.join('') + theUnit; + specialCharacterKey = '' + kioskBoardIconSpecialCharacters(specialKeyWidth, specialKeyHeight, keysIconColor) + ''; + var specialKeysObject = { + "0": "!", + "1": "'", + "2": "^", + "3": "#", + "4": "+", + "5": "$", + "6": "%", + "7": "½", + "8": "&", + "9": "/", + "10": "{", + "11": "}", + "12": "(", + "13": ")", + "14": "[", + "15": "]", + "16": "=", + "17": "*", + "18": "?", + "19": "\\", + "20": "-", + "21": "_", + "22": "|", + "23": "@", + "24": "€", + "25": "₺", + "26": "~", + "27": "æ", + "28": "ß", + "29": "<", + "30": ">", + "31": ",", + "32": ";", + "33": ".", + "34": ":", + "35": "`" + }; + + // check "specialCharactersObject" for override on + var specialCharsObj = kioskBoardNewOptions.specialCharactersObject; + if (specialCharsObj && typeof specialCharsObj === 'object') { + // check least one if exist + if (typeof specialCharsObj[0] === 'object') { + for (var key in specialCharsObj[0]) { + if (Object.prototype.hasOwnProperty.call(specialCharsObj[0], key)) { + specialKeysObject = specialCharsObj; // override special characters object + } + } + } + } + // check "specialCharactersObject" for override off + + for (var key in specialKeysObject) { + if (Object.prototype.hasOwnProperty.call(specialKeysObject, key)) { + var index = key; + var value = specialKeysObject[key]; + var length = Object.keys(specialKeysObject).length; + var eachKey = '' + value.toString() + ''; + specialCharactersContent += eachKey; + } + } + } + // keyboard "specialcharacter" setting is "true" off + + // keyboard type is 'numpad' on + if (keyboadType === 'numpad') { + var numpadKeysObject = { + "0": "7", + "1": "8", + "2": "9", + "3": "4", + "4": "5", + "5": "6", + "6": "1", + "7": "2", + "8": "3", + "9": "0", + }; + + var numpadKeysContent = ''; + for (var key in numpadKeysObject) { + if (Object.prototype.hasOwnProperty.call(numpadKeysObject, key)) { + var index = key; + var value = numpadKeysObject[key]; + var length = Object.keys(numpadKeysObject).length; + var eachKey = '' + value.toString() + ''; + numpadKeysContent += eachKey; + } + } + keysRowElements += '
' + numpadKeysContent + backspaceKey + '
'; + } + // keyboard type is 'numpad' off + + // keyboard type is 'all' or 'keyboard' on + if (keyboadType === 'keyboard' || keyboadType === 'all') { + + // only keyboard type is 'all' on + if (keyboadType === 'all') { + var numberKeysObject = { + "0": "1", + "1": "2", + "2": "3", + "3": "4", + "4": "5", + "5": "6", + "6": "7", + "7": "8", + "8": "9", + "9": "0", + }; + + var numberKeysContent = ''; + for (var key in numberKeysObject) { + if (Object.prototype.hasOwnProperty.call(numberKeysObject, key)) { + var index = key; + var value = numberKeysObject[key]; + var length = Object.keys(numberKeysObject).length; + var eachKey = '' + value.toString() + ''; + numberKeysContent += eachKey; + } + } + keysRowElements += '
' + numberKeysContent + '
'; + } + // only keyboard type is 'all' off + + // dynamic keys group on + for (var i = 0; i < jsonData.length; i++) { + var eachObj = data[i]; + var rowKeysContent = ''; + for (var key in eachObj) { + if (Object.prototype.hasOwnProperty.call(eachObj, key)) { + var index = key; + var value = eachObj[key]; + var length = Object.keys(eachObj).length; + var eachKey = '' + value.toString() + ''; + rowKeysContent += eachKey; + } + } + keysRowElements += '
' + rowKeysContent + '
'; + } + // dynamic keys group off + + // bottom keys group on + keysRowElements += '
' + capsLockKey + specialCharacterKey + spaceKey + backspaceKey + '
'; + // bottom keys group off + + // add special character keys if allowed on + if (allowedSpecialCharacters) { + var closeSpecialCharacters = '' + kioskBoardIconClose('18px', keysIconColor) + ''; + var specialCharactersWrapper = '
' + specialCharactersContent + '
'; + keysRowElements += '
' + closeSpecialCharacters + specialCharactersWrapper + '
'; + } + // add special character keys if allowed off + + } + // keyboard type is 'all' or 'keyboard' off + + // keyboard language + var keyboardLanguage = (kioskBoardNewOptions.language && kioskBoardNewOptions.language.length > 0 ? kioskBoardNewOptions.language.toString().toLowerCase() : 'en'); + + // create keys wrapper on + var wrapKeysElement = function (stringHtml) { + var div = window.document.createElement('div'); + div.className = 'kioskboard-wrapper'; + div.innerHTML = stringHtml.trim(); + return div; + }; + var allKeysElement = wrapKeysElement(keysRowElements); // all keyboard element + // create keys wrapper off + + // check "cssAnimations" on + var cssAnimations = (typeof kioskBoardNewOptions.cssAnimations === 'boolean' ? kioskBoardNewOptions.cssAnimations : true); + var cssAnimationsClass = 'no-animation'; + var cssAnimationsStyle = 'no-animation'; + var cssAnimationsDuration = 0; + if (cssAnimations) { + cssAnimationsClass = 'kioskboard-with-animation'; + cssAnimationsStyle = 'kioskboard-fade'; + cssAnimationsDuration = (typeof kioskBoardNewOptions.cssAnimationsDuration === 'number' ? kioskBoardNewOptions.cssAnimationsDuration : 360); + + if (kioskBoardNewOptions.cssAnimationsStyle === 'slide') { + cssAnimationsStyle = 'kioskboard-slide'; + } + } + // check "cssAnimations" off + + // create the keyboard on + var theTheme = (kioskBoardNewOptions.theme && kioskBoardNewOptions.theme.length > 0 ? kioskBoardNewOptions.theme : 'light'); + var kioskBoardVirtualKeyboard = window.document.createElement('div'); + kioskBoardVirtualKeyboard.id = 'KioskBoard-VirtualKeyboard'; + kioskBoardVirtualKeyboard.classList.add('kioskboard-theme-' + theTheme); + kioskBoardVirtualKeyboard.classList.add(cssAnimationsClass); + kioskBoardVirtualKeyboard.classList.add(cssAnimationsStyle); + kioskBoardVirtualKeyboard.classList.add((isCapsLockActive ? 'kioskboard-touppercase' : 'kioskboard-tolowercase')); + kioskBoardVirtualKeyboard.lang = keyboardLanguage; + kioskBoardVirtualKeyboard.style.webkitLocale = '"' + keyboardLanguage + '"'; + kioskBoardVirtualKeyboard.style.animationDuration = (cssAnimations ? cssAnimationsDuration + 'ms' : ''); + + kioskBoardVirtualKeyboard.appendChild(allKeysElement); + // create the keyboard off + + // input element trigger change on + var changeEvent = new Event('change', { + 'bubbles': true, + 'cancelable': true + }); + // input element trigger change off + + // input element keyup listener on + theInput.addEventListener('keypress', function (e) { + // if: allowed real keyboard use + var allowRealKeyboard = typeof kioskBoardNewOptions.allowRealKeyboard === 'boolean' ? kioskBoardNewOptions.allowRealKeyboard : false; + if (allowRealKeyboard) { + // update theInputValArray on keyup + theInputValArray = this.value.split(''); + } + // else: stop + else { + e.stopPropagation(); + e.preventDefault(); + e.returnValue = false; + e.cancelBubble = true; + return false; + } + }, false); + // input element keyup listener off + + // input element change listener on + theInput.addEventListener('change', function (e) { + theInputSelIndex = this.selectionStart; // update selectionStart + }, false); + // input element change listener off + + // keys click listeners on + var keysClickListeners = function (input) { + + // each key click listener on + var eachKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key'); + if (eachKeyElm && eachKeyElm.length > 0) { + for (var i = 0; i < eachKeyElm.length; i++) { + var keyElm = eachKeyElm[i]; + + keyElm.addEventListener('click', function (e) { + e.preventDefault(); + + // input trigger change for selectionStart + input.dispatchEvent(changeEvent); + + // input trigger focus + input.focus(); + + // key's value + var keyValue = this.dataset.value; + + // check capslock on + if (typeof keyValue === 'string') { + if (isCapsLockActive) { + keyValue = keyValue.toString().toLocaleUpperCase(keyboardLanguage); + } else { + keyValue = keyValue.toString().toLocaleLowerCase(keyboardLanguage); + } + } + // check capslock off + + // add value by index + theInputValArray.splice(theInputSelIndex, 0, keyValue); + + // update input value + input.value = theInputValArray.join(''); + + }, false); + } + } + // each key click listener off + + // capslock key click listener on + var capsLockKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-capslock')[0]; + if (capsLockKeyElm) { + capsLockKeyElm.addEventListener('click', function (e) { + e.preventDefault(); + input.focus(); // focus the input + if (this.classList.contains('capslock-active')) { + this.classList.remove('capslock-active'); + kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase'); + kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase'); + isCapsLockActive = false; + } else { + this.classList.add('capslock-active'); + kioskBoardVirtualKeyboard.classList.remove('kioskboard-tolowercase'); + kioskBoardVirtualKeyboard.classList.add('kioskboard-touppercase'); + isCapsLockActive = true; + } + }, false); + } + // capslock key click listener off + + // backspace key click listener on + var backspaceKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-backspace')[0]; + if (backspaceKeyElm) { + backspaceKeyElm.addEventListener('click', function (e) { + e.preventDefault(); + + // trigger for selectionStart + input.dispatchEvent(changeEvent); + + // input trigger focus + input.focus(); + + // remove value by index + theInputValArray.splice(theInputSelIndex - 1, 1); + + // update input value + input.value = theInputValArray.join(''); + + }, false); + } + // backspace key click listener off + + // specialcharacter key click listener on + var specialCharacterKeyElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-key-specialcharacter')[0]; + var specialCharactersRowElm = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-row-specialcharacters')[0]; + // open + if (specialCharacterKeyElm && specialCharactersRowElm) { + specialCharacterKeyElm.addEventListener('click', function (e) { + e.preventDefault(); + input.focus(); // focus the input + if (this.classList.contains('specialcharacter-active')) { + this.classList.remove('specialcharacter-active'); + specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show'); + } else { + this.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) { + e.preventDefault(); + input.focus(); // focus the input + specialCharacterKeyElm.classList.remove('specialcharacter-active'); + specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show'); + }, false); + } + // specialcharacter key click listener off + + } + // keys click listeners off + + // append keyboard on + var keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id); + if (!keyboardElement) { + + // append the keyboard to body + window.document.body.appendChild(kioskBoardVirtualKeyboard); + keyboardElement = window.document.getElementById(kioskBoardVirtualKeyboard.id); + + // check window and keyboard heights on + var windowHeight = Math.round(window.innerHeight); + var documentHeight = Math.round(window.document.body.clientHeight); + var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight); + if (keyboardHeight > Math.round((windowHeight / 3) * 2)) { + var keyboardWrapper = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0]; + keyboardWrapper.style.maxHeight = Math.round((windowHeight / 5) * 3) + 'px'; + keyboardWrapper.style.overflowX = 'hidden'; + keyboardWrapper.style.overflowY = 'auto'; + keyboardWrapper.classList.add('kioskboard-overflow'); + } + // check window and keyboard heights off + + // body padding bottom on + var theInputOffsetTop = Math.round(theInput.getBoundingClientRect().top + window.document.documentElement.scrollTop); + if (documentHeight <= theInputOffsetTop + keyboardHeight + 50) { + // body padding style on + var styleElm = window.document.getElementById('KioskboardBodyPadding'); + if (styleElm && styleElm.parentNode !== null) { + styleElm.parentNode.removeChild(styleElm); + } + + var style = ''; + var styleRange = window.document.createRange(); + styleRange.selectNode(window.document.head); + var styleFragment = styleRange.createContextualFragment(style); + window.document.head.appendChild(styleFragment); + window.document.body.classList.add('kioskboard-body-padding'); + // body padding style off + } + + var userAgent = navigator.userAgent.toLowerCase(); + if (!userAgent.includes('edge') && !userAgent.includes('.net4')) { + var scrollTimeout = setTimeout(function () { + window.scrollTo({ top: theInputOffsetTop - 50, left: 0, behavior: 'smooth' }); + clearTimeout(scrollTimeout); + }, 360); + } + // body padding bottom off + + // keyboard keys click listeners + keysClickListeners(theInput); + + // keyboard click outside listener on + var docClickListener = function (e) { + + // check event target to remove keyboard on + if (e.target !== theInput && e.target !== keyboardElement && !e.target.closest('#' + kioskBoardVirtualKeyboard.id)) { + + kioskBoardVirtualKeyboard.classList.add(cssAnimationsStyle + '-remove'); // add remove class + + 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); + } + // check event target to remove keyboard off + + // toggle inputs on + if (allInputs.includes(theInput)) { + var toggleTimeout = setTimeout(function () { + e.target.blur(); + e.target.focus(); + clearTimeout(toggleTimeout); + }, cssAnimationsDuration); + } + // toggle inputs off + + } + window.document.addEventListener('click', docClickListener); // add document click listener + // keyboard click outside listener off + + } + // append keyboard off + + } + input.addEventListener('focus', inputFocusListener); // add input focus listener + // each input focus listener off + + // each input focusout listener on + var inputFocusoutListener = function (e) { + if (!allowMobileKeyboard && getReadOnlyAttr === null) { + this.removeAttribute('readonly'); + } + } + input.addEventListener('focusout', inputFocusoutListener); // add input focusout listener + // each input focusout listener off + + }; + // Create Keyboard and AppendTo... off + + // Get the Keys from JSON by XMLHttpRequest and AppendTo... on + var getKeysXmlHttpRequest = function (jsonUrl, input) { + + // check the protocol on + if (window.location.protocol.indexOf('http') <= -1) { + kioskBoardConsoleError('The Browser blocked this request by CORS policy.'); + return false; + } + // check the protocol off + + // if "kioskBoardCachedKeys" is undefined || null => send XMLHttpRequest on + if (!kioskBoardCachedKeys) { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.open('GET', jsonUrl, true); + xmlHttp.setRequestHeader('Content-type', 'application/json; charset=utf-8'); + xmlHttp.send(); + xmlHttp.onreadystatechange = function () { + if (this.readyState === 4) { + if (this.status === 200) { // success + var data = this.responseText; // data + var parsedData = JSON.parse(data); // JSON parse data + kioskBoardCachedKeys = parsedData; // cache the keys + createKeyboardAndAppendTo(parsedData, input); // create the keyboard + } else { + kioskBoardConsoleError('XMLHttpRequest Failed. Please check your URL path or protocol.'); + } + } + }; + } + // if "kioskBoardCachedKeys" is undefined || null => send XMLHttpRequest off + }; + // Get the Keys from JSON by XMLHttpRequest and AppendTo... off + + // Check the arguments for proceed on + if (arguments && arguments.length === 1) { + // get all elements + var kbElements = window.document.querySelectorAll(keyboardElement); + + // if: elements exist on the document + if (kbElements && kbElements.length > 0) { + for (var i = 0; i < kbElements.length; i++) { + // each element + var eachElement = kbElements[i]; + + // each element tag name + var getTagName = eachElement.tagName.toString().toLowerCase(); + + // if: an input or textarea element + if (getTagName === 'input' || getTagName === 'textarea') { + + // if: has cached keys => create keyboard by using cached keys + if (kioskBoardCachedKeys) { + createKeyboardAndAppendTo(kioskBoardCachedKeys, eachElement); + } + // else: try to get keys from JSON via XmlHttpRequest + else { + getKeysXmlHttpRequest(keysJsonUrl, eachElement); + } + } + // else: other elements + else { + kioskBoardConsoleLog('You have to call the "KioskBoard" with an ID/ClassName of an Input or a TextArea element. Your element\'s tag name is: "' + getTagName + '". \n\nYou can visit the Documentation page to learn more. \n\nVisit: ' + kioskBoardGithubUrl); + } + } + } + // else: there is no such element... + else { + kioskBoardConsoleError('You called the KioskBoard with "' + keyboardElement + '" selector, but there is no such element on the document.'); + } + + } else if (arguments && arguments.length > 1) { + kioskBoardConsoleError('More parameters than allowed.'); + return false; + } else { + kioskBoardConsoleError('You have to call the "KioskBoard" with an ID/ClassName of an Input or a TextArea element. \n\nYou can visit the Documentation page to learn more. \n\nVisit: ' + kioskBoardGithubUrl); + return false; + } + // Check the arguments for proceed off + }, + }; + return KioskBoard; + // KioskBoard: Main off +}); diff --git a/package.json b/package.json index 511ca5e..75740f2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "kioskboard", - "main": "dist/kioskboard-aio-1.2.0.js", - "version": "1.2.0", + "main": "dist/kioskboard-aio-1.2.1.js", + "version": "1.2.1", "description": "A pure JavaScript library for using the Virtual Keyboard.", "homepage": "https://github.com/furcan/KioskBoard", "files": [ diff --git a/dist/kioskboard-1.2.0.css b/previous-versions/1.2.0/kioskboard-1.2.0.css similarity index 100% rename from dist/kioskboard-1.2.0.css rename to previous-versions/1.2.0/kioskboard-1.2.0.css diff --git a/dist/kioskboard-1.2.0.js b/previous-versions/1.2.0/kioskboard-1.2.0.js similarity index 100% rename from dist/kioskboard-1.2.0.js rename to previous-versions/1.2.0/kioskboard-1.2.0.js diff --git a/dist/kioskboard-aio-1.2.0.js b/previous-versions/1.2.0/kioskboard-aio-1.2.0.js similarity index 100% rename from dist/kioskboard-aio-1.2.0.js rename to previous-versions/1.2.0/kioskboard-aio-1.2.0.js diff --git a/previous-versions/1.2.0/kioskboard-keys-english.json b/previous-versions/1.2.0/kioskboard-keys-english.json new file mode 100644 index 0000000..a7a1d56 --- /dev/null +++ b/previous-versions/1.2.0/kioskboard-keys-english.json @@ -0,0 +1,34 @@ +[ + { + "0": "Q", + "1": "W", + "2": "E", + "3": "R", + "4": "T", + "5": "Y", + "6": "U", + "7": "I", + "8": "O", + "9": "P" + }, + { + "0": "A", + "1": "S", + "2": "D", + "3": "F", + "4": "G", + "5": "H", + "6": "J", + "7": "K", + "8": "L" + }, + { + "0": "Z", + "1": "X", + "2": "C", + "3": "V", + "4": "B", + "5": "N", + "6": "M" + } +] \ No newline at end of file diff --git a/previous-versions/1.2.0/kioskboard-keys-french.json b/previous-versions/1.2.0/kioskboard-keys-french.json new file mode 100644 index 0000000..5a7be2a --- /dev/null +++ b/previous-versions/1.2.0/kioskboard-keys-french.json @@ -0,0 +1,38 @@ +[ + { + "0": "A", + "1": "Z", + "2": "E", + "3": "R", + "4": "T", + "5": "Y", + "6": "U", + "7": "I", + "8": "O", + "9": "P" + }, + { + "0": "Q", + "1": "S", + "2": "D", + "3": "F", + "4": "G", + "5": "H", + "6": "J", + "7": "K", + "8": "L", + "9": "M" + }, + { + "0": "W", + "1": "X", + "2": "C", + "3": "V", + "4": "B", + "5": "N", + "6": "É", + "7": "È", + "8": "Ç", + "9": "À" + } +] \ No newline at end of file diff --git a/previous-versions/1.2.0/kioskboard-keys-german.json b/previous-versions/1.2.0/kioskboard-keys-german.json new file mode 100644 index 0000000..5fa6cbc --- /dev/null +++ b/previous-versions/1.2.0/kioskboard-keys-german.json @@ -0,0 +1,37 @@ +[ + { + "0": "Q", + "1": "W", + "2": "E", + "3": "R", + "4": "T", + "5": "Z", + "6": "U", + "7": "I", + "8": "O", + "9": "P", + "10": "Ü" + }, + { + "0": "A", + "1": "S", + "2": "D", + "3": "F", + "4": "G", + "5": "H", + "6": "J", + "7": "K", + "8": "L", + "9": "Ö", + "10": "Ä" + }, + { + "0": "Y", + "1": "X", + "2": "C", + "3": "V", + "4": "B", + "5": "N", + "6": "M" + } +] \ No newline at end of file diff --git a/previous-versions/1.2.0/kioskboard-keys-spanish.json b/previous-versions/1.2.0/kioskboard-keys-spanish.json new file mode 100644 index 0000000..725a1c8 --- /dev/null +++ b/previous-versions/1.2.0/kioskboard-keys-spanish.json @@ -0,0 +1,35 @@ +[ + { + "0": "Q", + "1": "W", + "2": "E", + "3": "R", + "4": "T", + "5": "Y", + "6": "U", + "7": "I", + "8": "O", + "9": "P" + }, + { + "0": "A", + "1": "S", + "2": "D", + "3": "F", + "4": "G", + "5": "H", + "6": "J", + "7": "K", + "8": "L", + "9": "Ñ" + }, + { + "0": "Z", + "1": "X", + "2": "C", + "3": "V", + "4": "B", + "5": "N", + "6": "M" + } +] \ No newline at end of file diff --git a/previous-versions/1.2.0/kioskboard-keys-turkish.json b/previous-versions/1.2.0/kioskboard-keys-turkish.json new file mode 100644 index 0000000..bfc65ab --- /dev/null +++ b/previous-versions/1.2.0/kioskboard-keys-turkish.json @@ -0,0 +1,40 @@ +[ + { + "0": "Q", + "1": "W", + "2": "E", + "3": "R", + "4": "T", + "5": "Y", + "6": "U", + "7": "I", + "8": "O", + "9": "P", + "10": "Äž", + "11": "Ãœ" + }, + { + "0": "A", + "1": "S", + "2": "D", + "3": "F", + "4": "G", + "5": "H", + "6": "J", + "7": "K", + "8": "L", + "9": "Åž", + "10": "Ä°" + }, + { + "0": "Z", + "1": "X", + "2": "C", + "3": "V", + "4": "B", + "5": "N", + "6": "M", + "7": "Ö", + "8": "Ç" + } +] \ No newline at end of file