github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-03-04 00:12:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix activeButtonClass handling

Browse Source
This commit is contained in:
Francisco Hodge 2019-11-07 11:25:43 -05:00
parent d92f84f5c3
commit 0c481cb29a
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/Keyboard.js
View File

@ -136,7 +136,6 @@ class SimpleKeyboard {
* Instance vars * Instance vars
*/ */
this.allKeyboardInstances = window["SimpleKeyboardInstances"]; this.allKeyboardInstances = window["SimpleKeyboardInstances"];
this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]); this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
this.isFirstKeyboardInstance = this.isFirstKeyboardInstance =
this.keyboardInstanceNames[0] === this.currentInstanceName; this.keyboardInstanceNames[0] === this.currentInstanceName;
@ -260,6 +259,11 @@ class SimpleKeyboard {
if (this.options.preventMouseDownDefault) e.preventDefault(); if (this.options.preventMouseDownDefault) e.preventDefault();
if (this.options.stopMouseDownPropagation) e.stopPropagation(); if (this.options.stopMouseDownPropagation) e.stopPropagation();
/**
* Add active class
*/
if (e) e.target.classList.add(this.activeButtonClass);
/** /**
* @type {boolean} Whether the mouse is being held onKeyPress * @type {boolean} Whether the mouse is being held onKeyPress
*/ */
@ -296,6 +300,13 @@ class SimpleKeyboard {
* Handles button mouseup * Handles button mouseup
*/ */
handleButtonMouseUp(button) { handleButtonMouseUp(button) {
/**
* Remove active class
*/
this.recurseButtons(buttonElement => {
buttonElement.classList.remove(this.activeButtonClass);
});
this.isMouseHold = false; this.isMouseHold = false;
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout); if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
@ -441,7 +452,7 @@ class SimpleKeyboard {
/** /**
* Remove all keyboard rows and reset keyboard values. * Remove all keyboard rows and reset keyboard values.
* Used interally between re-renders. * Used internally between re-renders.
*/ */
clear() { clear() {
this.keyboardDOM.innerHTML = ""; this.keyboardDOM.innerHTML = "";
@ -1230,7 +1241,7 @@ class SimpleKeyboard {
buttonDOM.setAttribute(attribute, value); buttonDOM.setAttribute(attribute, value);
}); });
const hgActiveButtonClass = "hg-activeButton"; this.activeButtonClass = "hg-activeButton";
/** /**
* Handle button click event * Handle button click event
@ -1245,16 +1256,13 @@ class SimpleKeyboard {
* Handle PointerEvents * Handle PointerEvents
*/ */
buttonDOM.onpointerdown = e => { buttonDOM.onpointerdown = e => {
buttonDOM.classList.add(hgActiveButtonClass);
this.handleButtonClicked(button); this.handleButtonClicked(button);
this.handleButtonMouseDown(button, e); this.handleButtonMouseDown(button, e);
}; };
buttonDOM.onpointerup = () => { buttonDOM.onpointerup = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button); this.handleButtonMouseUp(button);
}; };
buttonDOM.onpointercancel = () => { buttonDOM.onpointercancel = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button); this.handleButtonMouseUp(button);
}; };
} else { } else {
@ -1266,16 +1274,13 @@ class SimpleKeyboard {
* Handle touch events * Handle touch events
*/ */
buttonDOM.ontouchstart = e => { buttonDOM.ontouchstart = e => {
buttonDOM.classList.add(hgActiveButtonClass);
this.handleButtonClicked(button); this.handleButtonClicked(button);
this.handleButtonMouseDown(button, e); this.handleButtonMouseDown(button, e);
}; };
buttonDOM.ontouchend = () => { buttonDOM.ontouchend = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button); this.handleButtonMouseUp(button);
}; };
buttonDOM.ontouchcancel = () => { buttonDOM.ontouchcancel = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button); this.handleButtonMouseUp(button);
}; };
} else { } else {
@ -1287,11 +1292,9 @@ class SimpleKeyboard {
this.handleButtonClicked(button); this.handleButtonClicked(button);
}; };
buttonDOM.onmousedown = e => { buttonDOM.onmousedown = e => {
buttonDOM.classList.add(hgActiveButtonClass);
this.handleButtonMouseDown(button, e); this.handleButtonMouseDown(button, e);
}; };
buttonDOM.onmouseup = () => { buttonDOM.onmouseup = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button); this.handleButtonMouseUp(button);
}; };
} }