From 6f567f29f92dab681547d489f163e3ebf63c537b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 18 Apr 2024 13:49:27 -0700
Subject: refactor(tooltip): move sliding tooltip component

---
 src/lib/FallbackBadge.svelte             |   2 +-
 src/lib/List/Anime/CleanAnimeList.svelte |   2 +-
 src/lib/List/Anime/Tooltip.svelte        | 200 -------------------------------
 src/lib/List/Manga/CleanMangaList.svelte |   2 +-
 src/lib/Tooltip/LinkedTooltip.svelte     | 200 +++++++++++++++++++++++++++++++
 5 files changed, 203 insertions(+), 203 deletions(-)
 delete mode 100644 src/lib/List/Anime/Tooltip.svelte
 create mode 100644 src/lib/Tooltip/LinkedTooltip.svelte

(limited to 'src/lib')

diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte
index bd056deb..19dba2e7 100644
--- a/src/lib/FallbackBadge.svelte
+++ b/src/lib/FallbackBadge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import locale from '$stores/locale';
 	import type { Badge } from './Database/userBadges';
-	import Tooltip from './List/Anime/Tooltip.svelte';
+	import Tooltip from './Tooltip/LinkedTooltip.svelte';
 	import { databaseTimeToDate } from './Utility/time';
 
 	export let source: string | null | undefined;
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 2ee10f4b..6d6f038d 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -15,7 +15,7 @@
 	import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte';
 	import { browser } from '$app/environment';
 	import identity from '$stores/identity';
-	import Tooltip from './Tooltip.svelte';
+	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
 	import '../covers.css';
 
 	export let media: Media[];
