♻ Refactored Split Button to use new Overflow Menu

codewithkyle · codewithkyle · commit a163621ca0a5 · 2023-03-27T17:24:42.000-04:00
diff --git a/src/framework/components/buttons/overflow-button/overflow-button.ts b/src/framework/components/buttons/overflow-button/overflow-button.ts
@@ -76,10 +76,12 @@ export default class OverflowButton extends SuperComponent<IOverflowButton> {
 
     private handleClick: EventListener = (e: Event) => {
         e.stopImmediatePropagation();
-        const target = e.currentTarget as HTMLElement;
-        const container = new OverflowMenu(this.uid, this.model.items);
+        const container = new OverflowMenu({
+            uid: this.uid,
+            items: this.model.items,
+            target: this,
+        });
         document.body.appendChild(container);
-        pos.positionElementToElement(container, target);
     };
 
     override render() {
diff --git a/src/framework/components/buttons/split-button/split-button.scss b/src/framework/components/buttons/split-button/split-button.scss
@@ -94,113 +94,4 @@ split-button {
             }
         }
     }
-
-    button-menu {
-        opacity: 0;
-        border-radius: 0.25rem;
-        background-color: var(--white);
-        border: 1px solid var(--grey-300);
-        box-shadow: var(--shadow-grey-sm);
-        padding: 0.25rem 0;
-        display: inline-block;
-        position: absolute;
-        top: calc(100% + 0.25rem);
-        right: 0;
-        z-index: 1000;
-        pointer-events: none;
-        visibility: hidden;
-
-        &:focus-within {
-            pointer-events: all;
-            opacity: 1;
-            visibility: visible;
-        }
-
-        button {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            flex-flow: row nowrap;
-            min-height: 36px;
-            padding: 0 1rem;
-            color: var(--grey-700);
-            position: relative;
-            font-size: var(--font-sm);
-            font-weight: var(--font-medium);
-            line-height: 1;
-            white-space: nowrap;
-            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 {
-                &::before {
-                    opacity: 0.05;
-                }
-            }
-
-            &:active {
-                outline-offset: 0;
-
-                &::before {
-                    opacity: 0.1;
-                }
-            }
-
-            &::before {
-                content: "";
-                display: inline-block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                opacity: 0;
-                background-color: var(--grey-500);
-                transition: all 80ms var(--ease-in-out);
-            }
-
-            &.danger {
-                color: var(--danger-700);
-
-                &::before {
-                    background-color: var(--danger-500);
-                }
-
-                i {
-                    svg {
-                        color: var(--danger-700);
-                    }
-                }
-            }
-
-            i {
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                margin-right: 0.5rem;
-                margin-left: -0.375rem;
-                width: 24px;
-                height: 24px;
-
-                svg {
-                    width: 18px;
-                    height: 18px;
-                    color: var(--grey-600);
-                }
-            }
-        }
-
-        hr {
-            display: block;
-            width: 100%;
-            margin: 0.25rem 0;
-            border-bottom: 1px solid var(--grey-300);
-        }
-    }
 }
diff --git a/src/framework/components/buttons/split-button/split-button.ts b/src/framework/components/buttons/split-button/split-button.ts
@@ -3,6 +3,8 @@ import SuperComponent from "@codewithkyle/supercomponent";
 import env from "~brixi/controllers/env";
 import { noop, parseDataset } from "~brixi/utils/general";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import OverflowMenu, { OverflowItem } from "~brixi/components/overflow-menu/overflow-menu";
+import { UUID } from "@codewithkyle/uuid";
 
 type ButtonType = "submit" | "button" | "reset";
 
