From a6fe057b4626b6dfb1c5c715dfb516036de72204 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Sat, 9 Apr 2022 17:29:51 -0500
Subject: fix leaderboard toc and scrolling behavior

---
 src/lib/Collapsible.svelte | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte
index e1f28b2..a7b6105 100644
--- a/src/lib/Collapsible.svelte
+++ b/src/lib/Collapsible.svelte
@@ -5,23 +5,39 @@
  -->
 <script lang="ts">
 	import { browser } from '$app/env'
+	import { onMount } from 'svelte'
 	import { cleanId } from './utils'
 
 	let open: boolean
 	export let id: string | undefined = undefined
+	$: elementId = id?.replace(/_/, '-')
 	export let lazy = true
 
+	let detailsEl
+
 	function checkHash() {
-		if (id && id === location.hash.slice(1)) {
+		if (elementId && elementId === location.hash.slice(1)) {
+			console.log('open')
 			open = true
+			requestAnimationFrame(() => {
+				// scroll to the element
+				window.scrollTo({
+					top: detailsEl.offsetTop,
+					behavior: 'smooth',
+				})
+			})
 		}
 	}
+
+	onMount(() => {
+		if (browser) checkHash()
+	})
 	if (browser) checkHash()
 </script>
 
 <svelte:window on:hashchange={checkHash} />
 
-<details bind:open {id}>
+<details bind:open id={elementId} bind:this={detailsEl}>
 	<summary>
 		<slot name="title">
 			<h2>{id ? cleanId(id) : 'Details'}</h2>
-- 
cgit