From f69452edf7f0491adbf6a8cde5415cce8c09bb5d Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 16 Apr 2024 20:04:28 -0700
Subject: feat(tooltip): better list implementation

---
 src/lib/List/Anime/CleanAnimeList.svelte | 21 +++++++++--------
 src/lib/List/Anime/Tooltip.svelte        | 40 ++++++++++++++++++++------------
 src/lib/List/Manga/CleanMangaList.svelte |  1 +
 3 files changed, 37 insertions(+), 25 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 8e273667..426fc4da 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -149,13 +149,14 @@
 			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
 			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
-				<Tooltip
-					content={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-					id={`anime-${anime.id}`}
-					pin={`anime-${anime.id}`}
-				>
-					<li class="entry">
-						<span class="content">
+				<li class="entry">
+					<span class="content">
+						<Tooltip
+							content={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+							id={`anime-${anime.id}`}
+							pin={`anime-${anime.id}`}
+							pinPosition="right"
+						>
 							<a
 								href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
 								target="_blank"
@@ -216,9 +217,9 @@
 									<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
 								</span>
 							{/if}
-						</span>
-					</li>
-				</Tooltip>
+						</Tooltip>
+					</span>
+				</li>
 			{/if}
 		{/each}
 	</ul>
diff --git a/src/lib/List/Anime/Tooltip.svelte b/src/lib/List/Anime/Tooltip.svelte
index ae5cd410..b9884965 100644
--- a/src/lib/List/Anime/Tooltip.svelte
+++ b/src/lib/List/Anime/Tooltip.svelte
@@ -45,25 +45,35 @@
 					let top = rect.top - tooltipHeight - offset;
 					let left = rect.left + rect.width / 2 - tooltipWidth / 2;
 
-					// pin pos
-					if (pinPosition === 'top') {
-						top = rect.top - tooltipHeight - offset;
-						left = rect.left + rect.width / 2 - tooltipWidth / 2;
-					} else if (pinPosition === 'bottom') {
-						top = rect.top + rect.height + offset;
-						left = rect.left + rect.width / 2 - tooltipWidth / 2;
-					} else if (pinPosition === 'left') {
-						top = rect.top + rect.height / 2 - tooltipHeight / 2;
-						left = rect.left - tooltipWidth - offset;
-					} else if (pinPosition === 'right') {
-						top = rect.top + rect.height / 2 - tooltipHeight / 2;
-						left = rect.left + rect.width + offset;
+					switch (pinPosition) {
+						case 'top':
+							top = rect.top - tooltipHeight - offset;
+							left = rect.left + rect.width / 2 - tooltipWidth / 2;
+
+							break;
+						case 'bottom':
+							top = rect.top + rect.height + offset;
+							left = rect.left + rect.width / 2 - tooltipWidth / 2;
+
+							break;
+						case 'left':
+							top = rect.top + rect.height / 2 - tooltipHeight / 2;
+							left = rect.left - tooltipWidth - offset;
+
+							break;
+						case 'right':
+							top = rect.top + rect.height / 2 - tooltipHeight / 2;
+							left = rect.left + rect.width + offset;
+
+							break;
 					}
 
 					if (left < 0) left = offset;
 					if (left + tooltipWidth > window.innerWidth)
 						left = window.innerWidth - tooltipWidth - offset;
 					if (top < 0) top = rect.top + rect.height + offset;
+					if (top + tooltipHeight > window.innerHeight)
+						top = window.innerHeight - tooltipHeight - offset;
 
 					tooltipPosition.set({
 						x: left,
@@ -152,7 +162,7 @@
 	};
 </script>
 
-<div
+<span
 	{id}
 	data-tooltippin={pin}
 	on:mouseenter={handleMouseEnter}
@@ -161,7 +171,7 @@
 	role="tooltip"
 >
 	<slot />
-</div>
+</span>
 
 {#if tooltipDiv}
 	<div
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 4fd18bf4..99747e32 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -108,6 +108,7 @@
 					id={`manga-${manga.id}`}
 					content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
 					pin={`manga-${manga.id}`}
+					pinPosition="left"
 				>
 					<a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank">
 						<span
-- 
cgit v1.2.3