From 13e5974114f759bae73f3bfd68c62ce9cfaf785e Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Sun, 20 Feb 2022 21:38:14 -0600
Subject: add more stuff to profile and fix bugs

---
 src/lib/GlobalTooltip.svelte | 94 +++++---------------------------------------
 1 file changed, 10 insertions(+), 84 deletions(-)

(limited to 'src/lib/GlobalTooltip.svelte')

diff --git a/src/lib/GlobalTooltip.svelte b/src/lib/GlobalTooltip.svelte
index 2f7b738..f504607 100644
--- a/src/lib/GlobalTooltip.svelte
+++ b/src/lib/GlobalTooltip.svelte
@@ -1,94 +1,20 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
+	import { onMouseMove, registerItem, setTooltipEl } from './GlobalTooltip'
 
-	let tooltipEl
+	let tooltipEl: HTMLDivElement
+	$: setTooltipEl(tooltipEl)
 
-	// this script handles the item hover lore tooltip
-	onMount(() => {
-		// TODO: have something that automatically registers the event listener when we create a new MinecraftTooltip
-		const itemEls = document.getElementsByClassName('minecraft-tooltip')
-		let tooltipLocked = false
-		function moveTooltipToMouse(e) {
-			const mouseX = e.pageX
-			const mouseY = e.pageY
-			console.log(mouseY + tooltipEl.offsetHeight, window.innerHeight + window.scrollY - 10)
-			// if it's going to be off the bottom of the screen, move it up
-			if (mouseY + tooltipEl.offsetHeight > window.innerHeight + window.scrollY - 10) {
-				// put it at the bottom of the screen
-				tooltipEl.style.top = `${
-					window.innerHeight + window.scrollY - 10 - tooltipEl.offsetHeight
-				}px`
-			} else {
-				// otherwise, put it at the mouse's y position
-				tooltipEl.style.top = mouseY + 'px'
-			}
-			// if it's going to be off the right of the screen, move it left
-			if (mouseX + tooltipEl.offsetWidth > window.innerWidth + window.scrollX - 10) {
-				// put it at the right of the screen
-				tooltipEl.style.left = `${
-					window.innerWidth + window.scrollX - 10 - tooltipEl.offsetWidth
-				}px`
-			} else {
-				// otherwise, put it at the mouse's x position
-				tooltipEl.style.left = mouseX + 'px'
-			}
-		}
-		document.addEventListener('mousemove', e => {
-			if (!tooltipLocked && tooltipEl.style.display !== 'none') {
-				moveTooltipToMouse(e)
-			}
-		})
+	// // this script handles the item hover lore tooltip
+	// onMount(() => {
+	// 	// TODO: have something that automatically registers the event listener when we create a new MinecraftTooltip
+	// 	const itemEls = document.getElementsByClassName('minecraft-tooltip')
 
-		for (const itemEl of itemEls as unknown as HTMLElement[]) {
-			// if (!(itemEl instanceof HTMLElement)) continue
-
-			// if the item doesn't have lore or a name, that must mean it's air
-			// if (!itemEl.dataset.loreHtml && !itemEl.dataset.nameHtml) continue
-
-			itemEl.addEventListener('mouseover', e => {
-				if (!tooltipLocked) {
-					moveTooltipToMouse(e)
-					// copy the lore and name from the tooltip-lore and
-					// tooltip-name elements inside the item el
-					const loreHtml = itemEl.getElementsByClassName('tooltip-lore')[0].innerHTML
-					const nameHtml = itemEl.getElementsByClassName('tooltip-name')[0].innerHTML
-					tooltipEl.innerHTML = `<p class="item-lore-name">${nameHtml}</p><p class="item-lore-text">${loreHtml}</p>`
-				}
-				tooltipEl.style.display = 'block'
-			})
-			itemEl.addEventListener('mouseout', () => {
-				if (!tooltipLocked) {
-					tooltipEl.innerHTML = ''
-					tooltipEl.style.display = 'none'
-				}
-			})
-			itemEl.addEventListener('click', e => {
-				tooltipLocked = !tooltipLocked
-				moveTooltipToMouse(e)
-				tooltipEl.style.display = 'block'
-				if (tooltipLocked) {
-					tooltipEl.style.userSelect = 'auto'
-					tooltipEl.style.pointerEvents = 'auto'
-				} else {
-					tooltipEl.style.userSelect = null
-					tooltipEl.style.pointerEvents = null
-				}
-				const loreHtml = itemEl.getElementsByClassName('tooltip-lore')[0].innerHTML
-				const nameHtml = itemEl.getElementsByClassName('tooltip-name')[0].innerHTML
-				tooltipEl.innerHTML = `<p class="item-lore-name">${nameHtml}</p><p class="item-lore-text">${loreHtml}</p>`
-			})
-			document.addEventListener('mousedown', e => {
-				if (tooltipLocked && !tooltipEl.contains(e.target)) {
-					tooltipLocked = false
-					tooltipEl.style.userSelect = null
-					tooltipEl.style.pointerEvents = null
-					tooltipEl.style.display = 'none'
-				}
-			})
-		}
-	})
+	// 	for (const itemEl of itemEls as unknown as HTMLElement[]) registerItem(itemEl)
+	// })
 </script>
 
+<svelte:window on:mousemove={onMouseMove} />
 <div id="global-tooltip" style="display: none" bind:this={tooltipEl} />
 
 <style>
-- 
cgit