@@ -15,13 +17,7 @@ export interface ISplitButton {
     type: ButtonType;
     label: string;
     icon?: string | HTMLElement;
-    buttons: Array<{
-        label: string;
-        type?: ButtonType;
-        icon?: string | HTMLElement;
-        callback: Function;
-        danger?: boolean;
-    }>;
+    buttons: OverflowItem[];
     callback: Function;
 }
 export interface SplitButtonSettings {
@@ -33,18 +29,15 @@ export interface SplitButtonSettings {
     type: ButtonType;
     label: string;
     icon?: string | HTMLElement;
-    buttons: Array<{
-        label: string;
-        type?: ButtonType;
-        icon?: string | HTMLElement;
-        callback: Function;
-        danger?: boolean;
-    }>;
+    buttons: OverflowItem[];
     callback: Function;
 }
 export default class SplitButton extends SuperComponent<ISplitButton> {
+    private uid: string;
+
     constructor(settings: SplitButtonSettings) {
         super();
+        this.uid = UUID();
         this.model = {
             css: "",
             class: "",
@@ -73,22 +66,14 @@ export default class SplitButton extends SuperComponent<ISplitButton> {
         this.model.callback();
     };
 
-    private handleSecondaryClick = (e: Event) => {
-        const target = e.currentTarget as HTMLElement;
-        const index = parseInt(target.dataset.index);
-        this.model.buttons[index].callback();
-    };
-
     private openMenu = () => {
-        const buttonMenu: HTMLElement = this.querySelector("button-menu");
-        if (buttonMenu) {
-            buttonMenu.style.visibility = "visible";
-            const firstMenuBttn: HTMLElement = buttonMenu.querySelector("button-menu button");
-            console.log(firstMenuBttn);
-            if (firstMenuBttn) {
-                firstMenuBttn.focus();
-            }
-        }
+        const menu = new OverflowMenu({
+            target: this,
+            uid: this.uid,
+            items: this.model.buttons,
+            offset: 4,
+        });
+        document.body.appendChild(menu);
     };
 
     private renderIcon(icon: string | HTMLElement): string | TemplateResult {
@@ -127,19 +112,6 @@ export default class SplitButton extends SuperComponent<ISplitButton> {
                         <polyline points="6 9 12 15 18 9"></polyline>
                     </svg>
                 </button>
-                <button-menu>
-                    ${this.model.buttons.map((button, i) => {
-                        if (button === null) {
-                            return html`<hr />`;
-                        } else {
-                            return html`
-                                <button class="${button?.danger ? "danger" : ""}" type="${button?.type ?? "button"}" @click=${this.handleSecondaryClick} data-index="${i}">
-                                    ${this.renderIcon(button?.icon ?? "")} ${this.renderLabel(button.label)}
-                                </button>
-                            `;
-                        }
-                    })}
-                </button-menu>
             `;
         } else {
             out = "";
diff --git a/src/framework/components/overflow-menu/overflow-menu.ts b/src/framework/components/overflow-menu/overflow-menu.ts
@@ -2,6 +2,7 @@ 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 pos from "~brixi/controllers/pos";
 
 export interface OverflowItem {
     label: string;
@@ -12,16 +13,20 @@ export interface OverflowItem {
 export interface IOverflowMenu {
     items: Array<OverflowItem>;
     uid: string;
+    offset?: number;
+    target: HTMLElement;
 }
 export default class OverflowMenu extends SuperComponent<IOverflowMenu> {
-    constructor(uid: string, items: Array<OverflowItem>) {
+    constructor(settings: IOverflowMenu) {
         super();
         this.model = {
-            items: items,
-            uid: uid,
+            items: [],
+            uid: "",
+            offset: 0,
+            target: null,
         };
         env.css("overflow-menu").then(() => {
-            this.render();
+            this.set(settings);
         });
     }
 
@@ -78,6 +83,7 @@ export default class OverflowMenu extends SuperComponent<IOverflowMenu> {
             })}
         `;
         render(view, this);
+        pos.positionElementToElement(this, this.model.target, this.model.offset);
     }
 }
 env.bind("overflow-menu", OverflowMenu);
diff --git a/src/framework/controllers/pos.ts b/src/framework/controllers/pos.ts
@@ -49,16 +49,18 @@ class Positions {
         el.style.transform = `translate(${x}px, ${y}px)`;
     }
 
-    public positionElementToElement(el: HTMLElement, target: HTMLElement): void {
+    public positionElementToElement(el: HTMLElement, target: HTMLElement, offset: number = 0): void {
         const elBounds = el.getBoundingClientRect();
         const targetBounds = target.getBoundingClientRect();
-        let top = targetBounds.top + targetBounds.height;
+        let top = targetBounds.top + targetBounds.height + offset;
         if (top + elBounds.height >= this.window.innerHeight) {
-            top = targetBounds.top - elBounds.height;
+            top = targetBounds.top - elBounds.height - offset;
         }
-        let left = targetBounds.left;
+        let left = targetBounds.right - elBounds.width;
         if (left + elBounds.width >= this.window.innerWidth) {
             left = this.window.innerWidth - elBounds.width;
+        } else if (left < 0) {
+            left = 0;
         }
         el.style.transform = `translate(${left}px, ${top}px)`;
     }

Original file line number	Diff line number	Diff line change
`@@ -49,16 +49,18 @@ class Positions {`
`49`	`49`	el.style.transform = `translate(${x}px, ${y}px)`;
`50`	`50`	`}`
`51`	`51`
`52`		`- public positionElementToElement(el: HTMLElement, target: HTMLElement): void {`
	`52`	`+ public positionElementToElement(el: HTMLElement, target: HTMLElement, offset: number = 0): void {`
`53`	`53`	`const elBounds = el.getBoundingClientRect();`
`54`	`54`	`const targetBounds = target.getBoundingClientRect();`
`55`		`- let top = targetBounds.top + targetBounds.height;`
	`55`	`+ let top = targetBounds.top + targetBounds.height + offset;`
`56`	`56`	`if (top + elBounds.height >= this.window.innerHeight) {`
`57`		`- top = targetBounds.top - elBounds.height;`
	`57`	`+ top = targetBounds.top - elBounds.height - offset;`
`58`	`58`	`}`
`59`		`- let left = targetBounds.left;`
	`59`	`+ let left = targetBounds.right - elBounds.width;`
`60`	`60`	`if (left + elBounds.width >= this.window.innerWidth) {`
`61`	`61`	`left = this.window.innerWidth - elBounds.width;`
	`62`	`+ } else if (left < 0) {`
	`63`	`+ left = 0;`
`62`	`64`	`}`
`63`	`65`	el.style.transform = `translate(${left}px, ${top}px)`;
`64`	`66`	`}`