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

Handle multiple buttons when using physicalKeyboardHighlight. Fixes https://github.com/hodgef/react-simple-keyboard/issues/2211

Browse Source
This commit is contained in:
Francisco Hodge 2023-01-12 10:31:51 -05:00
parent 08d212d76e
commit 3ad8a9f7fe
1 changed files with 50 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/lib/services/PhysicalKeyboard.ts
View File

@ -34,7 +34,7 @@ class PhysicalKeyboard {
`{${buttonPressed}}`
);
let buttonDOM;
let buttonName;
let buttonName: string;
if (standardButtonPressed) {
buttonDOM = standardButtonPressed;
@ -46,19 +46,38 @@ class PhysicalKeyboard {
return;
}
if (buttonDOM) {
buttonDOM.style.background =
const applyButtonStyle = (buttonElement: HTMLElement) => {
buttonElement.style.background =
options.physicalKeyboardHighlightBgColor || "#dadce4";
buttonDOM.style.color =
buttonElement.style.color =
options.physicalKeyboardHighlightTextColor || "black";
}
if (options.physicalKeyboardHighlightPress) {
if (options.physicalKeyboardHighlightPressUsePointerEvents) {
buttonDOM.onpointerdown();
} else if (options.physicalKeyboardHighlightPressUseClick) {
buttonDOM.click();
} else {
instance.handleButtonClicked(buttonName, event);
if (buttonDOM) {
if(Array.isArray(buttonDOM)){
buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
// Even though we have an array of buttons, we just want to press one of them
if (options.physicalKeyboardHighlightPress) {
if (options.physicalKeyboardHighlightPressUsePointerEvents) {
buttonDOM[0]?.onpointerdown();
} else if (options.physicalKeyboardHighlightPressUseClick) {
buttonDOM[0]?.click();
} else {
instance.handleButtonClicked(buttonName, event);
}
}
} else {
applyButtonStyle(buttonDOM);
if (options.physicalKeyboardHighlightPress) {
if (options.physicalKeyboardHighlightPressUsePointerEvents) {
buttonDOM.onpointerdown();
} else if (options.physicalKeyboardHighlightPressUseClick) {
buttonDOM.click();
} else {
instance.handleButtonClicked(buttonName, event);
}
}
}
}
@ -74,10 +93,26 @@ class PhysicalKeyboard {
instance.getButtonElement(buttonPressed) ||
instance.getButtonElement(`{${buttonPressed}}`);
if (buttonDOM && buttonDOM.removeAttribute) {
buttonDOM.removeAttribute("style");
if (options.physicalKeyboardHighlightPressUsePointerEvents) {
buttonDOM.onpointerup();
const applyButtonStyle = (buttonElement: HTMLElement) => {
if(buttonElement.removeAttribute){
buttonElement.removeAttribute("style");
}
};
if (buttonDOM) {
if(Array.isArray(buttonDOM)){
buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
// Even though we have an array of buttons, we just want to press one of them
if (options.physicalKeyboardHighlightPressUsePointerEvents) {
buttonDOM[0]?.onpointerup();
}
} else {
applyButtonStyle(buttonDOM);
if (options.physicalKeyboardHighlightPressUsePointerEvents) {
buttonDOM.onpointerup();
}
}
}
});