github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-01-20 01:22:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #287 from Entkenntnis/master

Browse Source 
Visual feedback on mobile&desktop
This commit is contained in:
Francisco Hodge 2019-11-02 08:03:48 -07:00 committed by GitHub
commit 315ddc3892
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/Keyboard.css
View File

@ -69,6 +69,11 @@ html {
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {
background: #efefef;
}
/* When using option "useButtonTag" */

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

@ -1176,6 +1176,8 @@ class SimpleKeyboard {
buttonDOM.setAttribute(attribute, value);
});
const hgActiveButtonClass = "hg-activeButton";
/**
* Handle button click event
*/
@ -1189,11 +1191,18 @@ class SimpleKeyboard {
* Handle PointerEvents
*/
buttonDOM.onpointerdown = e => {
buttonDOM.classList.add(hgActiveButtonClass);
this.handleButtonClicked(button);
this.handleButtonMouseDown(button, e);
};
buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
buttonDOM.onpointerup = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button);
};
buttonDOM.onpointercancel = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button);
};
} else {
/**
* Fallback for browsers not supporting PointerEvents
@ -1203,11 +1212,18 @@ class SimpleKeyboard {
* Handle touch events
*/
buttonDOM.ontouchstart = e => {
buttonDOM.classList.add(hgActiveButtonClass);
this.handleButtonClicked(button);
this.handleButtonMouseDown(button, e);
};
buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
buttonDOM.ontouchend = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button);
};
buttonDOM.ontouchcancel = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button);
};
} else {
/**
* Handle mouse events
@ -1216,8 +1232,14 @@ class SimpleKeyboard {
this.isMouseHold = false;
this.handleButtonClicked(button);
};
buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
buttonDOM.onmousedown = e => {
buttonDOM.classList.add(hgActiveButtonClass);
this.handleButtonMouseDown(button, e);
};
buttonDOM.onmouseup = () => {
buttonDOM.classList.remove(hgActiveButtonClass);
this.handleButtonMouseUp(button);
};
}
}