♻ Reworked Overflow Menu

Author: codewithkyle

src/framework/components/buttons/overflow-button/index.html

@@ -0,0 +1,30 @@
+<script type="module">
+    import Component from "/js/overflow-button.js";
+    const example = new Component({
+        items: [
+            {
+                label: "Example",
+                callback: () => {
+                    console.log("Hello word 1");
+                },
+            },
+            {
+                label: "Example",
+                icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg>`,
+                callback: () => {
+                    console.log("Hello word 2");
+                },
+            },
+            null,
+            {
+                danger: true,
+                label: "Example",
+                icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`,
+                callback: () => {
+                    console.log("Hello word 3");
+                },
+            },
+        ],
+    });
+    document.body.appendChild(example);
+</script>

src/framework/components/buttons/overflow-button/overflow-button.scss

@@ -0,0 +1,3 @@
+overflow-button {
+    position: relative;
+}

src/framework/components/buttons/overflow-button/overflow-button.ts

@@ -0,0 +1,105 @@
+import { html, render } from "lit-html";
+import SuperComponent from "@codewithkyle/supercomponent";
+import env from "~brixi/controllers/env";
+import { parseDataset } from "~brixi/utils/general";
+import OverflowMenu, { OverflowItem } from "~brixi/components/overflow-menu/overflow-menu";
+import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import { UUID } from "@codewithkyle/uuid";
+import pos from "~brixi/controllers/pos";
+
+type ButtonKind = "solid" | "outline" | "text";
+type ButtonColor = "primary" | "danger" | "grey" | "success" | "warning" | "info";
+type ButtonShape = "pill" | "round" | "sharp" | "default";
+type ButtonSize = "default" | "slim" | "large";
+
+export interface IOverflowButton {
+    icon: string;
+    iconPosition: "left" | "right" | "center";
+    kind: ButtonKind;
+    color: ButtonColor;
+    shape: ButtonShape;
+    size: ButtonSize;
+    tooltip: string;
+    css: string;
+    class: string;
+    attributes: {
+        [name: string]: string | number;
+    };
+    disabled: boolean;
+    items: Array<OverflowItem>;
+}
+export interface OverflowButtonSettings {
+    kind?: ButtonKind;
+    color?: ButtonColor;
+    shape?: ButtonShape;
+    size?: ButtonSize;
+    icon?: string;
+    iconPosition?: "left" | "right" | "center";
+    tooltip?: string;
+    css?: string;
+    class?: string;
+    attributes?: {
+        [name: string]: string | number;
+    };
+    disabled?: boolean;
+    items: Array<OverflowItem>;
+}
+export default class OverflowButton extends SuperComponent<IOverflowButton> {
+    private uid: string;
+
+    constructor(settings: OverflowButtonSettings) {
+        super();
+        this.uid = UUID();
+        this.model = {
+            kind: "text",
+            color: "grey",
+            shape: "round",
+            size: "default",
+            icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg>`,
+            iconPosition: "center",
+            tooltip: "Open menu",
+            css: "",
+            class: "",
+            attributes: {},
+            disabled: false,
+            items: [],
+        };
+        this.model = parseDataset<IOverflowButton>(this.dataset, this.model);
+        env.css(["button"]).then(() => {
+            this.set(settings);
+        });
+    }
+
+    override connected() {
+        this.addEventListener("click", this.handleClick);
+    }
+
+    private handleClick: EventListener = (e: Event) => {
+        e.stopImmediatePropagation();
+        const target = e.currentTarget as HTMLElement;
+        const container = new OverflowMenu(this.uid, this.model.items);
+        document.body.appendChild(container);
+        pos.positionElementToElement(container, target);
+    };
+
+    override render() {
+        this.style.cssText = this.model.css;
+        Object.keys(this.model.attributes).map((key) => {
+            this.setAttribute(key, `${this.model.attributes[key]}`);
+        });
+        this.className = `bttn ${this.model.class}`;
+        this.setAttribute("kind", this.model.kind);
+        this.setAttribute("color", this.model.color);
+        this.setAttribute("shape", this.model.shape);
+        this.setAttribute("icon", this.model.iconPosition);
+        this.setAttribute("size", this.model.size);
+        if (this.model.disabled) {
+            this.setAttribute("disabled", `${this.model.disabled}`);
+        }
+        this.setAttribute("tooltip", "");
+        this.setAttribute("aria-label", this.model.tooltip);
+        const view = html` ${unsafeHTML(this.model.icon)} `;
+        render(view, this);
+    }
+}
+env.bind("overflow-button", OverflowButton);

src/framework/components/overflow-menu/index.html

@@ -1,7 +1,6 @@
 <script type="module">
     import Example from "/js/overflow-menu.js";
-    const test = new Example({
-        items: [
+    const test = new Example("test", [
             {
                 label: "Example",
                 callback: () => {
@@ -25,6 +24,6 @@
                 },
             },
         ],
-    });
+    );
     document.body.appendChild(test);
 </script>

src/framework/components/overflow-menu/overflow-menu.scss

@@ -1,67 +1,4 @@
 overflow-menu {
-    display: inline-block;
-    position: relative;
-
-    & > button {
-        width: 36px;
-        height: 36px;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        transition: all 150ms var(--ease-in-out);
-        user-select: none;
-        cursor: pointer;
-        color: var(--grey-400);
-        outline-offset: 0;
-
-        &:focus-visible {
-            outline: var(--focus-ring);
-            outline-offset: var(--focus-ring-offset);
-            transition: outline-offset 80ms var(--ease-in-out);
-        }
-
-        &:hover,
-        &:focus-visible {
-            color: var(--grey-700);
-
-            &::before {
-                opacity: 0.05;
-            }
-        }
-
-        &:active {
-            color: var(--grey-700);
-            outline-offset: 0;
-
-            &::before {
-                opacity: 0.1;
-            }
-        }
-
-        &::before {
-            content: "";
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            transition: all 80ms var(--ease-in-out);
-            opacity: 0;
-            background-color: var(--grey-500);
-            border-radius: 50%;
-        }
-
-        svg {
-            width: 18px;
-            height: 18px;
-        }
-    }
-}
-
-overflow-menu-container {
-    opacity: 0;
-    visibility: hidden;
     border-radius: 0.25rem;
     background-color: var(--white);
     border: 1px solid var(--grey-300);
@@ -70,7 +7,8 @@ overflow-menu-container {
     display: inline-block;
     position: fixed;
     z-index: 1000;
-    pointer-events: none;
+    top: 0;
+    left: 0;
 
     &.is-visible {
         pointer-events: all;

src/framework/components/overflow-menu/overflow-menu.ts

@@ -2,8 +2,6 @@ import SuperComponent from "@codewithkyle/supercomponent";
 import { html, render } from "lit-html";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import env from "~brixi/controllers/env";
-import { parseDataset } from "~brixi/utils/general";
-import { UUID as uuid } from "@codewithkyle/uuid";
 
 export interface OverflowItem {
     label: string;
@@ -12,41 +10,17 @@ export interface OverflowItem {
     danger?: boolean;
 }
 export interface IOverflowMenu {
-    icon: string;
     items: Array<OverflowItem>;
-    tooltip: string;
-    class: string;
-    css: string;
-    attributes: {
-        [name: string]: string | number;
-    };
     uid: string;
 }
-export interface OverflowMenuSettings {
-    items: Array<OverflowItem>;
-    icon?: string;
-    tooltip?: string;
-    css?: string;
-    class?: string;
-    attributes?: {
-        [name: string]: string | number;
-    };
-}
 export default class OverflowMenu extends SuperComponent<IOverflowMenu> {
-    constructor(settings: OverflowMenuSettings) {
+    constructor(uid: string, items: Array<OverflowItem>) {
         super();
         this.model = {
-            icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg>`,
-            items: [],
-            tooltip: null,
-            class: "",
-            css: "",
-            attributes: {},
-            uid: uuid(),
+            items: items,
+            uid: uid,
         };
-        this.model = parseDataset<IOverflowMenu>(this.dataset, this.model);
         env.css("overflow-menu").then(() => {
-            this.set(settings, true);
             this.render();
         });
     }
@@ -55,27 +29,21 @@ export default class OverflowMenu extends SuperComponent<IOverflowMenu> {
         document.addEventListener(
             "click",
             () => {
-                document.body.querySelectorAll(`overflow-menu-container[overflow-menu-container-id="${this.model.uid}"].is-visible`).forEach((container: HTMLElement) => {
-                    container.remove();
-                });
+                this.remove();
             },
             { passive: true, capture: true }
         );
         window.addEventListener(
             "resize",
             () => {
-                document.body.querySelectorAll(`overflow-container[overflow-menu-container-id="${this.model.uid}"].is-visible`).forEach((container: HTMLElement) => {
-                    container.remove();
-                });
+                this.remove();
             },
             { passive: true, capture: true }
         );
         window.addEventListener(
             "scroll",
             () => {
-                document.body.querySelectorAll(`overflow-container[overflow-menu-container-id="${this.model.uid}"].is-visible`).forEach((container: HTMLElement) => {
-                    container.remove();
-                });
+                this.remove();
             },
             { passive: true, capture: true }
         );
@@ -84,54 +52,10 @@ export default class OverflowMenu extends SuperComponent<IOverflowMenu> {
         });
     }
 