diff --git a/src/lib/List/Anime/Tooltip.svelte b/src/lib/List/Anime/Tooltip.svelte
deleted file mode 100644
index 7857a58b..00000000
--- a/src/lib/List/Anime/Tooltip.svelte
+++ /dev/null
@@ -1,200 +0,0 @@
-<script lang="ts">
-	import tooltipPosition from '$stores/tooltipPosition';
-	import { fade } from 'svelte/transition';
-
-	export let id: string;
-	export let pin: string | undefined = undefined;
-	export let content: string;
-	export let disable: boolean = false;
-	export let pinPosition: 'top' | 'bottom' | 'left' | 'right' = 'top';
-	export let offset = 10;
-	export let tooltipTransitionTime = 200;
-	export let tooltipHideDelay = 10;
-	export let debounceDelay = 100;
-	export let tooltipOpacityTransitionTime = 200;
-
-	let tooltipDiv: HTMLDivElement | null = null;
-	let hideTimeout: number | null = null;
-	let debounceTimer: number | null = null;
-	let opacity = 0;
-
-	const createTooltip = () => {
-		if (!tooltipDiv) {
-			tooltipDiv = document.createElement('div');
-			tooltipDiv.style.position = 'absolute';
-			tooltipDiv.style.zIndex = '1000';
-			opacity = 0;
-			tooltipDiv.style.pointerEvents = 'none';
-			tooltipDiv.style.whiteSpace = 'nowrap';
-
-			tooltipDiv.classList.add('card');
-			tooltipDiv.classList.add('card-small');
-			document.body.appendChild(tooltipDiv);
-		}
-	};
-
-	const updateTooltipPosition = (x: number, y: number) => {
-		if (tooltipDiv) {
-			if (pin) {
-				const pinnedElement = document.getElementById(pin);
-
-				if (pinnedElement) {
-					const rect = pinnedElement.getBoundingClientRect();
-					const tooltipWidth = tooltipDiv.offsetWidth;
-					const tooltipHeight = tooltipDiv.offsetHeight;
-					let top = rect.top - tooltipHeight - offset;
-					let left = rect.left + rect.width / 2 - tooltipWidth / 2;
-
-					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,
-						y: top + window.scrollY
-					});
-
-					return;
-				}
-			}
-
-			const tooltipWidth = tooltipDiv.offsetWidth;
-			const tooltipHeight = tooltipDiv.offsetHeight;
-			let top = y - tooltipHeight - offset;
-			let left = x - tooltipWidth / 2;
-
-			if (left < 0) left = offset;
-			if (left + tooltipWidth > window.innerWidth) left = window.innerWidth - tooltipWidth - offset;
-			if (top < 0) top = y + offset;
-
-			tooltipPosition.set({
-				x: left,
-				y: top
-			});
-		}
-	};
-
-	const showTooltip = (content: string, x: number, y: number) => {
-		if (hideTimeout !== null) {
-			clearTimeout(hideTimeout);
-
-			hideTimeout = null;
-		}
-
-		createTooltip();
-
-		if (tooltipDiv) {
-			tooltipDiv.innerHTML = content.replace(/\n/g, '<br>');
-
-			updateTooltipPosition(x, y);
-			setTimeout(() => {
-				if (tooltipDiv) {
-					opacity = 1;
-				}
-			}, 10);
-		}
-	};
-
-	const hideTooltip = () => {
-		setTimeout(() => {
-			if (tooltipDiv) {
-				opacity = 0;
-
-				hideTimeout = window.setTimeout(() => {
-					if (tooltipDiv) {
-						document.body.removeChild(tooltipDiv);
-
-						tooltipDiv = null;
-					}
-				}, tooltipTransitionTime);
-			}
-		}, tooltipHideDelay);
-	};
-
-	const handleMouseEnter = (event: MouseEvent) => {
-		if (disable) return;
-
-		if (hideTimeout !== null) {
-			clearTimeout(hideTimeout);
-
-			hideTimeout = null;
-		}
-
-		if (!tooltipDiv) showTooltip(content, event.pageX, event.pageY);
-	};
-
-	const handleMouseMove = (event: MouseEvent) => {
-		if (debounceTimer !== null) clearTimeout(debounceTimer);
-
-		debounceTimer = window.setTimeout(() => {
-			if (tooltipDiv && opacity === 1) updateTooltipPosition(event.pageX, event.pageY);
-		}, debounceDelay);
-	};
-
-	const handleMouseLeave = () => {
-		hideTooltip();
-	};
-</script>
-
-<span
-	{id}
-	data-tooltippin={pin}
-	on:mouseenter={handleMouseEnter}
-	on:mousemove={handleMouseMove}
-	on:mouseleave={handleMouseLeave}
-	role="tooltip"
->
-	<slot />
-</span>
-
-{#if tooltipDiv}
-	<div
-		class="tooltip card card-small"
-		style={`left: ${$tooltipPosition.x}px; top: ${$tooltipPosition.y}px; opacity: ${opacity}; --tooltip-opacity-transition-time: ${tooltipOpacityTransitionTime}ms;`}
-	>
-		{#key content}
-			<span
-				in:fade={{ duration: tooltipTransitionTime }}
-				out:fade={{ duration: tooltipTransitionTime }}
-			>
-				{@html content.replace(/\n/g, '<br>')}
-			</span>
-		{/key}
-	</div>
-{/if}
-
-<style>
-	.tooltip {
-		position: absolute;
-		z-index: 1000;
-		transition: opacity var(--tooltip-opacity-transition-time) ease-in-out;
-		pointer-events: none;
-		white-space: nowrap;
-	}
-</style>
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index c2c781f6..8d76931e 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -12,7 +12,7 @@
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import { browser } from '$app/environment';
 	import proxy from '$lib/Utility/proxy';
-	import Tooltip from '../Anime/Tooltip.svelte';
+	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
 	import '../covers.css';
 	import { mediaTitle } from '../mediaTitle';
 
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte
new file mode 100644
index 00000000..7857a58b
--- /dev/null
+++ b/src/lib/Tooltip/LinkedTooltip.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+	import tooltipPosition from '$stores/tooltipPosition';
+	import { fade } from 'svelte/transition';
+
+	export let id: string;
+	export let pin: string | undefined = undefined;
+	export let content: string;
+	export let disable: boolean = false;
+	export let pinPosition: 'top' | 'bottom' | 'left' | 'right' = 'top';
+	export let offset = 10;
+	export let tooltipTransitionTime = 200;
+	export let tooltipHideDelay = 10;
+	export let debounceDelay = 100;
+	export let tooltipOpacityTransitionTime = 200;
+
+	let tooltipDiv: HTMLDivElement | null = null;
+	let hideTimeout: number | null = null;
+	let debounceTimer: number | null = null;
+	let opacity = 0;
+
+	const createTooltip = () => {
+		if (!tooltipDiv) {
+			tooltipDiv = document.createElement('div');
+			tooltipDiv.style.position = 'absolute';
+			tooltipDiv.style.zIndex = '1000';
+			opacity = 0;
+			tooltipDiv.style.pointerEvents = 'none';
+			tooltipDiv.style.whiteSpace = 'nowrap';
+
+			tooltipDiv.classList.add('card');
+			tooltipDiv.classList.add('card-small');
+			document.body.appendChild(tooltipDiv);
+		}
+	};
+
+	const updateTooltipPosition = (x: number, y: number) => {
+		if (tooltipDiv) {
+			if (pin) {
+				const pinnedElement = document.getElementById(pin);
+
+				if (pinnedElement) {
+					const rect = pinnedElement.getBoundingClientRect();
+					const tooltipWidth = tooltipDiv.offsetWidth;
+					const tooltipHeight = tooltipDiv.offsetHeight;
+					let top = rect.top - tooltipHeight - offset;
+					let left = rect.left + rect.width / 2 - tooltipWidth / 2;
+
+					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,
+						y: top + window.scrollY
+					});
+
+					return;
+				}
+			}
+
+			const tooltipWidth = tooltipDiv.offsetWidth;
+			const tooltipHeight = tooltipDiv.offsetHeight;
+			let top = y - tooltipHeight - offset;
+			let left = x - tooltipWidth / 2;
+
+			if (left < 0) left = offset;
+			if (left + tooltipWidth > window.innerWidth) left = window.innerWidth - tooltipWidth - offset;
+			if (top < 0) top = y + offset;
+
+			tooltipPosition.set({
+				x: left,
+				y: top
+			});
+		}
+	};
+
+	const showTooltip = (content: string, x: number, y: number) => {
+		if (hideTimeout !== null) {
+			clearTimeout(hideTimeout);
+
+			hideTimeout = null;
+		}
+
+		createTooltip();
+
+		if (tooltipDiv) {
+			tooltipDiv.innerHTML = content.replace(/\n/g, '<br>');
+
+			updateTooltipPosition(x, y);
+			setTimeout(() => {
+				if (tooltipDiv) {
+					opacity = 1;
+				}
+			}, 10);
+		}
+	};
+
+	const hideTooltip = () => {
+		setTimeout(() => {
+			if (tooltipDiv) {
+				opacity = 0;
+
+				hideTimeout = window.setTimeout(() => {
+					if (tooltipDiv) {
+						document.body.removeChild(tooltipDiv);
+
+						tooltipDiv = null;
+					}
+				}, tooltipTransitionTime);
+			}
+		}, tooltipHideDelay);
+	};
+
+	const handleMouseEnter = (event: MouseEvent) => {
+		if (disable) return;
+
+		if (hideTimeout !== null) {
+			clearTimeout(hideTimeout);
+
+			hideTimeout = null;
+		}
+
+		if (!tooltipDiv) showTooltip(content, event.pageX, event.pageY);
+	};
+
+	const handleMouseMove = (event: MouseEvent) => {
+		if (debounceTimer !== null) clearTimeout(debounceTimer);
+
+		debounceTimer = window.setTimeout(() => {
+			if (tooltipDiv && opacity === 1) updateTooltipPosition(event.pageX, event.pageY);
+		}, debounceDelay);
+	};
+
+	const handleMouseLeave = () => {
+		hideTooltip();
+	};
+</script>
+
+<span
+	{id}
+	data-tooltippin={pin}
+	on:mouseenter={handleMouseEnter}
+	on:mousemove={handleMouseMove}
+	on:mouseleave={handleMouseLeave}
+	role="tooltip"
+>
+	<slot />
+</span>
+
+{#if tooltipDiv}
+	<div
+		class="tooltip card card-small"
+		style={`left: ${$tooltipPosition.x}px; top: ${$tooltipPosition.y}px; opacity: ${opacity}; --tooltip-opacity-transition-time: ${tooltipOpacityTransitionTime}ms;`}
+	>
+		{#key content}
+			<span
+				in:fade={{ duration: tooltipTransitionTime }}
+				out:fade={{ duration: tooltipTransitionTime }}
+			>
+				{@html content.replace(/\n/g, '<br>')}
+			</span>
+		{/key}
+	</div>
+{/if}
+
+<style>
+	.tooltip {
+		position: absolute;
+		z-index: 1000;
+		transition: opacity var(--tooltip-opacity-transition-time) ease-in-out;
+		pointer-events: none;
+		white-space: nowrap;
+	}
+</style>
-- 
cgit v1.2.3