From 88844ee56020acae433af62c62f328089bd3a992 Mon Sep 17 00:00:00 2001 From: Chris Hubbard Date: Mon, 22 Jul 2024 17:28:52 -0400 Subject: [PATCH] Handle navigation/history in a single component (#649) --- src/lib/components/BookSelector.svelte | 24 +++-------- src/lib/components/ChapterSelector.svelte | 17 ++------ src/lib/components/SearchResultCard.svelte | 13 +----- src/lib/data/history.ts | 21 ++++++---- src/lib/navigate/index.ts | 48 ++++++++++++++++++++++ src/routes/+page.svelte | 27 ++---------- 6 files changed, 75 insertions(+), 75 deletions(-) create mode 100644 src/lib/navigate/index.ts diff --git a/src/lib/components/BookSelector.svelte b/src/lib/components/BookSelector.svelte index bb03553a7..adab10fdb 100644 --- a/src/lib/components/BookSelector.svelte +++ b/src/lib/components/BookSelector.svelte @@ -6,21 +6,12 @@ The navbar component. import Dropdown from './Dropdown.svelte'; import SelectGrid from './SelectGrid.svelte'; import TabsMenu from './TabsMenu.svelte'; - import { - refs, - nextRef, - s, - t, - convertStyle, - userSettings, - userSettingsOrDefault - } from '$lib/data/stores'; - import { addHistory } from '$lib/data/history'; + import { refs, nextRef, s, t, convertStyle, userSettingsOrDefault } from '$lib/data/stores'; + import { navigateToText, navigateToUrl } from '$lib/navigate'; import { DropdownIcon } from '$lib/icons'; import config from '$lib/data/config'; import SelectList from './SelectList.svelte'; import * as numerals from '$lib/scripts/numeralSystem'; - import { goto } from '$app/navigation'; import { base } from '$app/paths'; export let displayLabel = undefined; @@ -64,14 +55,11 @@ The navbar component. async function navigateReference(e) { // Handle special book navigation first if (e.detail.tab === b && e.detail?.url) { - const book = e.detail.text; - addHistory({ + navigateToUrl({ collection: $refs.collection, - book, - chapter: '', + book: e.detail.text, url: e.detail.url }); - goto(e.detail.url); return; } if (!showChapterSelector) { @@ -121,15 +109,13 @@ The navbar component. } async function completeNavigation() { - await refs.set({ book: $nextRef.book, chapter: $nextRef.chapter, verse: $nextRef.verse }); - addHistory({ + await navigateToText({ collection: $refs.collection, book: $nextRef.book, chapter: $nextRef.chapter, verse: $nextRef.verse }); document.activeElement.blur(); - goto(`${base}/`); } function resetNavigation() { diff --git a/src/lib/components/ChapterSelector.svelte b/src/lib/components/ChapterSelector.svelte index 817f667f6..68d601de7 100644 --- a/src/lib/components/ChapterSelector.svelte +++ b/src/lib/components/ChapterSelector.svelte @@ -6,20 +6,11 @@ The navbar component. import Dropdown from './Dropdown.svelte'; import SelectGrid from './SelectGrid.svelte'; import TabsMenu from './TabsMenu.svelte'; - import { - refs, - nextRef, - s, - t, - convertStyle, - userSettings, - defaultSettings, - userSettingsOrDefault - } from '$lib/data/stores'; - import { addHistory } from '$lib/data/history'; + import { refs, nextRef, s, t, convertStyle, userSettingsOrDefault } from '$lib/data/stores'; import { DropdownIcon } from '$lib/icons'; import config from '$lib/data/config'; import * as numerals from '$lib/scripts/numeralSystem'; + import { navigateToText } from '$lib/navigate'; /**reference to chapter selector so code can use TabsMenu.setActive*/ let chapterSelector; @@ -65,9 +56,7 @@ The navbar component. } async function completeNavigation() { - await refs.set({ chapter: $nextRef.chapter, verse: $nextRef.verse }); - - addHistory({ + await navigateToText({ collection: $refs.collection, book: $refs.book, chapter: $nextRef.chapter, diff --git a/src/lib/components/SearchResultCard.svelte b/src/lib/components/SearchResultCard.svelte index a14c6ebd0..391b410ee 100644 --- a/src/lib/components/SearchResultCard.svelte +++ b/src/lib/components/SearchResultCard.svelte @@ -3,13 +3,10 @@ A clickable verse card representing a single search result. --> diff --git a/src/lib/data/history.ts b/src/lib/data/history.ts index e2c086b5b..951393be2 100644 --- a/src/lib/data/history.ts +++ b/src/lib/data/history.ts @@ -35,13 +35,16 @@ async function openHistory() { let nextItem: HistoryItem = null; let nextTimer: NodeJS.Timeout = null; -export async function addHistory(item: { - collection: string; - book: string; - chapter: string; - verse?: string; - url?: string; -}) { +export async function addHistory( + item: { + collection: string; + book: string; + chapter: string; + verse?: string; + url?: string; + }, + callback?: (addedItem: HistoryItem) => void +) { let history = await openHistory(); if (nextTimer) { clearTimeout(nextTimer); @@ -52,7 +55,9 @@ export async function addHistory(item: { //console.log("setNextItem", nextItem); nextTimer = setTimeout(async () => { await history.add('history', nextItem); - //console.log("addHistory", nextItem); + if (callback) { + callback(nextItem); + } clearTimeout(nextTimer); nextTimer = null; nextItem = null; diff --git a/src/lib/navigate/index.ts b/src/lib/navigate/index.ts new file mode 100644 index 000000000..aaafdc856 --- /dev/null +++ b/src/lib/navigate/index.ts @@ -0,0 +1,48 @@ +import { refs } from '$lib/data/stores'; +import { addHistory, type HistoryItem } from '$lib/data/history'; +import { goto } from '$app/navigation'; +import { base } from '$app/paths'; +import { get } from 'svelte/store'; + +function logHistoryItemAdded(itemAdded: HistoryItem) { + console.log('History item added:', itemAdded); +} + +export function navigateToUrl(item: { collection: string; book: string; url: string }) { + addHistory({ ...item, chapter: '' }, logHistoryItemAdded); + goto(item.url); +} + +export async function navigateToText(item: { + docSet?: string; + collection?: string; + book: string; + chapter: string; + verse?: string; +}) { + await refs.set({ + docSet: item.docSet, + book: item.book, + chapter: item.chapter, + verse: item.verse + }); + addHistory( + { collection: item.collection, book: item.book, chapter: item.chapter, verse: item.verse }, + logHistoryItemAdded + ); + goto(`${base}/`); +} + +export async function navigateToTextChapterInDirection(direction: number) { + await refs.skip(direction); + const nowRef: any = get(refs); + console.log('navigateToTextInDirection: next=', nowRef); + addHistory( + { + collection: nowRef.collection, + book: nowRef.book, + chapter: nowRef.chapter + }, + logHistoryItemAdded + ); +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f785a365e..51768d3e5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -30,10 +30,8 @@ MODAL_TEXT_APPERANCE, MODAL_COLLECTION, NAVBAR_HEIGHT, - defaultSettings, userSettingsOrDefault } from '$lib/data/stores'; - import { addHistory } from '$lib/data/history'; import { updateAudioPlayer, seekToVerse } from '$lib/data/audio'; import { AudioIcon, @@ -56,6 +54,7 @@ import { page } from '$app/stores'; import { goto } from '$app/navigation'; import { onDestroy, onMount, afterUpdate } from 'svelte'; + import { navigateToTextChapterInDirection } from '$lib/navigate'; let savedScrollPosition = 0; function saveScrollPosition() { @@ -73,32 +72,14 @@ }); async function doSwipe(event) { console.log('SWIPE', event.detail.direction); - const prev = $refs; - await refs.skip(event.detail.direction === 'right' ? -1 : 1); - if (prev !== $refs) { - addHistory({ - collection: $refs.collection, - book: $refs.book, - chapter: $refs.chapter - }); - } + await navigateToTextChapterInDirection(event.detail.direction === 'right' ? -1 : 1); } async function prevChapter() { - await refs.skip(-1); - addHistory({ - collection: $refs.collection, - book: $refs.book, - chapter: $refs.chapter - }); + await navigateToTextChapterInDirection(-1); } async function nextChapter() { - await refs.skip(1); - addHistory({ - collection: $refs.collection, - book: $refs.book, - chapter: $refs.chapter - }); + await navigateToTextChapterInDirection(1); } $: hasPrev = $refs.prev.chapter !== null;