add custom modal for info

DHBern · May 15, 2024 · 2c57189 · 2c57189
1 parent f6a78f2
commit 2c57189
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 19 deletions.
diff --git a/src/lib/InfoModal.svelte b/src/lib/InfoModal.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getModalStore, TabGroup, Tab } from '@skeletonlabs/skeleton';
+	import { base } from '$app/paths';
+
+	const modalStore = getModalStore();
+
+	let tabSet = 0;
+</script>
+
+<div
+	class="modal block overflow-y-auto bg-surface-100-800-token w-modal h-auto p-4 space-y-4 rounded-container-token shadow-xl"
+>
+	{#if $modalStore[0]}
+		<header class="modal-header text-2xl font-bold">{$modalStore[0].title}</header>
+		<article class="modal-body max-h-[200px] overflow-hidden flex flex-col">
+			<TabGroup>
+				{#each $modalStore[0]?.meta?.tabs || [] as tab, i}
+					<Tab bind:group={tabSet} name={tab.name} value={i}>{tab.label}</Tab>
+				{/each}
+				<svelte:fragment slot="panel">
+					{@html $modalStore[0]?.meta?.tabs?.[tabSet]?.content}
+				</svelte:fragment>
+			</TabGroup>
+			<a
+				href="{base}/region/{$modalStore[0].meta.region}"
+				class="{$modalStore[0].meta.btnClasses} self-center"
+				on:click={() => modalStore.close()}
+			>
+				Enter region
+			</a>
+		</article>
+	{/if}
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -3,10 +3,16 @@
 	import '@fortawesome/fontawesome-free/css/solid.min.css';
 	import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
 	import { initializeStores, Modal } from '@skeletonlabs/skeleton';
+	import type { ModalComponent } from '@skeletonlabs/skeleton';
+	import InfoModal from '$lib/InfoModal.svelte';
+
+	const modalRegistry: Record<string, ModalComponent> = {
+		info: { ref: InfoModal }
+	};
 
 	initializeStores();
 </script>
 
-<Modal />
+<Modal components={modalRegistry} />
 
 <slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -29,6 +29,31 @@
 		`,
 		buttonTextCancel: 'Close'
 	};
+
+	const atlanticInfo: ModalSettings = {
+		type: 'component',
+		component: 'info',
+		title: 'Black Atlantic',
+		meta: {
+			region: 'black-atlantic',
+			btnClasses: 'btn variant-filled-secondary',
+			tabs: [
+				{
+					name: 'mood',
+					label: 'Mood',
+					content: `<p>This is the Northern Sea region. This region encompasses texts that are set in countries
+bordering the North Sea, the Baltic Sea, parts of the North Atlantic Ocean and the
+Norwegian
+Sea. For this region, some clear results have been identified. The materiality
+of the beaches in these texts are often rocky, shingles, fossils, driftwood
+and plastic.
+The mood is also characterised
+by being contemplative, curious,
+and morbid.</p>`
+				}
+			]
+		}
+	};
 	let svg: SVGElement;
 </script>
 
@@ -132,46 +157,46 @@
 					fill="transparent"
 					points="962,1957 1096,2075 1356,2173 1596,2248 2399,2465 2482,2343,2415,2197,2332,2110,2151,2099,2100,2004,2155,1886,2163,1819,2139,1772,2147,1713,2171,1669,2226,1650,2234,1595,2210,1579,1545,1654,1340,1642,1269,1646,1194,1756,1037,1788,989,1862"
 				></polygon>
-				<foreignObject x="1600" y="1900" width="800" height="500">
-					<a
-						href="{base}/region/black-atlantic"
+			</a>
+			<foreignObject x="1600" y="1900" width="800" height="500">
+				{#if svg?.clientWidth}<button
+						on:click={() => modalStore.trigger(atlanticInfo)}
 						class="btn variant-filled-secondary origin-top-left"
 						style="transform: scale(calc(1 / var(--scaling)));"
 					>
 						Black Atlantic
-					</a>
-				</foreignObject>
-			</a>
+					</button>{/if}
+			</foreignObject>
 			<a href="{base}/region/mediterranean">
 				<polygon
 					fill="transparent"
 					points="2159,1819,2277,1807,2442,1874,2549,1874,2734,1819,2734,1717,2647,1669,2568,1610,2521,1614,2482,1539,2332,1536,2230,1591,2230,1646,2171,1669,2143,1713,2135,1768"
 				></polygon>
-				<foreignObject x="2300" y="1650" width="800" height="500">
-					<a
-						href="{base}/region/mediterranean"
+			</a>
+			<foreignObject x="2300" y="1650" width="800" height="500">
+				{#if svg?.clientWidth}<button
+						on:click={() => modalStore.trigger(atlanticInfo)}
 						class="btn variant-filled-tertiary origin-top-left"
 						style="transform: scale(calc(1 / var(--scaling)));"
 					>
 						Mediterranean
-					</a>
-				</foreignObject>
-			</a>
+					</button>{/if}
+			</foreignObject>
 			<a href="{base}/region/northern-sea">
 				<polygon
 					fill="transparent"
 					points="1269,1646,1541,1658,2206,1579,2332,1536,2403,1484,2553,1433,2639,1307,2631,1252,2702,1260,2927,1075,2895,984,2655,425,2356,461,1911,528,1860,843,1828,980,1694,1110,1659,1181,1615,1063,1548,1075,1450,1410,1320,1469"
 				></polygon>
-				<foreignObject x="1800" y="1400" width="800" height="500">
-					<a
-						href="{base}/region/northern-sea"
+			</a>
+			<foreignObject x="1800" y="1400" width="800" height="500">
+				{#if svg?.clientWidth}<button
+						on:click={() => modalStore.trigger(atlanticInfo)}
 						class="btn bg-quarternary-500 text-surface-700 hover:bg-surface-700 hover:text-quarternary-500 origin-top-left"
 						style="transform: scale(calc(1 / var(--scaling)));"
 					>
 						Northern Sea
-					</a>
-				</foreignObject>
-			</a>
+					</button>{/if}
+			</foreignObject>
 		</svg>
 	</div>
 </SidebarLayout>