pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(useButtonNavigation): wrong click navigation

Browse Source
This commit is contained in:
Stevan
2025-11-14 23:45:34 +01:00
parent 206c20fe94
commit 1d14ad1450
1 changed files with 65 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
app/composables/useButtonNavigation.ts
View File

@@ -9,7 +9,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
buttons: T;
initialButton: keyof T;
onButtonClick?: (buttonName: keyof T) => void;
navigation?: Record<
navigation: Record<
keyof T,
{
up?: keyof T;
@@ -35,6 +35,13 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
if (selectedButton.value === buttonName) {
onButtonClick?.(buttonName);
} else {
if (
navigation[buttonName].down === "last" &&
navigation[selectedButton.value]!.up === buttonName
) {
nextButton.value = selectedButton.value;
}
selectedButton.value = buttonName;
}
break;
@@ -42,77 +49,78 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
}
});
if (navigation) {
const handleKeyPress = (event: KeyboardEvent) => {
const currentButton = selectedButton.value as keyof T;
const currentNav = navigation[currentButton];
const handleKeyPress = (event: KeyboardEvent) => {
const currentButton = selectedButton.value as keyof T;
const currentNav = navigation[currentButton];
if (!currentNav) return;
if (!currentNav) return;
switch (event.key) {
case "ArrowUp":
if (!currentNav.up) return;
switch (event.key) {
case "ArrowUp":
if (!currentNav.up) return;
if (currentNav.up === "last") {
if (currentNav.up === "last") {
selectedButton.value = nextButton.value;
} else {
nextButton.value = selectedButton.value as keyof T;
selectedButton.value = currentNav.up;
}
break;
case "ArrowDown":
if (!currentNav.down) return;
if (currentNav.down === "last") {
if (nextButton.value) {
selectedButton.value = nextButton.value;
} else {
nextButton.value = selectedButton.value as keyof T;
selectedButton.value = currentNav.up;
selectedButton.value = currentNav.left ?? currentNav.right;
}
} else {
selectedButton.value = currentNav.down;
}
break;
break;
case "ArrowLeft":
if (!currentNav.left) return;
case "ArrowDown":
if (!currentNav.down) return;
if (currentNav.horizontalMode === "preview") {
nextButton.value = currentNav.left;
} else {
selectedButton.value = currentNav.left;
}
break;
if (currentNav.down === "last") {
if (nextButton.value) {
selectedButton.value = nextButton.value;
} else {
selectedButton.value = currentNav.left ?? currentNav.right;
}
} else {
selectedButton.value = currentNav.down;
}
break;
case "ArrowRight":
if (!currentNav.right) return;
case "ArrowLeft":
if (!currentNav.left) return;
if (currentNav.horizontalMode === "preview") {
nextButton.value = currentNav.right;
} else {
selectedButton.value = currentNav.right;
}
break;
if (currentNav.horizontalMode === "preview") {
nextButton.value = currentNav.left;
} else {
selectedButton.value = currentNav.left;
}
break;
case "Enter":
case " ":
onButtonClick?.(selectedButton.value);
break;
case "ArrowRight":
if (!currentNav.right) return;
default:
return;
}
if (currentNav.horizontalMode === "preview") {
nextButton.value = currentNav.right;
} else {
selectedButton.value = currentNav.right;
}
break;
event.preventDefault();
};
case "Enter":
case " ":
onButtonClick?.(selectedButton.value);
break;
}
onMounted(() => {
window.addEventListener("keydown", handleKeyPress);
});
event.preventDefault();
};
onMounted(() => {
window.addEventListener("keydown", handleKeyPress);
});
onUnmounted(() => {
window.removeEventListener("keydown", handleKeyPress);
});
}
onUnmounted(() => {
window.removeEventListener("keydown", handleKeyPress);
});
return {
selectedButton,