@dodlhuat/basix 1.1.0 → 1.2.0

package/js/context-menu.ts

@@ -0,0 +1,252 @@
+interface ContextMenuItemDef {
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    destructive?: boolean;
+    action?: (target: HTMLElement) => void;
+    submenu?: ContextMenuInput[];
+}
+
+type ContextMenuInput = ContextMenuItemDef | 'separator' | { group: string };
+
+class ContextMenu {
+    private items: ContextMenuInput[];
+    private targets: HTMLElement[];
+    private menuEl: HTMLElement | null = null;
+    private currentTarget: HTMLElement | null = null;
+    private abortController = new AbortController();
+
+    constructor(
+        selectorOrElement: string | HTMLElement | HTMLElement[],
+        items: ContextMenuInput[]
+    ) {
+        this.items = items;
+
+        if (typeof selectorOrElement === 'string') {
+            this.targets = Array.from(document.querySelectorAll<HTMLElement>(selectorOrElement));
+        } else if (Array.isArray(selectorOrElement)) {
+            this.targets = selectorOrElement;
+        } else {
+            this.targets = [selectorOrElement];
+        }
+
+        this.init();
+    }
+
+    private init(): void {
+        const { signal } = this.abortController;
+
+        this.targets.forEach((target) => {
+            target.addEventListener('contextmenu', (e: MouseEvent) => {
+                e.preventDefault();
+                this.currentTarget = target;
+                this.open(e.clientX, e.clientY);
+            }, { signal });
+        });
+
+        document.addEventListener('click', () => this.close(), { signal });
+
+        // Close on right-click outside the menu
+        document.addEventListener('contextmenu', (e: MouseEvent) => {
+            if (this.menuEl && !this.menuEl.contains(e.target as Node)) {
+                this.close();
+            }
+        }, { signal, capture: true });
+
+        document.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (!this.menuEl) return;
+            if (e.key === 'Escape')    { this.close(); }
+            if (e.key === 'ArrowDown') { e.preventDefault(); this.moveFocus(1); }
+            if (e.key === 'ArrowUp')   { e.preventDefault(); this.moveFocus(-1); }
+            if (e.key === 'Enter')     { e.preventDefault(); this.activateFocused(); }
+        }, { signal });
+
+        // Close on scroll outside the menu
+        window.addEventListener('scroll', (e: Event) => {
+            if (!this.menuEl?.contains(e.target as Node)) this.close();
+        }, { signal, capture: true });
+
+        window.addEventListener('resize', () => this.close(), { signal });
+    }
+
+    private open(x: number, y: number): void {
+        this.close();
+
+        this.menuEl = this.buildMenu(this.items);
+        document.body.appendChild(this.menuEl);
+
+        // Use offsetWidth/offsetHeight — unaffected by CSS transform
+        const w = this.menuEl.offsetWidth;
+        const h = this.menuEl.offsetHeight;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        const left = x + w > vw ? vw - w - 8 : x;
+        const top  = y + h > vh ? vh - h - 8 : y;
+
+        // Set transform-origin to match the corner the menu opens from
+        const originX = x + w > vw ? 'right' : 'left';
+        const originY = y + h > vh ? 'bottom' : 'top';
+
+        this.menuEl.style.left = `${left}px`;
+        this.menuEl.style.top  = `${top}px`;
+        this.menuEl.style.transformOrigin = `${originY} ${originX}`;
+
+        requestAnimationFrame(() => this.menuEl?.classList.add('is-visible'));
+    }
+
+    private close(): void {
+        if (!this.menuEl) return;
+        const el = this.menuEl;
+        this.menuEl = null;
+
+        el.classList.remove('is-visible');
+
+        // Wait for exit transition then remove from DOM
+        el.addEventListener('transitionend', () => el.remove(), { once: true });
+        setTimeout(() => el.isConnected && el.remove(), 200);
+    }
+
+    private buildMenu(items: ContextMenuInput[]): HTMLElement {
+        const ul = document.createElement('ul');
+        ul.className = 'context-menu';
+
+        for (const item of items) {
+            if (item === 'separator') {
+                const li = document.createElement('li');
+                li.className = 'context-menu-separator';
+                ul.appendChild(li);
+                continue;
+            }
+
+            if ('group' in item) {
+                const li = document.createElement('li');
+                li.className = 'context-menu-group-label';
+                li.textContent = item.group;
+                ul.appendChild(li);
+                continue;
+            }
+
+            ul.appendChild(this.buildItem(item));
+        }
+
+        return ul;
+    }
+
+    private buildItem(def: ContextMenuItemDef): HTMLElement {
+        const li = document.createElement('li');
+        li.className = 'context-menu-item';
+
+        if (def.disabled)    li.classList.add('is-disabled');
+        if (def.destructive) li.classList.add('is-destructive');
+        if (def.submenu)     li.classList.add('has-submenu');
+
+        // Always render icon slot — keeps label column aligned across all items
+        const iconWrap = document.createElement('span');
+        iconWrap.className = 'context-menu-icon';
+        if (def.icon) {
+            iconWrap.innerHTML = `<svg class="icon-svg"><use href="svg-icons/icons.svg#${def.icon}"/></svg>`;
+        }
+        li.appendChild(iconWrap);
+
+        const label = document.createElement('span');
+        label.className = 'context-menu-label';
+        label.textContent = def.label;
+        li.appendChild(label);
+
+        if (def.shortcut) {
+            const sc = document.createElement('span');
+            sc.className = 'context-menu-shortcut';
+            sc.textContent = def.shortcut;
+            li.appendChild(sc);
+        }
+
+        if (def.submenu) {
+            const chevron = document.createElement('span');
+            chevron.className = 'context-menu-chevron';
+            li.appendChild(chevron);
+
+            const submenuEl = this.buildMenu(def.submenu);
+            li.appendChild(submenuEl);
+
+            // Determine flip synchronously from parent position — no rAF flash
+            const shouldFlip = (): boolean => {
+                const rect = li.getBoundingClientRect();
+                return rect.right + submenuEl.offsetWidth > window.innerWidth;
+            };
+
+            // Delay timer prevents the submenu closing when mouse travels from
+            // item → submenu (mouseleave fires before mouseenter on the submenu)
+            let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+            const openSub = () => {
+                if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
+                this.closeAllSubmenus(li.closest<HTMLElement>('.context-menu')!);
+                li.classList.toggle('submenu-flip', shouldFlip());
+                li.classList.add('is-active');
+            };
+
+            const closeSub = () => {
+                closeTimer = setTimeout(() => li.classList.remove('is-active'), 120);
+            };
+
+            li.addEventListener('mouseenter', openSub);
+            li.addEventListener('mouseleave', closeSub);
+            submenuEl.addEventListener('mouseenter', () => {
+                if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
+            });
+            submenuEl.addEventListener('mouseleave', closeSub);
+        } else if (!def.disabled) {
+            li.addEventListener('click', (e: MouseEvent) => {
+                e.stopPropagation();
+                def.action?.(this.currentTarget!);
+                this.close();
+            });
+        }
+
+        return li;
+    }
+
+    private closeAllSubmenus(menu: HTMLElement): void {
+        // Only close direct-child submenus of this menu level
+        Array.from(menu.children).forEach((child) => {
+            child.classList.remove('is-active');
+        });
+    }
+
+    private getFocusableItems(): HTMLElement[] {
+        if (!this.menuEl) return [];
+        return Array.from(
+            this.menuEl.children
+        ).filter(
+            (el): el is HTMLElement =>
+                el.classList.contains('context-menu-item') &&
+                !el.classList.contains('is-disabled')
+        ) as HTMLElement[];
+    }
+
+    private moveFocus(direction: 1 | -1): void {
+        const items = this.getFocusableItems();
+        if (!items.length) return;
+
+        const currentIndex = items.findIndex((el) => el.classList.contains('is-focused'));
+        const nextIndex = (currentIndex + direction + items.length) % items.length;
+
+        items[currentIndex]?.classList.remove('is-focused');
+        items[nextIndex].classList.add('is-focused');
+    }
+
+    private activateFocused(): void {
+        this.menuEl
+            ?.querySelector<HTMLElement>('.context-menu-item.is-focused')
+            ?.click();
+    }
+
+    public destroy(): void {
+        this.close();
+        this.abortController.abort();
+    }
+}
+
+export { ContextMenu, type ContextMenuInput, type ContextMenuItemDef };

