67 lines
1.6 KiB
TypeScript
Raw Normal View History

2019-07-06 04:01:26 +00:00
import Diff from "scripts/Diff"
export default class ToolTip extends HTMLElement {
anchor: HTMLElement
box: HTMLElement
arrow: HTMLElement
connectedCallback() {
this.box = document.createElement("div")
this.box.classList.add("box")
this.appendChild(this.box)
this.arrow = document.createElement("div")
this.arrow.classList.add("arrow")
this.appendChild(this.arrow)
}
hide() {
this.setAttribute("active", "false")
}
show(anchor: HTMLElement) {
const distanceToBorder = 5
this.anchor = anchor
this.box.textContent = this.anchor.getAttribute("aria-label")
2019-11-17 09:25:14 +00:00
const anchorRect = this.anchor.getBoundingClientRect()
const boxRect = this.box.getBoundingClientRect()
2019-07-06 04:01:26 +00:00
let finalX = anchorRect.left + anchorRect.width / 2 - boxRect.width / 2
let finalY = anchorRect.top - boxRect.height
2019-11-17 09:25:14 +00:00
const contentRect = {
2019-07-06 04:01:26 +00:00
left: distanceToBorder,
top: distanceToBorder,
right: document.body.clientWidth - distanceToBorder,
bottom: document.body.clientHeight - distanceToBorder
}
let offsetX = 0
let offsetY = 0
2019-07-06 04:01:26 +00:00
if(finalX < contentRect.left) {
offsetX = contentRect.left - finalX
finalX += offsetX
} else if(finalX + boxRect.width > contentRect.right) {
offsetX = contentRect.right - (finalX + boxRect.width)
finalX += offsetX
}
if(finalY < contentRect.top) {
offsetY = contentRect.top - finalY
finalY += offsetY
}
2019-11-17 09:25:14 +00:00
const arrowX = boxRect.width / 2 - offsetX
2019-07-06 04:01:26 +00:00
Diff.mutations.queue(() => {
this.style.left = finalX + "px"
this.style.top = finalY + "px"
this.arrow.style.left = arrowX + "px"
this.setAttribute("active", "true")
})
}
2019-11-17 09:44:30 +00:00
}