diff options
| author | mat <github@matdoes.dev> | 2022-02-22 19:16:09 +0000 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-22 19:16:09 +0000 |
| commit | 42c8efb4f3b8faffdd82d407e3cad3768be01ef4 (patch) | |
| tree | e8c1b70d8e1c3069f840f5c8e5f785a794dec5b4 /src/lib/Collapsible.svelte | |
| parent | 4d42508de5dabd1979b24cad12506fe4f72f8ed0 (diff) | |
| download | skyblock-stats-42c8efb4f3b8faffdd82d407e3cad3768be01ef4.tar.gz skyblock-stats-42c8efb4f3b8faffdd82d407e3cad3768be01ef4.tar.bz2 skyblock-stats-42c8efb4f3b8faffdd82d407e3cad3768be01ef4.zip | |
add leaderboards
Diffstat (limited to 'src/lib/Collapsible.svelte')
| -rw-r--r-- | src/lib/Collapsible.svelte | 22 |
1 files changed, 17 insertions, 5 deletions
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte index 760677c..751a1b1 100644 --- a/src/lib/Collapsible.svelte +++ b/src/lib/Collapsible.svelte @@ -1,13 +1,25 @@ <!-- @component - Non-JS collapsible content. + Collapsible content that works without JS but is enhanced by it. --> <script lang="ts"> + import { browser } from '$app/env' + let open: boolean + export let id: string | undefined = undefined + + function checkHash() { + if (id && id === location.hash.slice(1)) { + open = true + } + } + if (browser) checkHash() </script> -<details bind:open> +<svelte:window on:hashchange={checkHash} /> + +<details bind:open {id}> <summary> <slot name="title"> <h2>Details</h2> @@ -15,9 +27,9 @@ </summary> <div> <!-- - We do this so images inside the content are not loaded until it's - open. The browser (only tested on FF) doesn't handle this, although - it probably should. + We do this so images and other things inside the content are not + loaded until it's open. + For some reason browsers don't handle this, although they should. --> <noscript> <slot /> |