@dodlhuat/basix 1.1.0 → 1.2.0

package/js/bottom-sheet.ts

@@ -0,0 +1,222 @@
+interface BottomSheetOptions {
+    content: string;
+    header?: string;
+    footer?: string;
+    closeable?: boolean;
+    snapHeight?: 'auto' | 'half' | 'full';
+    onClose?: () => void;
+}
+
+class BottomSheet {
+    private readonly content: string;
+    private readonly header?: string;
+    private readonly footer?: string;
+    private readonly closeable: boolean;
+    private snapHeight: 'auto' | 'half' | 'full';
+    private readonly onClose?: () => void;
+
+    private wrapper: HTMLElement | null = null;
+    private sheet: HTMLElement | null = null;
+    private handle: HTMLElement | null = null;
+    private body: HTMLElement | null = null;
+
+    // Touch drag state
+    private dragStartY = 0;
+    private currentDragY = 0;
+    private isDragging = false;
+
+    constructor(options: BottomSheetOptions) {
+        this.content = options.content;
+        this.header = options.header;
+        this.footer = options.footer;
+        this.closeable = options.closeable ?? true;
+        this.snapHeight = options.snapHeight ?? 'auto';
+        this.onClose = options.onClose;
+
+        this.hide = this.hide.bind(this);
+        this.handleEscape = this.handleEscape.bind(this);
+        this.handleBackdropClick = this.handleBackdropClick.bind(this);
+        this.handleTouchStart = this.handleTouchStart.bind(this);
+        this.handleTouchMove = this.handleTouchMove.bind(this);
+        this.handleTouchEnd = this.handleTouchEnd.bind(this);
+    }
+
+    public show(): void {
+        this.hide();
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'bottom-sheet-wrapper';
+        wrapper.innerHTML = this.buildTemplate();
+        document.body.append(wrapper);
+
+        this.wrapper = wrapper;
+        this.sheet = wrapper.querySelector('.bottom-sheet');
+        this.handle = wrapper.querySelector('.bottom-sheet-handle');
+        this.body = wrapper.querySelector('.bottom-sheet-body');
+
+        if (this.closeable) {
+            const backdrop = wrapper.querySelector('.bottom-sheet-backdrop');
+            backdrop?.addEventListener('click', this.handleBackdropClick);
+            document.addEventListener('keydown', this.handleEscape);
+
+            const closeBtn = wrapper.querySelector('.close');
+            closeBtn?.addEventListener('click', this.hide);
+        }
+
+        if (this.handle) {
+            this.handle.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+            this.handle.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+            this.handle.addEventListener('touchend', this.handleTouchEnd);
+        }
+
+        if (this.body) {
+            this.updateScrollMask();
+            this.body.addEventListener('scroll', () => this.updateScrollMask());
+        }
+
+        document.body.style.overflow = 'hidden';
+
+        requestAnimationFrame(() => {
+            wrapper.classList.add('is-visible');
+        });
+    }
+
+    public hide(): void {
+        if (!this.wrapper) return;
+
+        const backdrop = this.wrapper.querySelector('.bottom-sheet-backdrop');
+        backdrop?.removeEventListener('click', this.handleBackdropClick);
+        document.removeEventListener('keydown', this.handleEscape);
+
+        if (this.handle) {
+            this.handle.removeEventListener('touchstart', this.handleTouchStart);
+            this.handle.removeEventListener('touchmove', this.handleTouchMove);
+            this.handle.removeEventListener('touchend', this.handleTouchEnd);
+        }
+
+        document.body.style.overflow = '';
+        this.wrapper.classList.remove('is-visible');
+
+        const wrapper = this.wrapper;
+        this.wrapper = null;
+        this.sheet = null;
+        this.handle = null;
+        this.body = null;
+
+        setTimeout(() => {
+            wrapper.remove();
+            this.onClose?.();
+        }, 420);
+    }
+
+    public snapTo(height: 'auto' | 'half' | 'full'): void {
+        if (!this.sheet) return;
+
+        this.sheet.classList.remove(`snap-${this.snapHeight}`);
+        this.snapHeight = height;
+
+        if (height !== 'auto') {
+            this.sheet.classList.add(`snap-${height}`);
+        }
+    }
+
+    private handleEscape(e: KeyboardEvent): void {
+        if (e.key === 'Escape') this.hide();
+    }
+
+    private handleBackdropClick(e: Event): void {
+        if ((e.target as HTMLElement)?.classList.contains('bottom-sheet-backdrop')) {
+            this.hide();
+        }
+    }
+
+    private handleTouchStart(e: TouchEvent): void {
+        this.dragStartY = e.touches[0].clientY;
+        this.currentDragY = 0;
+        this.isDragging = true;
+
+        if (this.sheet) {
+            this.sheet.style.transition = 'none';
+        }
+    }
+
+    private handleTouchMove(e: TouchEvent): void {
+        if (!this.isDragging || !this.sheet) return;
+
+        const deltaY = e.touches[0].clientY - this.dragStartY;
+
+        // Rubber-band resistance going upward
+        if (deltaY < 0) {
+            const resistance = Math.log(1 + Math.abs(deltaY)) * 4;
+            this.currentDragY = -resistance;
+        } else {
+            this.currentDragY = deltaY;
+        }
+
+        const isDesktop = window.innerWidth >= 768;
+        const translateX = isDesktop ? '-50%' : '0';
+        this.sheet.style.transform = `translateX(${translateX}) translateY(${this.currentDragY}px)`;
+        e.preventDefault();
+    }
+
+    private handleTouchEnd(): void {
+        if (!this.isDragging || !this.sheet) return;
+        this.isDragging = false;
+
+        const threshold = this.sheet.offsetHeight * 0.3;
+
+        if (this.currentDragY > threshold) {
+            this.hide();
+        } else {
+            // Spring back
+            this.sheet.style.transition = '';
+            this.sheet.style.transform = '';
+        }
+    }
+
+    private updateScrollMask(): void {
+        if (!this.body) return;
+        const canScroll = this.body.scrollHeight > this.body.clientHeight;
+        const atBottom = this.body.scrollTop + this.body.clientHeight >= this.body.scrollHeight - 4;
+        this.body.classList.toggle('is-scrollable', canScroll && !atBottom);
+    }
+
+    private buildTemplate(): string {
+        const snapClass = this.snapHeight !== 'auto' ? ` snap-${this.snapHeight}` : '';
+
+        const closeButton = this.closeable
+            ? `<div class="icon icon-close close"></div>`
+            : '';
+
+        const headerHtml = this.header !== undefined
+            ? `<div class="bottom-sheet-header has-divider">
+                <span class="title">${this.header}</span>
+                ${closeButton}
+               </div>`
+            : '';
+
+        const footerHtml = this.footer !== undefined
+            ? `<div class="bottom-sheet-footer">${this.footer}</div>`
+            : '';
+
+        return `
+            <div class="bottom-sheet${snapClass}">
+                <div class="bottom-sheet-handle" role="button" aria-label="Drag to dismiss"></div>
+                ${headerHtml}
+                <div class="bottom-sheet-body">${this.content}</div>
+                ${footerHtml}
+            </div>
+            <div class="bottom-sheet-backdrop"></div>
+        `;
+    }
+
+    public isVisible(): boolean {
+        return this.wrapper !== null && document.body.contains(this.wrapper);
+    }
+
+    public destroy(): void {
+        this.hide();
+    }
+}
+
+export { BottomSheet, type BottomSheetOptions };

