diff options
| author | Fuwn <[email protected]> | 2026-03-01 16:04:11 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-03-01 16:04:11 -0800 |
| commit | 48f0c30d47d62e4f35706edb93a1bb2f97eba14c (patch) | |
| tree | 44866d7a61adfdf01a780e0108c370294d3db78b /src/lib/Landing.svelte | |
| parent | chore(biome): re-enable useAltText rule (diff) | |
| download | due.moe-48f0c30d47d62e4f35706edb93a1bb2f97eba14c.tar.xz due.moe-48f0c30d47d62e4f35706edb93a1bb2f97eba14c.zip | |
chore(biome): enable svelte formatting
Diffstat (limited to 'src/lib/Landing.svelte')
| -rw-r--r-- | src/lib/Landing.svelte | 120 |
1 files changed, 60 insertions, 60 deletions
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte index 4a5c7df0..bddd16df 100644 --- a/src/lib/Landing.svelte +++ b/src/lib/Landing.svelte @@ -1,67 +1,67 @@ <script lang="ts"> - import root from './Utility/root'; - import { env } from '$env/dynamic/public'; - import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte'; - import MangaListTemplate from './List/Manga/MangaListTemplate.svelte'; - import localforage from 'localforage'; - import { onMount } from 'svelte'; - - let sectionsVisible = $state<boolean[]>([false, false, false]); - let mangaContainer: HTMLElement; - let animeContainer: HTMLElement; - let gridLimit = $state<number | undefined>(undefined); - let demoFocused = $state(false); - const COVER_WIDTH = 100; - const COVER_GAP = 12; - const dummyCount = 20; - - const calculateLimit = () => { - const container = mangaContainer || animeContainer; - - if (!container) return; - - const containerWidth = container.clientWidth; - const itemWidth = COVER_WIDTH + COVER_GAP; - const padding = containerWidth < 500 ? 48 : 36; - - gridLimit = Math.max(2, Math.floor((containerWidth - padding) / itemWidth)); +import root from './Utility/root'; +import { env } from '$env/dynamic/public'; +import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte'; +import MangaListTemplate from './List/Manga/MangaListTemplate.svelte'; +import localforage from 'localforage'; +import { onMount } from 'svelte'; + +let sectionsVisible = $state<boolean[]>([false, false, false]); +let mangaContainer: HTMLElement; +let animeContainer: HTMLElement; +let gridLimit = $state<number | undefined>(undefined); +let demoFocused = $state(false); +const COVER_WIDTH = 100; +const COVER_GAP = 12; +const dummyCount = 20; + +const calculateLimit = () => { + const container = mangaContainer || animeContainer; + + if (!container) return; + + const containerWidth = container.clientWidth; + const itemWidth = COVER_WIDTH + COVER_GAP; + const padding = containerWidth < 500 ? 48 : 36; + + gridLimit = Math.max(2, Math.floor((containerWidth - padding) / itemWidth)); +}; + +onMount(() => { + const intersectionObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const index = Number(entry.target.getAttribute('data-section')); + + sectionsVisible[index] = true; + } + }); + }, + { threshold: 0.1 } + ); + + document.querySelectorAll('.landing-section').forEach((el) => intersectionObserver.observe(el)); + + calculateLimit(); + + const resizeObserver = new ResizeObserver(calculateLimit); + + if (mangaContainer) resizeObserver.observe(mangaContainer); + if (animeContainer) resizeObserver.observe(animeContainer); + + const handleKeydown = (e: KeyboardEvent) => { + if (e.key === 'Escape' && demoFocused) demoFocused = false; }; - onMount(() => { - const intersectionObserver = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - const index = Number(entry.target.getAttribute('data-section')); + document.addEventListener('keydown', handleKeydown); - sectionsVisible[index] = true; - } - }); - }, - { threshold: 0.1 } - ); - - document.querySelectorAll('.landing-section').forEach((el) => intersectionObserver.observe(el)); - - calculateLimit(); - - const resizeObserver = new ResizeObserver(calculateLimit); - - if (mangaContainer) resizeObserver.observe(mangaContainer); - if (animeContainer) resizeObserver.observe(animeContainer); - - const handleKeydown = (e: KeyboardEvent) => { - if (e.key === 'Escape' && demoFocused) demoFocused = false; - }; - - document.addEventListener('keydown', handleKeydown); - - return () => { - intersectionObserver.disconnect(); - resizeObserver.disconnect(); - document.removeEventListener('keydown', handleKeydown); - }; - }); + return () => { + intersectionObserver.disconnect(); + resizeObserver.disconnect(); + document.removeEventListener('keydown', handleKeydown); + }; +}); </script> <div class="landing"> |