@dodlhuat/basix 1.2.7 → 1.2.9

package/js/file-uploader.ts

@@ -1,361 +0,0 @@
-import { escapeHtml } from './utils.js';
-
-interface FileData {
-    file: File;
-    element: HTMLDivElement;
-}
-
-interface UploadCompletedDetail {
-    fileCount: number;
-    files: File[];
-    results: PromiseSettledResult<unknown>[];
-}
-
-interface FileValidationErrorDetail {
-    file: File;
-    reason: 'size' | 'type';
-}
-
-interface FileUploaderConfig {
-    uploadUrl?: string;
-    maxFileSize?: number;
-    allowedTypes?: string[];
-}
-
-class FileUploader {
-    private container: HTMLElement;
-    private dropZone: HTMLElement;
-    private fileInput: HTMLInputElement;
-    private fileList: HTMLElement;
-    private uploadBtn: HTMLButtonElement;
-    private files: Map<string, FileData> = new Map();
-    private uploadUrl: string;
-    private maxFileSize?: number;
-    private allowedTypes?: string[];
-    private abortControllers: Map<string, () => void> = new Map();
-
-    constructor(elementOrSelector: string | HTMLElement, config: FileUploaderConfig = {}) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!container) {
-            throw new Error(`FileUploader: Element not found for selector "${elementOrSelector}"`);
-        }
-
-        this.container = container;
-        this.container.classList.add('file-uploader');
-
-        const dropZone = container.querySelector<HTMLElement>('.drop-zone');
-        const fileInput = container.querySelector<HTMLInputElement>('.file-input');
-        const fileList = container.querySelector<HTMLElement>('.file-list');
-        const uploadBtn = container.querySelector<HTMLButtonElement>('.upload-btn');
-
-        if (!dropZone || !fileInput || !fileList || !uploadBtn) {
-            throw new Error('Required elements not found in container');
-        }
-
-        this.dropZone = dropZone;
-        this.fileInput = fileInput;
-        this.fileList = fileList;
-        this.uploadBtn = uploadBtn;
-
-        this.uploadUrl = config.uploadUrl ?? 'https://httpbin.org/post';
-        this.maxFileSize = config.maxFileSize;
-        this.allowedTypes = config.allowedTypes;
-
-        this.init();
-    }
-
-    private init(): void {
-        this.setupEventListeners();
-    }
-
-    private fileKey(file: File): string {
-        return `${file.name}-${file.size}-${file.lastModified}`;
-    }
-
-    private setupEventListeners(): void {
-        (['dragenter', 'dragover', 'dragleave', 'drop'] as const).forEach(event => {
-            this.dropZone.addEventListener(event, this.preventDefaults);
-        });
-
-        (['dragenter', 'dragover'] as const).forEach(event => {
-            this.dropZone.addEventListener(event, this.handleDragEnter);
-        });
-
-        (['dragleave', 'drop'] as const).forEach(event => {
-            this.dropZone.addEventListener(event, this.handleDragLeave);
-        });
-
-        this.dropZone.addEventListener('drop', this.handleDrop);
-        this.dropZone.addEventListener('click', this.handleDropZoneClick);
-        this.fileInput.addEventListener('change', this.handleFileInputChange);
-        this.uploadBtn.addEventListener('click', this.handleUploadClick);
-    }
-
-    private preventDefaults = (e: Event): void => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-
-    private handleDragEnter = (): void => {
-        this.dropZone.classList.add('drag-over');
-    };
-
-    private handleDragLeave = (): void => {
-        this.dropZone.classList.remove('drag-over');
-    };
-
-    private handleDrop = (e: DragEvent): void => {
-        const droppedFiles = e.dataTransfer?.files;
-        if (droppedFiles) {
-            this.handleFiles(droppedFiles);
-        }
-    };
-
-    private handleDropZoneClick = (): void => {
-        this.fileInput.click();
-    };
-
-    private handleFileInputChange = (e: Event): void => {
-        const target = e.target as HTMLInputElement;
-        if (target.files) {
-            this.handleFiles(target.files);
-            target.value = '';
-        }
-    };
-
-    private handleUploadClick = async (): Promise<void> => {
-        if (this.files.size === 0) return;
-
-        this.uploadBtn.disabled = true;
-        this.uploadBtn.textContent = 'Uploading...';
-
-        const uploadPromises = Array.from(this.files.values()).map(({ file, element }) =>
-            this.uploadFile(file, element)
-        );
-
-        const results = await Promise.allSettled(uploadPromises);
-
-        this.uploadBtn.textContent = 'Upload Complete';
-
-        setTimeout(() => {
-            this.dispatchUploadCompletedEvent(results);
-            this.fileList.innerHTML = '';
-            this.files.clear();
-            this.updateUploadButton();
-        }, 1500);
-    };
-
-    private handleFiles(fileList: FileList): void {
-        Array.from(fileList).forEach(file => {
-            const key = this.fileKey(file);
-            if (this.validateFile(file) && !this.files.has(key)) {
-                const element = this.addFileToUI(file);
-                this.files.set(key, { file, element });
-            }
-        });
-        this.updateUploadButton();
-    }
-
-    private validateFile(file: File): boolean {
-        if (this.maxFileSize && file.size > this.maxFileSize) {
-            this.container.dispatchEvent(new CustomEvent<FileValidationErrorDetail>('file-validation-error', {
-                detail: { file, reason: 'size' },
-                bubbles: true,
-            }));
-            return false;
-        }
-
-        if (this.allowedTypes && !this.allowedTypes.includes(file.type)) {
-            this.container.dispatchEvent(new CustomEvent<FileValidationErrorDetail>('file-validation-error', {
-                detail: { file, reason: 'type' },
-                bubbles: true,
-            }));
-            return false;
-        }
-
-        return true;
-    }
-
-    private addFileToUI(file: File): HTMLDivElement {
-        const key = this.fileKey(file);
-        const item = document.createElement('div');
-        item.className = 'file-item';
-
-        const escapedFileName = escapeHtml(file.name);
-
-        item.innerHTML = `
-      <div class="file-item-header">
-        <div class="file-info">
-          <div class="file-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
-              <polyline points="13 2 13 9 20 9"></polyline>
-            </svg>
-          </div>
-          <div class="file-details">
-            <span class="file-name" title="${escapedFileName}">${escapedFileName}</span>
-            <span class="file-size">${this.formatSize(file.size)}</span>
-          </div>
-        </div>
-        <button class="remove-btn" type="button" aria-label="Remove file">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-      </div>
-      <div class="progress-container">
-        <div class="progress-bar"></div>
-      </div>
-      <div class="status-text">Waiting...</div>
-    `;
-
-        const removeBtn = item.querySelector<HTMLButtonElement>('.remove-btn');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this.removeFile(key);
-            });
-        }
-
-        this.fileList.appendChild(item);
-        return item;
-    }
-
-    private uploadFile(file: File, element: HTMLDivElement): Promise<unknown> {
-        return new Promise((resolve, reject) => {
-            const progressContainer = element.querySelector<HTMLElement>('.progress-container');
-            const progressBar = element.querySelector<HTMLElement>('.progress-bar');
-            const statusText = element.querySelector<HTMLElement>('.status-text');
-            const removeBtn = element.querySelector<HTMLElement>('.remove-btn');
-
-            if (!progressContainer || !progressBar || !statusText || !removeBtn) {
-                reject(new Error('Required UI elements not found'));
-                return;
-            }
-
-            progressContainer.style.display = 'block';
-            statusText.style.display = 'block';
-            statusText.textContent = '0%';
-            removeBtn.style.display = 'none';
-
-            const xhr = new XMLHttpRequest();
-            const key = this.fileKey(file);
-            this.abortControllers.set(key, () => xhr.abort());
-
-            xhr.upload.addEventListener('progress', (e) => {
-                if (e.lengthComputable) {
-                    const pct = Math.round((e.loaded / e.total) * 100);
-                    progressBar.style.width = pct + '%';
-                    statusText.textContent = pct + '%';
-                }
-            });
-
-            xhr.addEventListener('load', () => {
-                this.abortControllers.delete(key);
-                if (xhr.status >= 200 && xhr.status < 300) {
-                    progressBar.style.width = '100%';
-                    progressBar.style.backgroundColor = 'var(--success)';
-                    statusText.textContent = 'Completed';
-                    statusText.classList.add('success');
-                    try {
-                        resolve(JSON.parse(xhr.responseText));
-                    } catch {
-                        resolve(xhr.responseText);
-                    }
-                } else {
-                    progressBar.style.backgroundColor = 'var(--error)';
-                    statusText.textContent = 'Failed';
-                    statusText.classList.add('error');
-                    removeBtn.style.display = 'flex';
-                    reject(new Error(`Upload failed: ${xhr.statusText}`));
-                }
-            });
-
-            xhr.addEventListener('error', () => {
-                this.abortControllers.delete(key);
-                progressBar.style.backgroundColor = 'var(--error)';
-                statusText.textContent = 'Network Error';
-                statusText.classList.add('error');
-                removeBtn.style.display = 'flex';
-                reject(new Error('Network error'));
-            });
-
-            xhr.addEventListener('abort', () => {
-                this.abortControllers.delete(key);
-                statusText.textContent = 'Cancelled';
-                statusText.classList.add('error');
-                removeBtn.style.display = 'flex';
-                reject(new Error('Upload aborted'));
-            });
-
-            const formData = new FormData();
-            formData.append('file', file);
-            xhr.open('POST', this.uploadUrl);
-            xhr.send(formData);
-        });
-    }
-
-    private removeFile(key: string): void {
-        const abort = this.abortControllers.get(key);
-        if (abort) abort();
-
-        const fileData = this.files.get(key);
-        if (fileData) {
-            fileData.element.remove();
-            this.files.delete(key);
-            this.updateUploadButton();
-        }
-    }
-
-    private updateUploadButton(): void {
-        this.uploadBtn.disabled = this.files.size === 0;
-        this.uploadBtn.textContent = this.files.size > 0
-            ? `Upload ${this.files.size} File${this.files.size === 1 ? '' : 's'}`
-            : 'Upload Files';
-    }
-
-    private dispatchUploadCompletedEvent(results: PromiseSettledResult<unknown>[]): void {
-        const files = Array.from(this.files.values()).map(({ file }) => file);
-        this.container.dispatchEvent(new CustomEvent<UploadCompletedDetail>('upload-completed', {
-            detail: { fileCount: this.files.size, files, results },
-            bubbles: true,
-        }));
-    }
-
-    private formatSize(bytes: number): string {
-        if (bytes === 0) return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'] as const;
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-    }
-
-    public destroy(): void {
-        this.abortControllers.forEach(abort => abort());
-        this.abortControllers.clear();
-
-        (['dragenter', 'dragover', 'dragleave', 'drop'] as const).forEach(event => {
-            this.dropZone.removeEventListener(event, this.preventDefaults);
-        });
-        (['dragenter', 'dragover'] as const).forEach(event => {
-            this.dropZone.removeEventListener(event, this.handleDragEnter);
-        });
-        (['dragleave', 'drop'] as const).forEach(event => {
-            this.dropZone.removeEventListener(event, this.handleDragLeave);
-        });
-        this.dropZone.removeEventListener('drop', this.handleDrop);
-        this.dropZone.removeEventListener('click', this.handleDropZoneClick);
-        this.fileInput.removeEventListener('change', this.handleFileInputChange);
-        this.uploadBtn.removeEventListener('click', this.handleUploadClick);
-
-        this.files.clear();
-        this.fileList.innerHTML = '';
-    }
-}
-
-export { FileUploader };
-export type { FileUploaderConfig, UploadCompletedDetail, FileValidationErrorDetail };

