Add Popovers

Author: lucsoft

src/Component.ts

@@ -16,9 +16,13 @@ export abstract class Component extends EventTarget {
         this.wrapper.classList.add(...classes);
         return this;
     }
+    setAnchorName(name: string) {
+        this.setAttribute("anchor", name);
+        return this;
+    }
     setAttribute(key: string, value: Refable<string | undefined> = "") {
         asRef(value).listen((val) => {
-            if(val === undefined) {
+            if (val === undefined) {
                 this.wrapper.removeAttribute(key);
                 return;
             }

src/components/Popover.ts

@@ -0,0 +1,35 @@
+import { Component } from "../Component.ts";
+
+export const Popover = (content: Component) => new class extends Component {
+    constructor() {
+        super();
+        this.addClass("wpopover");
+        this.wrapper.append(content.draw());
+        this.setAttribute("popover");
+    }
+
+    protected showPopover() {
+        this.wrapper.showPopover();
+        return this;
+    };
+
+    protected hidePopover() {
+        this.wrapper.hidePopover();
+        return this;
+    };
+
+    protected togglePopover(force: boolean) {
+        this.wrapper.togglePopover(force);
+        return this;
+    };
+
+    protected pullingAnchorPositioning(anchorName: `--${string}`, positioning: (rect: DOMRect, style: CSSStyleDeclaration) => void, interval = 20) {
+        setInterval(() => {
+            const anchor = document.querySelector(`[anchor="${anchorName}"]`);
+            if (!anchor) return;
+            const rect = anchor.getBoundingClientRect();
+            positioning(rect, this.wrapper.style);
+        }, interval);
+        return this;
+    }
+};