blob: d2c102010cd4f02e7505c45f7a5ccf66ccfe4789 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
let tooltipEl: HTMLDivElement
let tooltipLocked = false
export function setTooltipEl(el: HTMLDivElement) {
tooltipEl = el
}
export function onMouseMove(e: MouseEvent) {
if (!tooltipLocked && tooltipEl.style.display !== 'none') {
moveTooltipToMouse(e)
}
}
function moveTooltipToMouse(e: MouseEvent) {
const mouseX = e.pageX
const mouseY = e.pageY
// 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'
}
}
export function registerItem(itemEl: HTMLElement) {
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 = ''
tooltipEl.style.pointerEvents = ''
}
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 as Node)) {
tooltipLocked = false
tooltipEl.style.userSelect = ''
tooltipEl.style.pointerEvents = ''
tooltipEl.style.display = 'none'
}
})
}
|
