From b0ba30712f210beb8a5732f5a59a3ca99b42de7a Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Tue, 16 Sep 2025 16:08:30 -0500 Subject: [PATCH] hover events no longer stick arround --- src/webpage/hover.ts | 57 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/src/webpage/hover.ts b/src/webpage/hover.ts index b8ad4dc..09efdbd 100644 --- a/src/webpage/hover.ts +++ b/src/webpage/hover.ts @@ -6,31 +6,63 @@ class Hover { constructor(txt: string | MarkDown | (() => Promise | MarkDown | string)) { this.str = txt; } + static map = new WeakMap void>(); + static elm: HTMLElement = document.createElement("div"); + static bound: HTMLElement = document.createElement("div"); + static timeout: NodeJS.Timeout; + static watchForGone() { + clearInterval(this.timeout); + this.timeout = setInterval(() => { + if (!document.contains(this.bound)) { + this.elm.remove(); + clearInterval(this.timeout); + } + }, 100); + } + get elm2() { + return Hover.elm; + } + set elm2(elm: HTMLElement) { + Hover.elm = elm; + } addEvent(elm: HTMLElement) { + const tempy = (Math.random() * 1000) ^ 0; let timeOut = setTimeout(() => {}, 0); - let elm2 = document.createElement("div"); + const RM = () => { + this.elm2.remove(); + }; + elm.addEventListener("mouseover", () => { + clearTimeout(timeOut); timeOut = setTimeout(async () => { - elm2 = await this.makeHover(elm); - elm2.addEventListener("mouseover", () => { - elm2.remove(); - }); + console.log(this.elm2); + RM(); + this.elm2 = await this.makeHover(elm); + Hover.bound = elm; + Hover.watchForGone(); + console.error(this.elm2, tempy, document.contains(elm), elm); }, 300); }); elm.addEventListener("mouseout", () => { clearTimeout(timeOut); - elm2.remove(); + RM(); }); - new MutationObserver(function (e) { - if (e[0].removedNodes) { + new MutationObserver((e) => { + if (e[0].removedNodes.length) { + console.error("Hi :3", this.elm2, tempy, document.contains(elm), e[0]); clearTimeout(timeOut); - elm2.remove(); + RM(); } }).observe(elm, {childList: true}); + Hover.map.get(elm)?.(); + Hover.map.set(elm, () => { + alert("happened"); + clearTimeout(timeOut); + this.elm2.remove(); + }); } async makeHover(elm: HTMLElement) { - if (!document.contains(elm)) - return document.createDocumentFragment() as unknown as HTMLDivElement; + if (!document.contains(elm)) return document.createElement("div"); const div = document.createElement("div"); if (this.str instanceof MarkDown) { div.append(this.str.makeHTML()); @@ -48,6 +80,9 @@ class Hover { div.style.top = box.bottom + 4 + "px"; div.style.left = Math.floor(box.left + box.width / 2) + "px"; div.classList.add("hoverthing"); + div.addEventListener("mouseover", () => { + div.remove(); + }); document.body.append(div); Contextmenu.keepOnScreen(div); console.log(div, elm);