dynamic iiif

Author: Sebastian Flick

src/lib/components/IIIFViewer.svelte

@@ -17,8 +17,6 @@
 	let viewer;
 
 	const generateViewer = (/** @type {Element} */ node, /** @type {Object} */ iiif) => {
-		const i = Number(node.id.split('-')[1]);
-		if (!iiif) return;
 		/** @type {ResizeObserver}*/
 		let observer;
 		const createViewer = () => {
@@ -84,13 +82,14 @@
 				},
 				sequenceMode: false
 			});
-			viewer.open(iiif);
 			observer = new ResizeObserver((_entries) => {
 				setTimeout(() => {
 					viewer.viewport.goHome(false);
 				}, 50);
 			});
 			observer.observe(node);
+			if (!iiif) return;
+			viewer.open(iiif);
 		};
 		if (!OpenSeadragon) {
 			import('openseadragon').then((r) => {
@@ -106,6 +105,7 @@
 			 * @param {Promise<Object>} iiif
 			 */
 			update(iiif) {
+				if (!viewer) return;
 				viewer.open(iiif);
 			},
 			destroy() {

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

@@ -51,10 +51,13 @@ export async function load({ fetch, params }) {
 					entry.l.includes(`${thirties}.${verse}`)
 			);
 
-			if (selectedIndex > 0) returnObjects.push(data[witnes][selectedIndex - 1] ?? {});
+			if (selectedIndex > 0) {
+				returnObjects.push(data[witnes][selectedIndex - 1] ?? {});
+			}
 			returnObjects.push(data[witnes][selectedIndex] ?? {});
-			if (selectedIndex <= data[witnes].length - 1)
+			if (selectedIndex <= data[witnes].length - 1) {
 				returnObjects.push(data[witnes][selectedIndex + 1] ?? {});
+			}
 		} else {
 			returnObjects = [data[witnes][0], data[witnes][1]];
 		}

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

@@ -65,10 +65,12 @@
 	setTarget(`${data.thirties}.${data.verse}`);
 	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;
 		});
 	});
 
@@ -78,7 +80,9 @@
 		/** @type {string} */ sigla
 	) => {
 		const indexCurrent = localPages[i].findIndex((p) => p.page === e.detail.id);
-
+		localPages[i][indexCurrent]?.iiif.then((iiif) => {
+			currentIiif[i] = iiif;
+		});
 		const createObject = (/** @type {string} */ id) => {
 			return {
 				page: id,
@@ -162,19 +166,9 @@
 				</section>
 				{#if !($page.url.searchParams.get('iiif')?.split('-')[i] === 'true')}
 					<section class="min-h-[40vh]">
-						{#await localPages[i] then meta}
-							{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
-								{#await meta.iiif}
-									<p>Loading...</p>
-								{:then iiif}
-									{#if typeof iiif === 'object'}
-										<IIIFViewer {iiif} />
-									{/if}
-								{:catch error}
-									<p style="color: red">{error.message}</p>
-								{/await}
-							{/if}
-						{/await}
+						{#if typeof currentIiif[i] === 'object' && Object.keys(currentIiif[i]).length}
+							<IIIFViewer iiif={currentIiif[i]} />
+						{/if}
 					</section>
 				{/if}
 			</article>