@dodlhuat/basix 1.0.0

package/js/flyout-menu.ts

@@ -0,0 +1,250 @@
+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;
+
+    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 => {
+            toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle));
+        });
+
+        // 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 => {
+            toggle.removeEventListener('click', (e) => this.handleSubmenu(e, toggle));
+        });
+
+        this.menuLinks?.forEach(link => {
+            link.removeEventListener('click', this.close);
+        });
+
+        document.removeEventListener('keydown', this.handleKeydown);
+
+        document.body.style.overflow = '';
+    }
+}
+
+export { FlyoutMenu, type FlyoutMenuOptions };

package/js/form-builder.js

@@ -0,0 +1,107 @@
+let dragged_element = null;
+let action = 'copy';
+let row_count = 1;
+
+let formbuilder = {
+    init() {
+        document.querySelectorAll('.draggable').forEach(function (element) {
+            element.removeEventListener("dragstart", dragAction);
+            element.addEventListener("dragstart", dragAction);
+        });
+        initDropzones();
+    },
+    addRow() {
+        document.querySelector('.form-content').innerHTML += buildRowElement();
+    },
+    addColumn() {
+
+    },
+    removeRow() {
+
+    },
+    removeColumn() {
+
+    },
+    load(file_name) {
+        load(file_name).then((data) => {
+            console.log(data);
+        });
+    }
+}
+
+const moveAction = function (event) {
+    dragged_element = event.target;
+    action = 'move';
+}
+const dragAction = function (event) {
+    dragged_element = event.target;
+    action = 'copy';
+}
+const addMoveListeners = function () {
+    document.querySelectorAll('.movable').forEach(function (element) {
+        element.removeEventListener("dragstart", moveAction);
+        element.addEventListener("dragstart", moveAction);
+    });
+}
+
+const load = async function (file_name) {
+    const url = new URL(file_name,
+        document.currentScript && document.currentScript.src || location.href)
+    // fetch and parse template as string
+    let template = await fetch(url)
+    template = await template.text()
+    template = new DOMParser().parseFromString(template, 'text/html')
+        .querySelector('template')
+    if (!template) throw new TypeError('No template element found')
+    return template.innerHTML.trim()
+}
+
+const buildRowElement = function () {
+    const row = document.createElement('div');
+    row_count++;
+    row.setAttribute('data-row-id', String(row_count));
+    row.className = 'row';
+    const col = document.createElement('div');
+    col.className = 'column';
+    const dropzone = document.createElement('div');
+    dropzone.className = 'dropzone';
+    col.innerHTML = dropzone.outerHTML;
+    row.innerHTML = col.outerHTML;
+    return row.outerHTML;
+}
+
+const dropEvent = function (event) {
+    event.preventDefault();
+    let node = dragged_element;
+    if (action === 'copy') {
+        node = dragged_element.cloneNode(true);
+    }
+    node.classList.remove('draggable');
+    node.classList.add('movable');
+    const label = node.querySelector('span.label');
+    if (label) {
+        label.setAttribute('contenteditable', true);
+    }
+    const pElement = node.querySelector('p');
+    if (pElement) {
+        pElement.setAttribute('contenteditable', true);
+    }
+    event.target.appendChild(node);
+    addMoveListeners();
+}
+
+const dragOverEvent = function (event) {
+    event.preventDefault();
+    event.dataTransfer.effectAllowed = action;
+}
+
+const initDropzones = function () {
+    document.querySelectorAll('.dropzone').forEach(function (dropzone) {
+        dropzone.removeEventListener('drop', dropEvent);
+        dropzone.addEventListener('drop', dropEvent);
+        dropzone.removeEventListener('dragover', dragOverEvent);
+        dropzone.addEventListener('dragover', dragOverEvent);
+    });
+}
+
+export {formbuilder}

package/js/gallery.js

