Merge pull request #236 from DHBern/235-fassungskommentar-hash-behaviour-in-url

feat: open fasskomm from url, remove hash param on close

Author: domsteinbach

src/routes/fassungen/[thirties=thirties]/+page.svelte

@@ -9,9 +9,10 @@
 	import { Switch } from '@skeletonlabs/skeleton-svelte';
 	import { page } from '$app/state';
 	import { onMount, tick, untrack } from 'svelte';
-	import { goto } from '$app/navigation';
+	import { goto, replaceState } from '$app/navigation';
 	import ApparatPopover from './ApparatPopover.svelte';
 	import handleFromSigil from '$lib/functions/handleFromSigil';
+	import { browser } from '$app/environment';
 
 	/** @type {{data: import('./$types').PageData}} */
 	let { data } = $props();
@@ -227,6 +228,7 @@
 			tick().then(() => {
 				addApparatTriggerListeners();
 				addFasskommTriggerListeners();
+				openFasskommFromHash();
 			});
 			return Promise.resolve();
 		};
@@ -285,6 +287,14 @@
 		FasskommStore.id = '';
 		FasskommStore.commentary = '';
 	};
+	const openFasskommFromHash = () => {
+		const id = page.url.hash;
+		if (!id) return;
+		const el = document.querySelector(`a.fasskommanchor[href="${CSS.escape(id)}"]`);
+		if (el instanceof HTMLAnchorElement && el.href) {
+			el.click();
+		}
+	};
 
 	// Triggers
 	const addFasskommTriggerListeners = () => {
@@ -298,12 +308,22 @@
 			el.removeEventListener('click', onClickFasskommTrigger);
 		});
 	};
-	const onClickFasskommTrigger = (/** @type { Event } */ ev) => {
-		if (ev.target instanceof HTMLElement) {
-			fillFasskommStore(ev.target, false);
+
+	const onClickFasskommTrigger = (ev) => {
+		const a = ev.target instanceof HTMLAnchorElement ? ev.target : ev.target?.closest?.('a');
+		if (!a) return;
+
+		ev.preventDefault();
+		const href = a.getAttribute('href');
+
+		if (browser && href) {
+			const next = new URL(href, page.url);
+			replaceState(next.href, {});
 		}
+		fillFasskommStore(a, false);
 	};
 
+
 	// --------------------------------------
 	// Apparate
 	// --------------------------------------
@@ -409,6 +429,17 @@
 			synchro = false;
 		}
 	});
+
+	let wasFasskommOpen = false;
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		const isOpen = !!FasskommStore.elTrigger;
+		if (wasFasskommOpen && !isOpen && window.location.hash.startsWith('#fasskomm-')) {
+			replaceState(`${page.url.pathname}${page.url.search}`, {});
+		}
+		wasFasskommOpen = isOpen;
+	});
+
 	let gotoThirties = $state(Number(data.thirties));
 </script>