From 1d190da6e3b97ce338d185880375382b2f4bd5f7 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 28 Dec 2023 20:28:03 -0800
Subject: feat(list): hover cover

---
 src/lib/List/Manga/CleanMangaList.svelte | 35 +++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

(limited to 'src/lib/List/Manga')

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 3ccdbf49..918db3f9 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -6,6 +6,8 @@
 	import settings from '../../../stores/settings';
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
+	import HoverCover from '$lib/Media/HoverCover.svelte';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -20,6 +22,10 @@
 	export let due: boolean;
 	export let rateLimited: boolean;
 	export let authorised: boolean;
+
+	let hovering = false;
+	let hoveredMedia: Media | null = null;
+	let imageStyle = '';
 </script>
 
 {#if authorised}
@@ -54,7 +60,32 @@
 		{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
 
 		{#if progress !== manga.episodes}
-			<li>
+			<li
+				class="entry"
+				on:mouseenter={() => {
+					if ($settings.displayHoverCover === false) return;
+
+					const response = onMouseEnter(manga);
+
+					hovering = response.hovering;
+					hoveredMedia = response.media;
+				}}
+				on:mouseleave={() => {
+					if ($settings.displayHoverCover === false) return;
+
+					const response = onMouseLeave();
+
+					hovering = response.hovering;
+					hoveredMedia = response.media;
+				}}
+				on:mousemove={(e) => {
+					if ($settings.displayHoverCover === false) return;
+
+					const response = onMouseMove(e);
+
+					imageStyle = response.style;
+				}}
+			>
 				<a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank">
 					<span
 						style={lastUpdatedMedia === manga.id && manga.chapters !== progress
@@ -96,3 +127,5 @@
 		{/if}
 	{/each}
 </ul>
+
+<HoverCover {hovering} {hoveredMedia} {imageStyle} />
-- 
cgit v1.2.3