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