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

PhysicalKeyboard highlighting improvement

Browse Source
This commit is contained in:
Francisco Hodge 2018-10-06 02:26:57 -04:00
parent 24de8bcb20
commit fa94cf2ba3
1 changed files with 14 additions and 13 deletions

25
src/lib/services/PhysicalKeyboard.js
View File

@ -16,15 +16,13 @@ class PhysicalKeyboard {
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){ if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
let buttonPressed = this.getSimpleKeyboardLayoutKey(event); let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
this.simpleKeyboardInstance.dispatch(section => { this.simpleKeyboardInstance.dispatch(instance => {
section.setOptions({ let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
buttonTheme: [
{ if(buttonDOM){
class: "hg-selectedButton", buttonDOM.style.backgroundColor = this.simpleKeyboardInstance.options.physicalKeyboardHighlightTextColor || "#9ab4d0";
buttons: `${buttonPressed} {${buttonPressed}}` buttonDOM.style.color = this.simpleKeyboardInstance.options.physicalKeyboardHighlightBgColor || "white";
} }
]
})
}); });
} }
}); });
@ -32,11 +30,14 @@ class PhysicalKeyboard {
// Removing button style on keyup // Removing button style on keyup
document.addEventListener("keyup", (event) => { document.addEventListener("keyup", (event) => {
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){ if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
this.simpleKeyboardInstance.dispatch(section => { this.simpleKeyboardInstance.dispatch(instance => {
section.setOptions({ let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
buttonTheme: []
}) if(buttonDOM){
buttonDOM.removeAttribute("style");
}
}); });
} }
}); });