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
-' + 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 @@
KioskBoard
Virtual Keyboard
A pure JavaScript library for using the Virtual Keyboard.
- v1.2.0
+ v1.2.1
Browser Compatibility
@@ -193,15 +193,15 @@ Add to HTML
HTML CSS and JS
- <link rel="stylesheet" href="kioskboard-1.2.0.css" />
+ <link rel="stylesheet" href="kioskboard-1.2.1.css" />
- <script src="kioskboard-1.2.0.js" ></script >
+ <script src="kioskboard-1.2.1.js" ></script >
HTML Only JS (Internal CSS)
- <script src="kioskboard-aio-1.2.0.js" ></script >
+ <script src="kioskboard-aio-1.2.1.js" ></script >
@@ -400,9 +400,9 @@ Language (JSON)
-
+
-
+