KioskBoard
KioskBoard copied to clipboard
furcan
[FEAT] - Add close button
A few users have the problem that they do not know how to close the keyboard. Therefore, in my opinion, it would make sense to offer a "close button" that is displayed at the top right. Another option would be a "confirmation button" (e.g. Confirm, OK, Apply).
@furcan I can implement this if you can just point me to the current callback that hides/closes the keyboard? which func is this? How would i call it from console if a keyboard was currently open? I believe its here: https://github.com/furcan/KioskBoard/blob/main/src/kioskboard.js#L809
Hi @DanielKoohmarey It is required to create a common function for hiding and removing the keyboard first. Then we need to use this common function for the exact line that you have mentioned and with the new close button onclick event. Especially because of the new button design and position, I am willing to do it by myself(ASAP). But I will also add you to the PR 🙏 Best wishes, Furkan
Appreciate you planning to do this! I had managed to refactor it for my use case with the same plan, creating a common func first. There are a lot of variable dependencies that need to be refactored, I would recommend you store the keyboard options in the window keyboard object so they are accessible. There is also the doc listener you may need to store somewhere to call within the remove func:
var removeKeyboard = function() {
var cssAnimationsStyle = 'kioskboard-slide'; //'kioskboard-fade'
var cssAnimationsDuration = 360;
var keyboardElement = window.document.getElementById('KioskBoard-VirtualKeyboard');
if (keyboardElement) {
// add remove class
keyboardElement.classList.add(cssAnimationsStyle + '-remove');
// remove after the animation has been ended
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', window.docClickListener); // remove document click listener
}
clearTimeout(removeTimeout);
}, cssAnimationsDuration);
}
};
...
window.docClickListener = function (e) {
var docClickTimeout = setTimeout(function () {
if (
e.target !== theInput &&
!kioskBoardEventTargetIsElementOrChilds(e, keyboardElement) &&
!e.target.classList.contains('kioskboard-body-padding')
) {
removeKeyboard();
}