diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Collapsible.svelte | 20 | ||||
| -rw-r--r-- | src/routes/leaderboards/index.svelte | 2 |
2 files changed, 19 insertions, 3 deletions
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> diff --git a/src/routes/leaderboards/index.svelte b/src/routes/leaderboards/index.svelte index 7c81ff7..a6470ff 100644 --- a/src/routes/leaderboards/index.svelte +++ b/src/routes/leaderboards/index.svelte @@ -18,7 +18,7 @@ import Head from '$lib/Head.svelte' import Toc from '$lib/Toc.svelte' import Collapsible from '$lib/Collapsible.svelte' - import { skyblockItemNameToItem, skyblockItemToUrl } from '$lib/minecraft/inventory' + import { skyblockItemToUrl } from '$lib/minecraft/inventory' import { cleanId } from '$lib/utils' import ListItemWithIcon from '$lib/ListItemWithIcon.svelte' |