package/js/flyout-menu.ts

@@ -1,255 +0,0 @@
-interface FlyoutMenuOptions {
-    triggerSelector?: string;
-    menuSelector?: string;
-    overlaySelector?: string;
-    closeSelector?: string;
-    submenuToggleSelector?: string;
-    linkSelector?: string;
-    direction?: 'right' | 'left';
-    title?: string;
-    footerText?: string;
-    enableHeader?: boolean;
-    enableFooter?: boolean;
-}
-
-class FlyoutMenu {
-    private options: Required<FlyoutMenuOptions>;
-    private menuTrigger: HTMLElement | null;
-    private readonly flyoutMenu: HTMLElement | null;
-    private flyoutOverlay: HTMLElement | null;
-    private closeBtn: HTMLElement | null = null;
-    private submenuToggles: NodeListOf<HTMLElement> | null = null;
-    private menuLinks: NodeListOf<HTMLAnchorElement> | null = null;
-    private submenuHandlers = new Map<HTMLElement, (e: Event) => void>();
-
-    constructor(options: FlyoutMenuOptions = {}) {
-        this.options = {
-            triggerSelector: '.menu-trigger',
-            menuSelector: '#flyoutMenu',
-            overlaySelector: '#flyoutOverlay',
-            closeSelector: '.close-menu',
-            submenuToggleSelector: '.submenu-toggle',
-            linkSelector: '.flyout-links > li > a',
-            direction: 'right',
-            title: 'Menu',
-            footerText: '&copy; 2025 Brand Inc.',
-            enableHeader: true,
-            enableFooter: true,
-            ...options
-        };
-
-        this.menuTrigger = document.querySelector(this.options.triggerSelector);
-        this.flyoutMenu = document.querySelector(this.options.menuSelector);
-        this.flyoutOverlay = document.querySelector(this.options.overlaySelector);
-
-        this.open = this.open.bind(this);
-        this.close = this.close.bind(this);
-        this.handleSubmenu = this.handleSubmenu.bind(this);
-        this.handleKeydown = this.handleKeydown.bind(this);
-
-        this.init();
-    }
-
-    private init(): void {
-        if (!this.flyoutMenu) {
-            throw new Error(`FlyoutMenu: Menu element not found for selector "${this.options.menuSelector}"`);
-        }
-
-        this.hydrateMenu();
-
-        if (this.options.enableHeader) this.renderHeader();
-        if (this.options.enableFooter) this.renderFooter();
-
-        this.closeBtn = document.querySelector(this.options.closeSelector);
-        this.submenuToggles = this.flyoutMenu.querySelectorAll(this.options.submenuToggleSelector);
-        this.menuLinks = this.flyoutMenu.querySelectorAll('a');
-
-        this.setDirection(this.options.direction);
-
-        this.bindEvents();
-    }
-
-    private hydrateMenu(): void {
-        if (!this.flyoutMenu) return;
-
-        const rootUl = this.flyoutMenu.querySelector('ul');
-        if (rootUl) {
-            rootUl.classList.add('flyout-links');
-            this.processListItems(rootUl);
-        }
-    }
-
-    private processListItems(ul: HTMLUListElement): void {
-        const items = Array.from(ul.children) as HTMLLIElement[];
-        items.forEach((li, index) => {
-            // Check if it has a nested UL
-            const nestedUl = li.querySelector('ul') as HTMLUListElement | null;
-            if (nestedUl) {
-                li.classList.add('has-submenu');
-                nestedUl.classList.add('submenu');
-
-                // Get text content (excluding nested UL text)
-                const textNode = Array.from(li.childNodes).find(
-                    node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ''
-                ) as Text | undefined;
-                const text = textNode?.textContent?.trim() || 'Menu Item';
-                textNode?.remove();
-
-                // Create Toggle Button
-                const button = document.createElement('button');
-                button.className = 'submenu-toggle';
-                button.style.setProperty('--delay', `${(index + 1) * 0.1}s`);
-                button.innerHTML = `
-                    ${text}
-                    <svg class="chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                `;
-
-                li.insertBefore(button, nestedUl);
-
-                // Recursively process nested UL
-                this.processListItems(nestedUl);
-            } else {
-                // Leaf node - ensure it has a link
-                const link = li.querySelector('a');
-                if (link) {
-                    link.style.setProperty('--delay', `${(index + 1) * 0.1}s`);
-                }
-            }
-        });
-    }
-
-    private renderHeader(): void {
-        if (!this.flyoutMenu) return;
-
-        const header = document.createElement('div');
-        header.className = 'flyout-header';
-        header.innerHTML = `
-            <span class="flyout-title">${this.options.title}</span>
-            <button class="close-menu" aria-label="Close Menu">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                    stroke-linecap="round" stroke-linejoin="round">
-                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
-            </button>
-        `;
-        this.flyoutMenu.prepend(header);
-    }
-
-    private renderFooter(): void {
-        if (!this.flyoutMenu) return;
-
-        const footer = document.createElement('div');
-        footer.className = 'flyout-footer';
-        footer.style.setProperty('--delay', '0.6s');
-        footer.innerHTML = `<p>${this.options.footerText}</p>`;
-        this.flyoutMenu.append(footer);
-    }
-
-    private bindEvents(): void {
-        // Open
-        this.menuTrigger?.addEventListener('click', this.open);
-
-        // Close
-        this.closeBtn?.addEventListener('click', this.close);
-        this.flyoutOverlay?.addEventListener('click', this.close);
-
-        // Submenus
-        this.submenuToggles?.forEach(toggle => {
-            const handler = (e: Event) => this.handleSubmenu(e, toggle);
-            this.submenuHandlers.set(toggle, handler);
-            toggle.addEventListener('click', handler);
-        });
-
-        // Close on Link Click
-        this.menuLinks?.forEach(link => {
-            link.addEventListener('click', this.close);
-        });
-
-        // Keyboard navigation
-        document.addEventListener('keydown', this.handleKeydown);
-    }
-
-    private open(): void {
-        this.flyoutMenu?.classList.add('is-open');
-        this.flyoutOverlay?.classList.add('is-visible');
-        document.body.style.overflow = 'hidden';
-        this.menuTrigger?.setAttribute('aria-expanded', 'true');
-    }
-
-    private close(): void {
-        this.flyoutMenu?.classList.remove('is-open');
-        this.flyoutOverlay?.classList.remove('is-visible');
-        document.body.style.overflow = '';
-        this.menuTrigger?.setAttribute('aria-expanded', 'false');
-    }
-
-    private handleSubmenu(e: Event, toggle: HTMLElement): void {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const submenu = toggle.nextElementSibling as HTMLElement | null;
-        const parentLi = toggle.parentElement as HTMLLIElement | null;
-        const parentUl = parentLi?.parentElement as HTMLUListElement | null;
-
-        if (!parentUl || !parentLi) return;
-
-        // Close other submenus at the same level
-        const siblings = Array.from(parentUl.children) as HTMLLIElement[];
-        siblings.forEach(sibling => {
-            if (sibling !== parentLi) {
-                const siblingSubmenu = sibling.querySelector('.submenu');
-                const siblingToggle = sibling.querySelector('.submenu-toggle');
-                if (siblingSubmenu?.classList.contains('is-open')) {
-                    siblingSubmenu.classList.remove('is-open');
-                    siblingToggle?.classList.remove('active');
-                }
-            }
-        });
-
-        toggle.classList.toggle('active');
-        submenu?.classList.toggle('is-open');
-    }
-
-    private handleKeydown(e: KeyboardEvent): void {
-        if (e.key === 'Escape' && this.flyoutMenu?.classList.contains('is-open')) {
-            this.close();
-        }
-    }
-
-    public setDirection(direction: 'left' | 'right'): void {
-        if (!this.flyoutMenu) return;
-
-        const validDirections: Array<'left' | 'right'> = ['left', 'right'];
-        if (!validDirections.includes(direction)) return;
-
-        this.flyoutMenu.classList.remove('flyout-from-right', 'flyout-from-left');
-        this.flyoutMenu.classList.add(`flyout-from-${direction}`);
-
-        this.options.direction = direction;
-    }
-
-    public destroy(): void {
-        this.menuTrigger?.removeEventListener('click', this.open);
-        this.closeBtn?.removeEventListener('click', this.close);
-        this.flyoutOverlay?.removeEventListener('click', this.close);
-
-        this.submenuToggles?.forEach(toggle => {
-            const handler = this.submenuHandlers.get(toggle);
-            if (handler) toggle.removeEventListener('click', handler);
-        });
-        this.submenuHandlers.clear();
-
-        this.menuLinks?.forEach(link => {
-            link.removeEventListener('click', this.close);
-        });
-
-        document.removeEventListener('keydown', this.handleKeydown);
-
-        document.body.style.overflow = '';
-    }
-}
-
-export { FlyoutMenu, type FlyoutMenuOptions };