@dodlhuat/basix 1.2.7 → 1.2.9

package/js/code-viewer.ts

@@ -1,188 +0,0 @@
-type SupportedLanguage = 'javascript' | 'js' | 'html' | 'css';
-
-class CodeViewer {
-    private container: HTMLElement;
-    private code: string;
-    private language: string;
-
-    constructor(elementOrSelector: string | HTMLElement, code: string, language: SupportedLanguage = 'javascript') {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!element) {
-            throw new Error(`CodeViewer: Element not found for selector "${elementOrSelector}"`);
-        }
-        
-        this.container = element;
-        this.code = code;
-        this.language = language.toLowerCase();
-        this.render();
-    }
-
-    private highlight(code: string): string {
-        switch(this.language) {
-            case 'javascript':
-            case 'js':
-                return this.highlightJavaScript(code);
-            case 'html':
-                return this.highlightHTML(code);
-            case 'css':
-                return this.highlightCSS(code);
-            default:
-                return this.escape(code);
-        }
-    }
-
-    private escape(str: string): string {
-        return str
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-    }
-
-    private highlightJavaScript(code: string): string {
-        const strings: string[] = [];
-
-        code = code.replace(/`(?:[^`\\]|\\[\s\S])*`/g, (match) => {
-            strings.push(match);
-            return `###STRING${strings.length - 1}###`;
-        });
-
-        code = code.replace(/"(?:[^"\\]|\\[\s\S])*"/g, (match) => {
-            strings.push(match);
-            return `###STRING${strings.length - 1}###`;
-        });
-
-        code = code.replace(/'(?:[^'\\]|\\[\s\S])*'/g, (match) => {
-            strings.push(match);
-            return `###STRING${strings.length - 1}###`;
-        });
-
-        const comments: string[] = [];
-        code = code.replace(/(\/\/.*$)/gm, (match) => {
-            comments.push(match);
-            return `###COMMENT${comments.length - 1}###`;
-        });
-        code = code.replace(/(\/\*[\s\S]*?\*\/)/g, (match) => {
-            comments.push(match);
-            return `###COMMENT${comments.length - 1}###`;
-        });
-
-        code = this.escape(code);
-
-        const keywords = 'const|let|var|function|class|if|else|for|while|return|new|this|super|extends|import|export|from|default|async|await|try|catch|throw|switch|case|break|continue';
-        code = code.replace(new RegExp(`\\b(${keywords})\\b`, 'g'), '<span class="keyword">$1</span>');
-
-        code = code.replace(/\b(\d+(?:\.\d+)?)\b/g, '<span class="number">$1</span>');
-
-        strings.forEach((str, i) => {
-            code = code.replace(`###STRING${i}###`, '<span class="string">' + this.escape(str) + '</span>');
-        });
-
-        comments.forEach((comment, i) => {
-            code = code.replace(`###COMMENT${i}###`, '<span class="comment">' + this.escape(comment) + '</span>');
-        });
-
-        return code;
-    }
-
-    private highlightHTML(code: string): string {
-        code = this.escape(code);
-
-        code = code.replace(/(&lt;!--[\s\S]*?--&gt;)/g, '###COMMENT_START###$1###COMMENT_END###');
-
-        code = code.replace(/(&lt;\/?)([a-zA-Z0-9]+)([^&]*?)(&gt;)/g, (match, open, tagName, attrs, close) => {
-            attrs = attrs.replace(/\s+([a-zA-Z-]+)(=?)(&quot;[^&]*?&quot;|&#039;[^&]*?&#039;)?/g, (m: string, attrName: string, eq: string, attrValue?: string) => {
-                let result = ' <span class="attribute">' + attrName + '</span>';
-                if (eq) result += eq;
-                if (attrValue) result += '<span class="string">' + attrValue + '</span>';
-                return result;
-            });
-
-            return open + '<span class="tag">' + tagName + '</span>' + attrs + '<span class="punctuation">' + close + '</span>';
-        });
-
-        code = code.replace(/###COMMENT_START###(.*?)###COMMENT_END###/g, '<span class="comment">$1</span>');
-
-        return code;
-    }
-
-    private highlightCSS(code: string): string {
-        code = this.escape(code);
-
-        const comments: string[] = [];
-        code = code.replace(/(\/\*[\s\S]*?\*\/)/g, (match) => {
-            comments.push(match);
-            return `###COMMENT${comments.length - 1}###`;
-        });
-
-        const strings: string[] = [];
-        code = code.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, (match) => {
-            strings.push(match);
-            return `###STRING${strings.length - 1}###`;
-        });
-
-        code = code.replace(/^([^{]+)(?={)/gm, (match) => {
-            return '<span class="selector">' + match.trim() + '</span>';
-        });
-
-        code = code.replace(/([a-z-]+)(\s*):/gi, '<span class="property">$1</span>$2:');
-
-        code = code.replace(/:\s*([0-9.]+(?:px|em|rem|%|vh|vw|s|ms)?)/g, ': <span class="number">$1</span>');
-
-        strings.forEach((str, i) => {
-            code = code.replace(`###STRING${i}###`, '<span class="string">' + str + '</span>');
-        });
-
-        comments.forEach((comment, i) => {
-            code = code.replace(`###COMMENT${i}###`, '<span class="comment">' + comment + '</span>');
-        });
-
-        return code;
-    }
-
-    private async copyCode(): Promise<void> {
-        try {
-            await navigator.clipboard.writeText(this.code);
-            const btn = this.container.querySelector<HTMLButtonElement>('.copy-button');
-            
-            if (!btn) return;
-            
-            btn.textContent = 'copied!';
-            btn.classList.add('copied');
-
-            setTimeout(() => {
-                btn.textContent = 'Copy';
-                btn.classList.remove('copied');
-            }, 2000);
-        } catch (err) {
-            console.error('Error:', err);
-        }
-    }
-
-    private render(): void {
-        const highlighted = this.highlight(this.code);
-
-        this.container.innerHTML = `
-                    <div class="code-display">
-                        <div class="code-header">
-                            <span class="code-language">${this.language}</span>
-                            <button class="copy-button">Copy</button>
-                        </div>
-                        <div class="code-content">
-                            <pre>${highlighted}</pre>
-                        </div>
-                    </div>
-                `;
-
-        const copyButton = this.container.querySelector<HTMLButtonElement>('.copy-button');
-        if (copyButton) {
-            copyButton.addEventListener('click', () => this.copyCode());
-        }
-    }
-}
-export { CodeViewer };
-export type { SupportedLanguage };

package/js/context-menu.ts

@@ -1,252 +0,0 @@
-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 };