diff --git a/app/composables/useButtonNavigation.ts b/app/composables/useButtonNavigation.ts index 308dfb2..d14ec5d 100644 --- a/app/composables/useButtonNavigation.ts +++ b/app/composables/useButtonNavigation.ts @@ -9,7 +9,7 @@ export const useButtonNavigation = >({ 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 = >({ 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 = >({ } }); - 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,