github/simple-keyboard
github/simple-keyboard
4
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-03-17 09:01:03 +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; display: flex;
align-items: center; align-items: center;
justify-content: 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" */ /* When using option "useButtonTag" */

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

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