diff options
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} /> |