diff options
Diffstat (limited to 'src/lib/GlobalTooltip.svelte')
-rw-r--r-- | src/lib/GlobalTooltip.svelte | 94 |
1 files changed, 10 insertions, 84 deletions
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> |