aboutsummaryrefslogtreecommitdiff
path: root/src/lib/GlobalTooltip.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/GlobalTooltip.svelte')
-rw-r--r--src/lib/GlobalTooltip.svelte94
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>