1 files changed, 58 insertions, 0 deletions
diff --git a/web/script/player/popup.ts b/web/script/player/popup.ts
new file mode 100644
index 0000000..fb596b0
--- /dev/null
+++ b/web/script/player/popup.ts
@@ -0,0 +1,58 @@
+
+export class Popup {
+    trigger_hov = false
+    content_hov = false
+    content?: HTMLElement
+    shown = false
+
+    constructor(
+        public trigger: HTMLElement,
+        public container: HTMLElement,
+        public new_content: () => HTMLElement
+    ) {
+        trigger.onmouseenter = () => {
+            this.trigger_hov = true;
+            this.update_hov()
+        }
+        trigger.onmouseleave = () => {
+            this.trigger_hov = false;
+            this.update_hov()
+        }
+    }
+
+    set_shown(s: boolean) {
+        if (this.shown == s) return
+        if (s) {
+            this.content = this.new_content()
+            this.content.addEventListener("mouseenter", () => {
+                this.content_hov = true;
+                this.update_hov()
+            })
+            this.content.addEventListener("mouseleave", () => {
+                this.content_hov = false;
+                this.update_hov()
+            })
+            this.container.append(this.content)
+        } else {
+            this.container.removeChild(this.content!)
+            this.content = undefined
+        }
+        this.shown = s
+    }
+
+    hide_timeout?: number
+    update_hov() {
+        if (this.content_hov || this.trigger_hov) {
+            this.set_shown(true)
+            if (this.hide_timeout !== undefined) {
+                clearTimeout(this.hide_timeout)
+                this.hide_timeout = undefined
+            }
+        } else {
+            if (this.hide_timeout === undefined) this.hide_timeout = setTimeout(() => {
+                this.set_shown(false)
+                this.hide_timeout = undefined
+            }, 100)
+        }
+    }
+}