✨ Added Context Menu component

Author: codewithkyle

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

@@ -0,0 +1,41 @@
+context-menu {
+    display: inline-block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--grey-800);
+    box-shadow: var(--shadow-grey-sm);
+    border: 1px solid var(--grey-600);
+    padding: 0.5rem 0;
+    min-width: 200px;
+
+    button {
+        white-space: nowrap;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-flow: row nowrap;
+        padding: 0 1rem;
+        width: 100%;
+        height: 24px;
+
+        &:hover,
+        &:focus-visible {
+            background-color: var(--primary-500);
+        }
+
+        span {
+            display: inline-block;
+            font-size: var(--font-xs);
+            color: var(--white);
+        }
+    }
+
+    hr {
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--grey-600);
+        margin: 0.5rem 0;
+    }
+}

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

@@ -0,0 +1,85 @@
+import { html, render, TemplateResult } from "lit-html";
+import SuperComponent from "@codewithkyle/supercomponent";
+import env from "~brixi/controllers/env";
+import pos from "~brixi/controllers/pos";
+
+export interface ContextMenuItem {
+    label: string;
+    hotkey?: string;
+    callback: Function;
+}
+export interface IContextMenu {
+    items: ContextMenuItem[];
+    x: number;
+    y: number;
+}
+export interface ContextMenuSettings {
+    items: ContextMenuItem[];
+    x: number;
+    y: number;
+}
+export default class ContextMenu extends SuperComponent<IContextMenu> {
+    constructor(settings: ContextMenuSettings) {
+        super();
+        this.model = {
+            items: [],
+            x: 0,
+            y: 0,
+        };
+        env.css(["context-menu"]).then(() => {
+            this.set(settings);
+        });
+    }
+
+    override connected() {
+        document.addEventListener(
+            "click",
+            () => {
+                this.remove();
+            },
+            { passive: true, capture: true }
+        );
+        window.addEventListener(
+            "resize",
+            () => {
+                this.remove();
+            },
+            { passive: true, capture: true }
+        );
+        window.addEventListener(
+            "scroll",
+            () => {
+                this.remove();
+            },
+            { passive: true, capture: true }
+        );
+        this.addEventListener("click", (e: Event) => {
+            e.stopImmediatePropagation();
+        });
+    }
+
+    private handleItemClick: EventListener = (e: Event) => {
+        const target = e.currentTarget as HTMLElement;
+        const index = parseInt(target.dataset.index);
+        this.model.items?.[index]?.callback();
+    };
+
+    private renderItem(item: ContextMenuItem, index: number): TemplateResult {
+        if (item === null) {
+            return html`<hr />`;
+        }
+        return html`
+            <button sfx="button" type="button" @click=${this.handleItemClick} data-index="${index}">
+                <span>${item.label}</span>
+                ${item.hotkey ? html`<span class="font-grey-400">${item.hotkey}</span>` : ""}
+            </button>
+        `;
+    }
+
+    override render() {
+        pos.positionElement(this, this.model.x, this.model.y);
+        const view = html` ${this.model.items?.map((item, index) => this.renderItem(item, index))} `;
+        render(view, this);
+    }
+}
+env.bind("context-menu", ContextMenu);

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

@@ -0,0 +1,42 @@
+<script type="module">
+    import Component from "/js/context-menu.js";
+    const example = new Component({
+        items: [
+            {
+                label: "Back",
+                callback: () => {
+                    console.log("Back");
+                },
+            },
+            {
+                label: "Forward",
+                callback: () => {
+                    console.log("Forward");
+                },
+            },
+            {
+                label: "Reload",
+                hotkey: "Ctrl+R",
+                callback: () => {
+                    location.reload();
+                },
+            },
+            null,
+            {
+                label: "Action 1",
+                callback: () => {
+                    console.log("Action 1");
+                },
+            },
+            {
+                label: "Action 2",
+                callback: () => {
+                    console.log("Action 2");
+                },
+            },
+        ],
+        x: 24,
+        y: 24,
+    });
+    document.body.appendChild(example);
+</script>