From 475a190b5189d7043e90e76a6825b9457ef482b1 Mon Sep 17 00:00:00 2001 From: Matteo Date: Mon, 21 Oct 2024 19:40:02 +0200 Subject: [PATCH] Add support for caps lock auto uppercase first character --- index.d.ts | 6 ++++++ src/kioskboard.css | 12 ++++++++++++ src/kioskboard.js | 36 +++++++++++++++++++++++++++++++----- 3 files changed, 49 insertions(+), 5 deletions(-) diff --git a/index.d.ts b/index.d.ts index 58183d2..9954d65 100644 --- a/index.d.ts +++ b/index.d.ts @@ -81,6 +81,12 @@ declare namespace KioskBoard { */ capsLockActive?: boolean; + /** + * @property {boolean} - Optional, Uppercase or lowercase first character only. Uppercased when `true`. + * @defaultValue `true` + */ + capsLockAuto?: boolean; + /** * @property {boolean} - Optional, Allow or prevent real/physical keyboard usage. Prevented when `false`. * @defaultValue `false` diff --git a/src/kioskboard.css b/src/kioskboard.css index 2b5295f..157e1d2 100644 --- a/src/kioskboard.css +++ b/src/kioskboard.css @@ -235,6 +235,10 @@ background: #5decaa; } +#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-auto::before { + background: #2329f6; +} + #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-enter, #KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace { position: relative; @@ -513,6 +517,14 @@ background: #5decaa; } +#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool span.kioskboard-key-capslock.capslock-auto::before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-flat span.kioskboard-key-capslock.capslock-auto::before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-light span.kioskboard-key-capslock.capslock-auto::before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-dark span.kioskboard-key-capslock.capslock-auto::before, +#KioskBoard-VirtualKeyboard.kioskboard-theme-material span.kioskboard-key-capslock.capslock-auto::before { + background: #2329f6; +} + #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; diff --git a/src/kioskboard.js b/src/kioskboard.js index a008a08..2030dc4 100644 --- a/src/kioskboard.js +++ b/src/kioskboard.js @@ -54,6 +54,7 @@ theme: 'light', // "light" || "dark" || "flat" || "material" || "oldschool" autoScroll: true, capsLockActive: true, + capsLockAuto: false, allowRealKeyboard: false, allowMobileKeyboard: false, cssAnimations: true, @@ -394,7 +395,8 @@ var fontWeight = typeof opt.keysFontWeight === 'string' && opt.keysFontWeight.length > 0 ? opt.keysFontWeight : 'normal'; // static keys: begin - var isCapsLockActive = opt.capsLockActive === true; + var isCapsLockAuto = opt.capsLockAuto === true; + var isCapsLockActive = opt.capsLockActive === true || isCapsLockAuto; var keysIconWidth = typeof opt.keysIconSize === 'string' && opt.keysIconSize.length > 0 ? opt.keysIconSize : '25px'; var keysIconColor = '#707070'; var keysAllowSpacebar = opt.keysAllowSpacebar === true; @@ -403,7 +405,7 @@ var keysEnterText = typeof opt.keysEnterText === 'string' && opt.keysEnterText.length > 0 ? opt.keysEnterText : 'Enter'; var spaceKey = '' + keysSpacebarText + ''; - var capsLockKey = '' + kioskBoardIconCapslock(keysIconWidth, keysIconColor) + ''; + var capsLockKey = '' + kioskBoardIconCapslock(keysIconWidth, keysIconColor) + ''; var backspaceKey = '' + kioskBoardIconBackspace(keysIconWidth, keysIconColor) + ''; var enterKey = '' + keysEnterText + ''; // static keys: end @@ -643,6 +645,17 @@ keyValue = keyValue.toLocaleLowerCase(keyboardLanguage); } + if (isCapsLockAuto) { + isCapsLockActive = false; + isCapsLockAuto = false; + kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase'); + kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase'); + var capsLockKeyElm = window.document.querySelector('.kioskboard-key-capslock'); + if (capsLockKeyElm) { + capsLockKeyElm.classList.remove('capslock-auto'); + } + } + var keyValArr = keyValue.split(''); for (var keyValIndex = 0; keyValIndex < keyValArr.length; keyValIndex++) { // update the selectionStart @@ -675,16 +688,24 @@ // focus the input input.focus(); - if (e.currentTarget.classList.contains('capslock-active')) { + if (e.currentTarget.classList.contains('capslock-auto')) { + e.currentTarget.classList.remove('capslock-auto'); + kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase'); + kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase'); + isCapsLockActive = false; + isCapsLockAuto = false; + } else if (e.currentTarget.classList.contains('capslock-active')) { e.currentTarget.classList.remove('capslock-active'); kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase'); kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase'); isCapsLockActive = false; + isCapsLockAuto = false; } else { e.currentTarget.classList.add('capslock-active'); kioskBoardVirtualKeyboard.classList.remove('kioskboard-tolowercase'); kioskBoardVirtualKeyboard.classList.add('kioskboard-touppercase'); isCapsLockActive = true; + isCapsLockAuto = false; } }); } @@ -727,11 +748,15 @@ keysEventListeners(specialCharacterKeyElm, function (e) { e.preventDefault(); input.focus(); // focus the input - if (e.currentTarget.classList.contains('specialcharacter-active')) { + if (e.currentTarget.classList.contains('specialcharacter-auto')) { + e.currentTarget.classList.remove('specialcharacter-auto'); + e.currentTarget.classList.add('specialcharacter-active'); + specialCharactersRowElm.classList.add('kioskboard-specialcharacter-show'); + } else if (e.currentTarget.classList.contains('specialcharacter-active')) { e.currentTarget.classList.remove('specialcharacter-active'); specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show'); } else { - e.currentTarget.classList.add('specialcharacter-active'); + e.currentTarget.classList.add('specialcharacter-auto'); specialCharactersRowElm.classList.add('kioskboard-specialcharacter-show'); } }); @@ -743,6 +768,7 @@ e.preventDefault(); input.focus(); // focus the input specialCharacterKeyElm.classList.remove('specialcharacter-active'); + specialCharacterKeyElm.classList.remove('specialcharacter-auto'); specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show'); }); }