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

Visual feedback on mobile&desktop

Browse Source
This commit is contained in:
David Li 2019-11-02 09:00:19 +01:00
parent 0c49b12341
commit 5b608d4f71
2 changed files with 35 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: #a6a6a6;
} }
/* When using option "useButtonTag" */ /* When using option "useButtonTag" */

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

@ -84,6 +84,8 @@ class SimpleKeyboard {
this.options.inputName = this.options.inputName || "default"; this.options.inputName = this.options.inputName || "default";
this.options.preventMouseDownDefault = this.options.preventMouseDownDefault =
this.options.preventMouseDownDefault || false; this.options.preventMouseDownDefault || false;
if (this.options.autUseTouchEvents === undefined)
this.options.autoUseTouchEvents = true;
/** /**
* @type {object} Classes identifying loaded plugins * @type {object} Classes identifying loaded plugins
@ -1176,6 +1178,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 +1193,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 +1214,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 +1234,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);
};
} }
} }