fix navigation bugs and get active-page onload

Author: Sebastian Flick

src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/+page.js

@@ -54,7 +54,7 @@ export async function load({ fetch, params }) {
 			if (selectedIndex > 0) {
 				returnObjects.push(data[witnes][selectedIndex - 1] ?? {});
 			}
-			returnObjects.push(data[witnes][selectedIndex] ?? {});
+			returnObjects.push({ ...data[witnes][selectedIndex], active: true } ?? {});
 			if (selectedIndex <= data[witnes].length - 1) {
 				returnObjects.push(data[witnes][selectedIndex + 1] ?? {});
 			}
@@ -84,11 +84,7 @@ export async function load({ fetch, params }) {
 			}
 			return returnObject;
 		});
-		return returnObjects.length
-			? returnObjects.map((returnObject) => {
-					return { tpData: returnObject.tpData, iiif: returnObject.iiif, page: returnObject.id };
-				})
-			: [{ tpData: false, iiif: false, page: false }];
+		return returnObjects.length ? returnObjects : [{ tpData: false, iiif: false, page: false }];
 	});
 
 	return {

src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/+page.svelte

@@ -4,7 +4,7 @@
 	import TextzeugenContent, { setTarget } from './TextzeugenContent.svelte';
 	import { base } from '$app/paths';
 	import { page } from '$app/stores';
-	import { replaceState } from '$app/navigation';
+	import { afterNavigate, replaceState } from '$app/navigation';
 	import { iiif, teipb } from '$lib/constants';
 
 	/** @type {import('./$types').PageData} */
@@ -66,11 +66,18 @@
 	let localVerses = Array(data.content?.length).fill(`${data.thirties}.${data.verse}`);
 	let localPages = Array(data.content?.length).fill([]);
 	let currentIiif = Array(data.content?.length).fill({});
-	//fill the data from the load-function into the localPages array
-	data.content?.forEach((c, i) => {
-		c.meta.then((meta) => {
-			localPages[i] = [...localPages[i], ...meta];
-			currentIiif[i] = meta[1]?.iiif;
+
+	afterNavigate(() => {
+		//fill the data from the load-function into the localPages array
+		data.content?.forEach((c, i) => {
+			c.meta.then((meta) => {
+				localPages[i] = [...meta];
+				meta
+					.find((m) => m.active)
+					?.iiif.then((iiif) => {
+						currentIiif[i] = iiif;
+					});
+			});
 		});
 	});
 
@@ -79,13 +86,13 @@
 		/** @type {number} */ i,
 		/** @type {string} */ sigla
 	) => {
-		const indexCurrent = localPages[i].findIndex((p) => p.page === e.detail.id);
+		const indexCurrent = localPages[i].findIndex((p) => p.id === e.detail.id);
 		localPages[i][indexCurrent]?.iiif.then((iiif) => {
 			currentIiif[i] = iiif;
 		});
 		const createObject = (/** @type {string} */ id) => {
 			return {
-				page: id,
+				id: id,
 				tpData: fetch(`${teipb}/parts/${sigla}.xml/json?&view=page&id=${id}&odd=parzival.odd`).then(
 					(r) => r.json()
 				),

src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/TextzeugenContent.svelte

@@ -139,14 +139,14 @@
 	on:scrollend={onScrollEnd}
 	bind:this={scrollContainer}
 >
-	{#each pages as pageObject, i (pageObject.page)}
+	{#each pages as pageObject (pageObject.id)}
 		{#await pageObject.tpData}
 			Lade Seite...
 		{:then tpData}
 			{@const pageColumns = tpData.content.split('<br class="tei-cb">')}
 			<div
 				class="page grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-4"
-				data-id={pageObject.page}
+				data-id={pageObject.id}
 				data-next={tpData.nextId}
 				data-previous={tpData.previousId}
 				use:scrollToVerse={$targetVerse}