From f0767e860609ac5d3a33b26357cb21ec4f16922c Mon Sep 17 00:00:00 2001 From: Fuwn Date: Sun, 7 Jan 2024 00:13:40 -0800 Subject: refactor(hovercover): simple state --- src/lib/Tools/Schedule/Tool.svelte | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) (limited to 'src/lib/Tools/Schedule/Tool.svelte') diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte index 4944ad2c..479d5b4a 100644 --- a/src/lib/Tools/Schedule/Tool.svelte +++ b/src/lib/Tools/Schedule/Tool.svelte @@ -12,7 +12,12 @@ import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte'; import { outboundLink } from '$lib/Media/links'; import HeadTitle from '$lib/HeadTitle.svelte'; - import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover'; + import { + onMouseEnter, + onMouseLeave, + onMouseMove, + type HoverCoverResponse + } from '$lib/Media/Cover/hoverCover'; import HoverCover from '$lib/Media/Cover/HoverCover.svelte'; import Crunchyroll from '$lib/Tools/Schedule/Crunchyroll.svelte'; import Loading from '$lib/Loading.svelte'; @@ -32,10 +37,7 @@ scheduledMediaPromise = scheduleMediaListCollection(new Date().getFullYear(), season()); }); - let hovering = false; - let hoveredItem: SubsPleaseEpisode | null = null; - let hoveredMedia: Media | null = null; - let imageStyle = ''; + let hoverCoverState: HoverCoverResponse = {}; const shiftSubsPleaseSchedule = (schedule: SubsPlease['schedule']) => { const shiftedSchedule: { [key: string]: SubsPleaseEpisode[] } = {}; @@ -145,21 +147,21 @@ on:mouseenter={() => { const response = onMouseEnter(media, entry); - hovering = response.hovering; - hoveredItem = response.item; - hoveredMedia = response.media; + hoverCoverState.hovering = response.hovering; + hoverCoverState.item = response.item; + hoverCoverState.media = response.media; }} on:mouseleave={() => { const response = onMouseLeave(); - hovering = response.hovering; - hoveredItem = response.item; - hoveredMedia = response.media; + hoverCoverState.hovering = response.hovering; + hoverCoverState.item = response.item; + hoverCoverState.media = response.media; }} on:mousemove={(e) => { const response = onMouseMove(e, 300); - imageStyle = response.style; + hoverCoverState.style = response.style; }} > {#if media} @@ -204,7 +206,7 @@ - +