-    private handleClick: EventListener = (e: Event) => {
-        const target = e.currentTarget as HTMLElement;
-        const bounds = target.getBoundingClientRect();
-        const container = new OverflowMenuContainer(this.model.uid, this.model.items);
-        document.body.appendChild(container);
-        const containerBounds = container.getBoundingClientRect();
-        let top = bounds.top + bounds.height;
-        if (top + containerBounds.height >= window.innerHeight) {
-            top = bounds.top - containerBounds.height;
-        }
-        let left = bounds.left;
-        if (left + containerBounds.width >= window.innerWidth) {
-            left = bounds.left + bounds.width - containerBounds.width;
-        }
-        container.style.top = `${top}px`;
-        container.style.left = `${left}px`;
-        container.classList.toggle("is-visible");
-    };
-
-    override render() {
-        this.style.cssText = this.model.css;
-        this.className = this.model.class;
-        Object.keys(this.model.attributes).map((key) => {
-            this.setAttribute(key, `${this.model.attributes[key]}`);
-        });
-        const view = html`
-            <button @click=${this.handleClick} sfx="button" type="button" aria-label="${this.model.tooltip || "open menu"}" tooltip>${unsafeHTML(this.model.icon)}</button>
-        `;
-        render(view, this);
-    }
-}
-env.bind("overflow-menu", OverflowMenu);
-
-class OverflowMenuContainer extends HTMLElement {
-    private uid: string;
-    private items: Array<OverflowItem>;
-
-    constructor(uid: string, items: Array<OverflowItem>) {
-        super();
-        this.uid = uid;
-        this.items = items;
-        this.render();
-    }
-
     private handleItemClick: EventListener = (e: Event) => {
         const target = e.currentTarget as HTMLElement;
         const index = parseInt(target.dataset.index);
-        this.items?.[index]?.callback();
+        this.model.items?.[index]?.callback();
     };
 
     private renderItem(item: OverflowItem, index: number) {
@@ -146,14 +70,14 @@ class OverflowMenuContainer extends HTMLElement {
         `;
     }
 
-    private render() {
-        this.setAttribute("overflow-menu-container-id", this.uid);
+    override render() {
+        this.setAttribute("overflow-menu-container-id", this.model.uid);
         const view = html`
-            ${this.items.map((item, index) => {
+            ${this.model.items.map((item, index) => {
                 return this.renderItem(item, index);
             })}
         `;
         render(view, this);
     }
 }
-env.bind("overflow-menu-container", OverflowMenuContainer);
+env.bind("overflow-menu", OverflowMenu);