@@ -0,0 +1,177 @@
+class MasonryGallery {
+    constructor(containerId, options = {}) {
+        this.columns = [];
+        this.isFetching = false;
+        this.resizeObserver = null;
+        this.abortController = null;
+        this.reloaded = 0;
+        this.handleScroll = () => {
+            if (this.isFetching)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
+            if (scrollTop + clientHeight >=
+                scrollHeight - this.options.scrollThreshold) {
+                this.loadMoreImages();
+            }
+        };
+        const container = document.getElementById(containerId);
+        if (!container) {
+            throw new Error(`Container with id "${containerId}" not found`);
+        }
+        this.container = container;
+        this.loader = document.querySelector(options.loaderSelector || ".loader");
+        this.options = {
+            minColumnWidth: options.minColumnWidth ?? 250,
+            scrollThreshold: options.scrollThreshold ?? 100,
+            reload: 2,
+            fetchFunction: options.fetchFunction ?? this.fetchMockImages(),
+        };
+        this.init();
+    }
+    init() {
+        this.setupLayout();
+        this.loadMoreImages();
+        this.addEventListeners();
+    }
+    setupLayout() {
+        const containerWidth = this.container.getBoundingClientRect().width;
+        const numColumns = Math.max(1, Math.floor(containerWidth / this.options.minColumnWidth));
+        if (this.columns.length !== numColumns) {
+            this.container.innerHTML = "";
+            this.columns = [];
+            for (let i = 0; i < numColumns; i++) {
+                const col = document.createElement("div");
+                col.className = "masonry-column";
+                this.container.appendChild(col);
+                this.columns.push(col);
+            }
+        }
+    }
+    addEventListeners() {
+        let resizeTimeout;
+        window.addEventListener("resize", () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                this.reLayout();
+            }, 200);
+        });
+        this.abortController = new AbortController();
+        window.addEventListener("scroll", this.handleScroll, {
+            passive: true,
+            signal: this.abortController.signal,
+        });
+    }
+    reLayout() {
+        const items = [];
+        this.columns.forEach((col) => {
+            Array.from(col.children).forEach((child) => {
+                items.push(child);
+            });
+            col.innerHTML = "";
+        });
+        const availableWidth = Math.min(1200, window.innerWidth - 40);
+        const numColumns = Math.max(1, Math.floor(availableWidth / this.options.minColumnWidth));
+        if (this.columns.length !== numColumns) {
+            this.container.innerHTML = "";
+            this.columns = [];
+            for (let i = 0; i < numColumns; i++) {
+                const col = document.createElement("div");
+                col.className = "masonry-column";
+                this.container.appendChild(col);
+                this.columns.push(col);
+            }
+        }
+        items.forEach((item) => {
+            this.addToShortestColumn(item);
+        });
+    }
+    async loadMoreImages() {
+        this.reloaded++;
+        if (this.options.reload > 0 && this.reloaded > this.options.reload) {
+            console.warn("Maximum reload limit reached.");
+            return;
+        }
+        if (this.isFetching)
+            return;
+        this.isFetching = true;
+        this.toggleLoader(true);
+        try {
+            const newImages = await this.options.fetchFunction;
+            this.renderImages(newImages);
+        }
+        catch (error) {
+            throw new Error("Error loading images: " + error);
+        }
+        finally {
+            this.isFetching = false;
+            this.toggleLoader(false);
+        }
+    }
+    toggleLoader(show) {
+        if (this.loader) {
+            this.loader.classList.toggle("hidden", !show);
+        }
+    }
+    fetchMockImages() {
+        throw Error("Method not implemented.");
+    }
+    renderImages(imageDataList) {
+        imageDataList.forEach((data) => {
+            const item = this.createCard(data);
+            this.addToShortestColumn(item);
+            requestAnimationFrame(() => {
+                const img = item.querySelector("img");
+                if (img) {
+                    img.addEventListener("load", () => img.classList.add("loaded"), {
+                        once: true,
+                    });
+                    if (img.complete) {
+                        img.classList.add("loaded");
+                    }
+                }
+            });
+        });
+    }
+    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>
+    `;
+        return div;
+    }
+    escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    addToShortestColumn(element) {
+        if (this.columns.length === 0)
+            return;
+        let shortestCol = this.columns[0];
+        let minHeight = shortestCol.offsetHeight;
+        for (let i = 1; i < this.columns.length; i++) {
+            const h = this.columns[i].offsetHeight;
+            if (h < minHeight) {
+                minHeight = h;
+                shortestCol = this.columns[i];
+            }
+        }
+        shortestCol.appendChild(element);
+    }
+    destroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.abortController) {
+            this.abortController.abort();
+            this.abortController = null;
+        }
+    }
+}
+export { MasonryGallery };