package/js/carousel.js

@@ -59,6 +59,7 @@ class Carousel {
             this.dots.push(dot);
         });
         this.root.appendChild(this.dotsNav);
+        // Make focusable for keyboard nav
         this.root.setAttribute('tabindex', '0');
     }
     bindEvents() {
@@ -66,7 +67,8 @@ class Carousel {
         this.prevButton.addEventListener('click', () => this.moveToPrevSlide());
         this.dotsNav.addEventListener('click', (e) => {
             const targetDot = e.target.closest('button');
-            if (!targetDot) return;
+            if (!targetDot)
+                return;
             const targetIndex = this.dots.findIndex(dot => dot === targetDot);
             this.moveToSlide(targetIndex);
         });
@@ -76,25 +78,32 @@ class Carousel {
         });
         // Keyboard navigation
         this.root.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowLeft')  this.moveToPrevSlide();
-            if (e.key === 'ArrowRight') this.moveToNextSlide();
+            if (e.key === 'ArrowLeft')
+                this.moveToPrevSlide();
+            if (e.key === 'ArrowRight')
+                this.moveToNextSlide();
         });
         // Pause autoplay on hover / focus
         if (this.options.autoPlay) {
             this.root.addEventListener('mouseenter', () => this.pauseAutoPlay());
             this.root.addEventListener('mouseleave', () => this.resumeAutoPlay());
-            this.root.addEventListener('focusin',    () => this.pauseAutoPlay());
-            this.root.addEventListener('focusout',   () => this.resumeAutoPlay());
+            this.root.addEventListener('focusin', () => this.pauseAutoPlay());
+            this.root.addEventListener('focusout', () => this.resumeAutoPlay());
         }
         this.addTouchSupport();
     }
     moveToSlide(targetIndex, animate = true) {
         if (targetIndex < 0) {
-            if (this.options.loop) targetIndex = this.slides.length - 1;
-            else targetIndex = 0;
-        } else if (targetIndex >= this.slides.length) {
-            if (this.options.loop) targetIndex = 0;
-            else targetIndex = this.slides.length - 1;
+            if (this.options.loop)
+                targetIndex = this.slides.length - 1;
+            else
+                targetIndex = 0;
+        }
+        else if (targetIndex >= this.slides.length) {
+            if (this.options.loop)
+                targetIndex = 0;
+            else
+                targetIndex = this.slides.length - 1;
         }
         if (!animate) {
             this.track.style.transitionDuration = '0ms';
@@ -102,6 +111,7 @@ class Carousel {
         const amountToMove = -1 * (this.slideWidth * targetIndex);
         this.track.style.transform = `translateX(${amountToMove}px)`;
         if (!animate) {
+            // Restore CSS transition after the paint to avoid a flash
             requestAnimationFrame(() => {
                 this.track.style.transitionDuration = '';
             });
@@ -127,12 +137,15 @@ class Carousel {
             isDragging = true;
         }, { passive: true });
         this.track.addEventListener('touchend', (e) => {
-            if (!isDragging) return;
+            if (!isDragging)
+                return;
             const endX = e.changedTouches[0].clientX;
             const diffX = startX - endX;
             if (Math.abs(diffX) > 50) {
-                if (diffX > 0) this.moveToNextSlide();
-                else this.moveToPrevSlide();
+                if (diffX > 0)
+                    this.moveToNextSlide();
+                else
+                    this.moveToPrevSlide();
             }
             isDragging = false;
         });

package/js/context-menu.js

@@ -0,0 +1,212 @@
+class ContextMenu {
+    constructor(selectorOrElement, items) {
+        this.menuEl = null;
+        this.currentTarget = null;
+        this.abortController = new AbortController();
+        this.items = items;
+        if (typeof selectorOrElement === 'string') {
+            this.targets = Array.from(document.querySelectorAll(selectorOrElement));
+        }
+        else if (Array.isArray(selectorOrElement)) {
+            this.targets = selectorOrElement;
+        }
+        else {
+            this.targets = [selectorOrElement];
+        }
+        this.init();
+    }
+    init() {
+        const { signal } = this.abortController;
+        this.targets.forEach((target) => {
+            target.addEventListener('contextmenu', (e) => {
+                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) => {
+            if (this.menuEl && !this.menuEl.contains(e.target)) {
+                this.close();
+            }
+        }, { signal, capture: true });
+        document.addEventListener('keydown', (e) => {
+            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) => {
+            if (!this.menuEl?.contains(e.target))
+                this.close();
+        }, { signal, capture: true });
+        window.addEventListener('resize', () => this.close(), { signal });
+    }
+    open(x, y) {
+        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'));
+    }
+    close() {
+        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);
+    }
+    buildMenu(items) {
+        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;
+    }
+    buildItem(def) {
+        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 = () => {
+                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 = null;
+            const openSub = () => {
+                if (closeTimer) {
+                    clearTimeout(closeTimer);
+                    closeTimer = null;
+                }
+                this.closeAllSubmenus(li.closest('.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) => {
+                e.stopPropagation();
+                def.action?.(this.currentTarget);
+                this.close();
+            });
+        }
+        return li;
+    }
+    closeAllSubmenus(menu) {
+        // Only close direct-child submenus of this menu level
+        Array.from(menu.children).forEach((child) => {
+            child.classList.remove('is-active');
+        });
+    }
+    getFocusableItems() {
+        if (!this.menuEl)
+            return [];
+        return Array.from(this.menuEl.children).filter((el) => el.classList.contains('context-menu-item') &&
+            !el.classList.contains('is-disabled'));
+    }
+    moveFocus(direction) {
+        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');
+    }
+    activateFocused() {
+        this.menuEl
+            ?.querySelector('.context-menu-item.is-focused')
+            ?.click();
+    }
+    destroy() {
+        this.close();
+        this.abortController.abort();
+    }
+}
+export { ContextMenu };