diff --git a/src/lib/components/DetachedPage/DetachedPage.svelte b/src/lib/components/DetachedPage/DetachedPage.svelte index 06bbc54..7a2933e 100644 --- a/src/lib/components/DetachedPage/DetachedPage.svelte +++ b/src/lib/components/DetachedPage/DetachedPage.svelte @@ -3,7 +3,8 @@ import { type KeyEvent, type NavigateEvent, useRegistrar } from '../../selectable.js'; import { get } from 'svelte/store'; - const selectable = useRegistrar(); + // Top element, that when focused and back is pressed, will exit the modal + const topSelectable = useRegistrar(); function handleGoBack({ detail }: CustomEvent | CustomEvent) { if ('willLeaveContainer' in detail) { @@ -11,7 +12,12 @@ detail.preventNavigation(); } - history.back(); + const selectable = get(topSelectable); + if (selectable && get(selectable.focusIndex) === 0) { + history.back(); + } else { + selectable?.focusChild(0) || selectable?.focus(); + } } function handleGoToTop({ detail }: CustomEvent | CustomEvent) { @@ -19,11 +25,12 @@ // Navigate event if (detail.direction === 'left' && detail.willLeaveContainer) { detail.preventNavigation(); - get(selectable)?.focus(); + get(topSelectable)?.focus(); } } else { // Back event - get(selectable)?.focus(); + const selectable = get(topSelectable); + selectable?.focusChild(0) || selectable?.focus(); } } @@ -35,6 +42,6 @@ > - + diff --git a/src/lib/components/SeriesPage/SeriesPage.svelte b/src/lib/components/SeriesPage/SeriesPage.svelte index 9a9aba9..a0a5098 100644 --- a/src/lib/components/SeriesPage/SeriesPage.svelte +++ b/src/lib/components/SeriesPage/SeriesPage.svelte @@ -170,7 +170,7 @@ })} > (arg: T): T { return arg; } +export function timeout(ms: number) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} + export function formatDateToYearMonthDay(date: Date) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0');