package/js/editor.js

@@ -1,20 +1,31 @@
 class Editor {
-    constructor() {
+    constructor(options = {}) {
         this.undoStack = [];
         this.redoStack = [];
         const editable = document.getElementById('editable');
-        const code = document.getElementById('code');
-        const preview = document.getElementById('preview');
-        const sidePanel = document.getElementById('sidePanel');
-        const wordCount = document.getElementById('wordCount');
-        if (!editable || !code || !preview || !sidePanel) {
-            throw new Error('Editor: Required elements not found');
+        if (!editable) {
+            throw new Error('Editor: #editable element not found');
         }
         this.editable = editable;
-        this.code = code;
-        this.preview = preview;
-        this.sidePanel = sidePanel;
-        this.wordCount = wordCount;
+        this.wordCount = document.getElementById('wordCount');
+        if (options.simple) {
+            this.code = null;
+            this.preview = null;
+            this.sidePanel = document.getElementById('sidePanel');
+            this.sidePanel?.classList.add('hidden');
+        }
+        else {
+            const code = document.getElementById('code');
+            const preview = document.getElementById('preview');
+            const sidePanel = document.getElementById('sidePanel');
+            if (!code || !preview || !sidePanel) {
+                throw new Error('Editor: #code, #preview and #sidePanel are required unless simple: true');
+            }
+            this.code = code;
+            this.preview = preview;
+            this.sidePanel = sidePanel;
+            this.sidePanel.classList.add('hidden');
+        }
         this.bindToolbar();
         this.bindActions();
         this.bindKeyboard();
@@ -22,8 +33,6 @@ class Editor {
         this.bindTabs();
         this.syncViews();
         this.saveState();
-        // Start with side panel hidden
-        this.sidePanel.classList.add('hidden');
     }
     bindToolbar() {
         document.querySelectorAll('[data-cmd]').forEach(btn => {
@@ -69,26 +78,29 @@ class Editor {
         document.getElementById('undoBtn')?.addEventListener('click', () => this.undo());
         document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
         document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
-            this.sidePanel.classList.toggle('hidden');
+            this.sidePanel?.classList.toggle('hidden');
             this.syncViews();
         });
         // Code action buttons — matched by position within .code-actions
-        const codeActions = document.querySelectorAll('.code-actions button');
-        codeActions[0]?.addEventListener('click', () => {
-            this.editable.innerHTML = this.sanitizeHTML(this.code.value);
-            this.onContentChange();
-        });
-        codeActions[1]?.addEventListener('click', () => {
-            this.code.value = this.sanitizeHTML(this.code.value);
-            this.editable.innerHTML = this.code.value;
-            this.onContentChange();
-        });
-        codeActions[2]?.addEventListener('click', () => {
-            this.code.value = this.code.value
-                .replace(/\n/g, '')
-                .replace(/>\s+</g, '><')
-                .trim();
-        });
+        if (this.code) {
+            const code = this.code;
+            const codeActions = document.querySelectorAll('.code-actions button');
+            codeActions[0]?.addEventListener('click', () => {
+                this.editable.innerHTML = this.sanitizeHTML(code.value);
+                this.onContentChange();
+            });
+            codeActions[1]?.addEventListener('click', () => {
+                code.value = this.sanitizeHTML(code.value);
+                this.editable.innerHTML = code.value;
+                this.onContentChange();
+            });
+            codeActions[2]?.addEventListener('click', () => {
+                code.value = code.value
+                    .replace(/\n/g, '')
+                    .replace(/>\s+</g, '><')
+                    .trim();
+            });
+        }
         const saveBtn = document.getElementById('saveBtn');
         saveBtn?.addEventListener('click', () => this.downloadHTML());
         document.getElementById('clearBtn')?.addEventListener('click', () => {
@@ -163,8 +175,10 @@ class Editor {
         this.syncViews();
     }
     syncViews() {
-        this.code.value = this.editable.innerHTML.trim();
-        this.preview.innerHTML = this.editable.innerHTML;
+        if (this.code)
+            this.code.value = this.editable.innerHTML.trim();
+        if (this.preview)
+            this.preview.innerHTML = this.editable.innerHTML;
         this.updateWordCount();
     }
     updateWordCount() {

package/js/editor.ts

@@ -1,28 +1,47 @@
+interface EditorOptions {
+    /** Hides the entire side panel (code/preview) permanently. Safe to use
+     *  without #code, #preview, or #sidePanel in the DOM. */
+    simple?: boolean;
+}
+
 class Editor {
     private readonly editable: HTMLElement;
-    private readonly code: HTMLTextAreaElement;
-    private readonly preview: HTMLElement;
-    private readonly sidePanel: HTMLElement;
+    private readonly code: HTMLTextAreaElement | null;
+    private readonly preview: HTMLElement | null;
+    private readonly sidePanel: HTMLElement | null;
     private readonly wordCount: HTMLElement | null;
     private undoStack: string[] = [];
     private redoStack: string[] = [];
 
-    constructor() {
+    constructor(options: EditorOptions = {}) {
         const editable = document.getElementById('editable');
-        const code = document.getElementById('code') as HTMLTextAreaElement;
-        const preview = document.getElementById('preview');
-        const sidePanel = document.getElementById('sidePanel');
-        const wordCount = document.getElementById('wordCount');
 
-        if (!editable || !code || !preview || !sidePanel) {
-            throw new Error('Editor: Required elements not found');
+        if (!editable) {
+            throw new Error('Editor: #editable element not found');
         }
 
-        this.editable = editable;
-        this.code = code;
-        this.preview = preview;
-        this.sidePanel = sidePanel;
-        this.wordCount = wordCount;
+        this.editable  = editable;
+        this.wordCount = document.getElementById('wordCount');
+
+        if (options.simple) {
+            this.code      = null;
+            this.preview   = null;
+            this.sidePanel = document.getElementById('sidePanel');
+            this.sidePanel?.classList.add('hidden');
+        } else {
+            const code      = document.getElementById('code') as HTMLTextAreaElement;
+            const preview   = document.getElementById('preview');
+            const sidePanel = document.getElementById('sidePanel');
+
+            if (!code || !preview || !sidePanel) {
+                throw new Error('Editor: #code, #preview and #sidePanel are required unless simple: true');
+            }
+
+            this.code      = code;
+            this.preview   = preview;
+            this.sidePanel = sidePanel;
+            this.sidePanel.classList.add('hidden');
+        }
 
         this.bindToolbar();
         this.bindActions();
@@ -31,9 +50,6 @@ class Editor {
         this.bindTabs();
         this.syncViews();
         this.saveState();
-
-        // Start with side panel hidden
-        this.sidePanel.classList.add('hidden');
     }
 
     private bindToolbar(): void {
@@ -82,27 +98,30 @@ class Editor {
         document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
 
         document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
-            this.sidePanel.classList.toggle('hidden');
+            this.sidePanel?.classList.toggle('hidden');
             this.syncViews();
         });
 
         // Code action buttons — matched by position within .code-actions
-        const codeActions = document.querySelectorAll<HTMLButtonElement>('.code-actions button');
-        codeActions[0]?.addEventListener('click', () => {
-            this.editable.innerHTML = this.sanitizeHTML(this.code.value);
-            this.onContentChange();
-        });
-        codeActions[1]?.addEventListener('click', () => {
-            this.code.value = this.sanitizeHTML(this.code.value);
-            this.editable.innerHTML = this.code.value;
-            this.onContentChange();
-        });
-        codeActions[2]?.addEventListener('click', () => {
-            this.code.value = this.code.value
-                .replace(/\n/g, '')
-                .replace(/>\s+</g, '><')
-                .trim();
-        });
+        if (this.code) {
+            const code = this.code;
+            const codeActions = document.querySelectorAll<HTMLButtonElement>('.code-actions button');
+            codeActions[0]?.addEventListener('click', () => {
+                this.editable.innerHTML = this.sanitizeHTML(code.value);
+                this.onContentChange();
+            });
+            codeActions[1]?.addEventListener('click', () => {
+                code.value = this.sanitizeHTML(code.value);
+                this.editable.innerHTML = code.value;
+                this.onContentChange();
+            });
+            codeActions[2]?.addEventListener('click', () => {
+                code.value = code.value
+                    .replace(/\n/g, '')
+                    .replace(/>\s+</g, '><')
+                    .trim();
+            });
+        }
 
         const saveBtn = document.getElementById('saveBtn');
         saveBtn?.addEventListener('click', () => this.downloadHTML());
@@ -171,8 +190,8 @@ class Editor {
     }
 
     private syncViews(): void {
-        this.code.value = this.editable.innerHTML.trim();
-        this.preview.innerHTML = this.editable.innerHTML;
+        if (this.code)    this.code.value          = this.editable.innerHTML.trim();
+        if (this.preview) this.preview.innerHTML   = this.editable.innerHTML;
         this.updateWordCount();
     }
 

package/js/gallery.js

@@ -13,6 +13,9 @@ class MasonryGallery {
                 this.loadMoreImages();
             }
         };
+        this.fetchMockImages = () => {
+            throw Error("Method not implemented.");
+        };
         const container = document.getElementById(containerId);
         if (!container) {
             throw new Error(`Container with id "${containerId}" not found`);
@@ -85,7 +88,8 @@ class MasonryGallery {
         });
     }
     async loadMoreImages(isAutoFill = false) {
-        if (!isAutoFill) this.reloaded++;
+        if (!isAutoFill)
+            this.reloaded++;
         if (this.options.reload > 0 && this.reloaded > this.options.reload) {
             console.warn("Maximum reload limit reached.");
             return;
@@ -119,9 +123,6 @@ class MasonryGallery {
             this.loader.classList.toggle("hidden", !show);
         }
     }
-    fetchMockImages = () => {
-        throw Error("Method not implemented.");
-    };
     renderImages(imageDataList) {
         imageDataList.forEach((data) => {
             const item = this.createCard(data);
@@ -142,12 +143,12 @@ class MasonryGallery {
     createCard(data) {
         const div = document.createElement("div");
         div.className = "masonry-item";
-        div.innerHTML = `
-      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
-      <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
-      </div>
+        div.innerHTML = `
+      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
+      <div class="masonry-item-info">
+        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
+        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
+      </div>
     `;
         return div;
     }