diff options
| author | Fuwn <[email protected]> | 2024-01-07 00:13:40 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-07 00:13:40 -0800 |
| commit | f0767e860609ac5d3a33b26357cb21ec4f16922c (patch) | |
| tree | 4f7b25955a28200d1d9ef9dd7078816f660c3a5a /src/lib/List/Manga | |
| parent | chore(Koifile): use koix make mode (diff) | |
| download | due.moe-f0767e860609ac5d3a33b26357cb21ec4f16922c.tar.xz due.moe-f0767e860609ac5d3a33b26357cb21ec4f16922c.zip | |
refactor(hovercover): simple state
Diffstat (limited to 'src/lib/List/Manga')
| -rw-r--r-- | src/lib/List/Manga/CleanMangaList.svelte | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte index b7f983b2..396ac38c 100644 --- a/src/lib/List/Manga/CleanMangaList.svelte +++ b/src/lib/List/Manga/CleanMangaList.svelte @@ -7,7 +7,12 @@ import ListTitle from '../ListTitle.svelte'; import MediaTitle from '../MediaTitleDisplay.svelte'; import HoverCover from '$lib/Media/Cover/HoverCover.svelte'; - import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover'; + import { + onMouseEnter, + onMouseLeave, + onMouseMove, + type HoverCoverResponse + } from '$lib/Media/Cover/hoverCover'; export let media: Media[]; export let cleanCache: () => void; @@ -23,9 +28,7 @@ export let rateLimited: boolean; export let authorised: boolean; - let hovering = false; - let hoveredMedia: Media | null = null; - let imageStyle = ''; + let hoverCoverState: HoverCoverResponse = {}; </script> {#if authorised} @@ -75,19 +78,21 @@ on:mouseenter={() => { const response = onMouseEnter(manga); - hovering = response.hovering; - hoveredMedia = response.media; + hoverCoverState.hovering = response.hovering; + hoverCoverState.item = response.item; + hoverCoverState.media = response.media; }} on:mouseleave={() => { const response = onMouseLeave(); - hovering = response.hovering; - hoveredMedia = response.media; + hoverCoverState.hovering = response.hovering; + hoverCoverState.item = response.item; + hoverCoverState.media = response.media; }} on:mousemove={(e) => { - const response = onMouseMove(e); + const response = onMouseMove(e, 300); - imageStyle = response.style; + hoverCoverState.style = response.style; }} > <span @@ -131,4 +136,4 @@ {/each} </ul> -<HoverCover {hovering} {hoveredMedia} {imageStyle} /> +<HoverCover options={hoverCoverState} width={300} /> |