@dodlhuat/basix 1.0.0

package/js/lazy-loader.js

@@ -0,0 +1,121 @@
+/**
+ * LazyLoader - A class to lazy load content into elements when they scroll into view.
+ *
+ * how to use:
+ * const lazyLoader = new LazyLoader({
+ *                 selector: '.lazy-section',
+ *                 rootMargin: '0px 0px 100px 0px', // Load 100px before element is visible
+ *                 threshold: 0.1,
+ *                 simulatedDelay: 2000, // 2 second delay to see the spinner
+ *                 onLoad: (el) => console.log('Loaded content for', el),
+ *                 onError: (err, el) => console.error('Failed to load', el)
+ *             });
+ *
+ *  in html:
+ *  <div class="lazy-section" data-src="content/reviews.html"></div>
+ */
+class LazyLoader {
+    /**
+     * @param {Object} options - Configuration options
+     * @param {string} options.selector - CSS selector for elements to observe (default: '.lazy-load')
+     * @param {string} options.attribute - Attribute containing the URL to load (default: 'data-src')
+     * @param {string} options.rootMargin - IntersectionObserver rootMargin (default: '0px 0px 200px 0px')
+     * @param {number} options.threshold - IntersectionObserver threshold (default: 0.1)
+     * @param {Function} options.onError - Callback function when loading fails
+     * @param {Function} options.onLoad - Callback function when loading succeeds
+     */
+    constructor(options = {}) {
+        this.selector = options.selector || '.lazy-load';
+        this.attribute = options.attribute || 'data-src';
+        this.rootMargin = options.rootMargin || '0px 0px 200px 0px';
+        this.threshold = options.threshold || 0.1;
+        this.onError = options.onError || null;
+        this.onLoad = options.onLoad || null;
+        this.simulatedDelay = options.simulatedDelay || 0; // Delay in ms for testing
+        this.init();
+    }
+
+    init() {
+        this.elements = document.querySelectorAll(this.selector);
+
+        if ('IntersectionObserver' in window) {
+            this.setupIntersectionObserver();
+        } else {
+            this.setupScrollListener();
+        }
+    }
+
+    setupIntersectionObserver() {
+        const observerOptions = {
+            root: null,
+            rootMargin: this.rootMargin,
+            threshold: this.threshold
+        };
+
+        const observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.loadContent(entry.target);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, observerOptions);
+
+        this.elements.forEach(el => observer.observe(el));
+    }
+
+    setupScrollListener() {
+        // Fallback for older browsers
+        const checkVisible = () => {
+            this.elements.forEach(el => {
+                if (el.getAttribute(this.attribute)) {
+                    const rect = el.getBoundingClientRect();
+                    const windowHeight = window.innerHeight;
+                    // Check if element is close to viewport (using approx 200px buffer like rootMargin)
+                    if (rect.top <= windowHeight + 200) {
+                        this.loadContent(el);
+                    }
+                }
+            });
+        };
+
+        window.addEventListener('scroll', checkVisible);
+        window.addEventListener('resize', checkVisible);
+        // Initial check
+        checkVisible();
+    }
+
+    async loadContent(element) {
+        const url = element.getAttribute(this.attribute);
+        if (!url) return;
+
+        // Remove attribute so we don't try to load again if using scroll fallback
+        element.removeAttribute(this.attribute);
+        element.classList.add('loading');
+
+        try {
+            // Simulate network delay if configured
+            if (this.simulatedDelay > 0) {
+                await new Promise(resolve => setTimeout(resolve, this.simulatedDelay));
+            }
+
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const html = await response.text();
+
+            element.innerHTML = html;
+            element.classList.remove('loading');
+            element.classList.add('loaded'); // Animation hook
+
+            if (this.onLoad) this.onLoad(element);
+
+        } catch (error) {
+            console.error('LazyLoad Error:', error);
+            element.classList.remove('loading');
+            element.classList.add('error');
+            element.innerHTML = '<div class="error-msg">Failed to load content.</div>';
+
+            if (this.onError) this.onError(error, element);
+        }
+    }
+}

package/js/modal.js

@@ -0,0 +1,113 @@
+const CLOSE_ICON = '<div class="icon icon-close close"></div>';
+class Modal {
+    constructor(contentOrOptions, header, footer, closeable = true, type = 'default') {
+        this.modalWrapper = null;
+        if (typeof contentOrOptions === 'object') {
+            this.content = contentOrOptions.content;
+            this.header = contentOrOptions.header;
+            this.footer = contentOrOptions.footer;
+            this.closeable = contentOrOptions.closeable ?? true;
+            this.type = contentOrOptions.type ?? 'default';
+        }
+        else {
+            this.content = contentOrOptions;
+            this.header = header;
+            this.footer = footer;
+            this.closeable = closeable;
+            this.type = type;
+        }
+        this.template = this.buildTemplate();
+        this.hide = this.hide.bind(this);
+        this.handleEscape = this.handleEscape.bind(this);
+        this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
+    }
+    show() {
+        this.hide();
+        const wrapper = document.createElement('div');
+        wrapper.className = 'modal-wrapper';
+        wrapper.innerHTML = this.template;
+        document.body.append(wrapper);
+        this.modalWrapper = wrapper;
+        if (this.closeable) {
+            const closeBtn = wrapper.querySelector('.close');
+            closeBtn?.addEventListener('click', this.hide);
+        }
+        const background = wrapper.querySelector('.modal-background');
+        if (this.closeable && background) {
+            background.addEventListener('click', this.handleBackgroundClick);
+        }
+        if (this.closeable) {
+            document.addEventListener('keydown', this.handleEscape);
+        }
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            wrapper.classList.add('is-visible');
+        });
+    }
+    hide() {
+        const wrapper = document.querySelector('.modal-wrapper');
+        if (!wrapper)
+            return;
+        // Remove event listeners
+        const closeBtn = wrapper.querySelector('.close');
+        closeBtn?.removeEventListener('click', this.hide);
+        const background = wrapper.querySelector('.modal-background');
+        background?.removeEventListener('click', this.handleBackgroundClick);
+        document.removeEventListener('keydown', this.handleEscape);
+        document.body.style.overflow = '';
+        wrapper.classList.remove('is-visible');
+        setTimeout(() => {
+            wrapper.remove();
+            this.modalWrapper = null;
+        }, 300);
+    }
+    handleEscape(e) {
+        if (e.key === 'Escape') {
+            this.hide();
+        }
+    }
+    handleBackgroundClick(e) {
+        if (e.target?.classList.contains('modal-background')) {
+            this.hide();
+        }
+    }
+    buildTemplate() {
+        const parts = ['<div class="modal">'];
+        if (this.closeable) {
+            parts.push(CLOSE_ICON);
+        }
+        if (this.header !== undefined) {
+            const headerClass = `header ${this.type}-bg`;
+            parts.push(`<div class="${headerClass}">${this.header}</div>`);
+        }
+        parts.push(this.content);
+        if (this.footer !== undefined) {
+            parts.push(`<div class="footer">${this.footer}</div>`);
+        }
+        parts.push('</div>');
+        parts.push('<div class="modal-background"></div>');
+        return parts.join('');
+    }
+    updateContent(content) {
+        this.content = content;
+        this.template = this.buildTemplate();
+        if (this.modalWrapper) {
+            const modalElement = this.modalWrapper.querySelector('.modal');
+            if (modalElement) {
+                const tempWrapper = document.createElement('div');
+                tempWrapper.innerHTML = this.template;
+                const newModal = tempWrapper.querySelector('.modal');
+                if (newModal) {
+                    modalElement.innerHTML = newModal.innerHTML;
+                }
+            }
+        }
+    }
+    isVisible() {
+        return this.modalWrapper !== null && document.body.contains(this.modalWrapper);
+    }
+    destroy() {
+        this.hide();
+    }
+}
+export { Modal };

package/js/modal.ts

@@ -0,0 +1,167 @@
+const CLOSE_ICON = '<div class="icon icon-close close"></div>';
+
+type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
+
+interface ModalOptions {
+    content: string;
+    header?: string;
+    footer?: string;
+    closeable?: boolean;
+    type?: ModalType;
+}
+
+class Modal {
+    private content: string;
+    private readonly header?: string;
+    private readonly footer?: string;
+    private readonly closeable: boolean;
+    private readonly type: ModalType;
+    private template: string;
+    private modalWrapper: HTMLElement | null = null;
+
+    constructor(options: ModalOptions);
+    constructor(content: string, header?: string, footer?: string, closeable?: boolean, type?: ModalType);
+    constructor(
+        contentOrOptions: string | ModalOptions,
+        header?: string,
+        footer?: string,
+        closeable: boolean = true,
+        type: ModalType = 'default'
+    ) {
+        if (typeof contentOrOptions === 'object') {
+            this.content = contentOrOptions.content;
+            this.header = contentOrOptions.header;
+            this.footer = contentOrOptions.footer;
+            this.closeable = contentOrOptions.closeable ?? true;
+            this.type = contentOrOptions.type ?? 'default';
+        } else {
+            this.content = contentOrOptions;
+            this.header = header;
+            this.footer = footer;
+            this.closeable = closeable;
+            this.type = type;
+        }
+
+        this.template = this.buildTemplate();
+
+        this.hide = this.hide.bind(this);
+        this.handleEscape = this.handleEscape.bind(this);
+        this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
+    }
+
+    public show(): void {
+        this.hide();
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'modal-wrapper';
+        wrapper.innerHTML = this.template;
+        document.body.append(wrapper);
+
+        this.modalWrapper = wrapper;
+
+        if (this.closeable) {
+            const closeBtn = wrapper.querySelector('.close');
+            closeBtn?.addEventListener('click', this.hide);
+        }
+
+        const background = wrapper.querySelector('.modal-background');
+        if (this.closeable && background) {
+            background.addEventListener('click', this.handleBackgroundClick);
+        }
+
+        if (this.closeable) {
+            document.addEventListener('keydown', this.handleEscape);
+        }
+
+        document.body.style.overflow = 'hidden';
+
+        requestAnimationFrame(() => {
+            wrapper.classList.add('is-visible');
+        });
+    }
+
+    public hide(): void {
+        const wrapper = document.querySelector('.modal-wrapper');
+        if (!wrapper) return;
+
+        // Remove event listeners
+        const closeBtn = wrapper.querySelector('.close');
+        closeBtn?.removeEventListener('click', this.hide);
+
+        const background = wrapper.querySelector('.modal-background');
+        background?.removeEventListener('click', this.handleBackgroundClick);
+
+        document.removeEventListener('keydown', this.handleEscape);
+        document.body.style.overflow = '';
+
+        wrapper.classList.remove('is-visible');
+
+        setTimeout(() => {
+            wrapper.remove();
+            this.modalWrapper = null;
+        }, 300);
+    }
+
+    private handleEscape(e: KeyboardEvent): void {
+        if (e.key === 'Escape') {
+            this.hide();
+        }
+    }
+
+    private handleBackgroundClick(e: Event): void {
+        if ((e.target as HTMLElement)?.classList.contains('modal-background')) {
+            this.hide();
+        }
+    }
+
+    private buildTemplate(): string {
+        const parts: string[] = ['<div class="modal">'];
+
+        if (this.closeable) {
+            parts.push(CLOSE_ICON);
+        }
+
+        if (this.header !== undefined) {
+            const headerClass = `header ${this.type}-bg`;
+            parts.push(`<div class="${headerClass}">${this.header}</div>`);
+        }
+
+        parts.push(this.content);
+
+        if (this.footer !== undefined) {
+            parts.push(`<div class="footer">${this.footer}</div>`);
+        }
+
+        parts.push('</div>');
+        parts.push('<div class="modal-background"></div>');
+
+        return parts.join('');
+    }
+
+    public updateContent(content: string): void {
+        this.content = content;
+        this.template = this.buildTemplate();
+
+        if (this.modalWrapper) {
+            const modalElement = this.modalWrapper.querySelector('.modal');
+            if (modalElement) {
+                const tempWrapper = document.createElement('div');
+                tempWrapper.innerHTML = this.template;
+                const newModal = tempWrapper.querySelector('.modal');
+                if (newModal) {
+                    modalElement.innerHTML = newModal.innerHTML;
+                }
+            }
+        }
+    }
+
+    public isVisible(): boolean {
+        return this.modalWrapper !== null && document.body.contains(this.modalWrapper);
+    }
+
+    public destroy(): void {
+        this.hide();
+    }
+}
+
+export { Modal, type ModalOptions, type ModalType };

package/js/push-menu.js

@@ -0,0 +1,101 @@
+class PushMenu {
+    static init() {
+        if (this.initialized) {
+            console.warn('PushMenu: Already initialized');
+            return;
+        }
+        this.refresh();
+        if (!this.elements.navigation || !this.elements.content) {
+            throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
+        }
+        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
+        this.initialized = true;
+    }
+    static handleNavigationChange() {
+        const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
+        if (!isPushed) {
+            this.elements.content?.addEventListener('click', this.clickNav);
+        }
+        else {
+            this.elements.content?.removeEventListener('click', this.clickNav);
+        }
+        this.pushToggle();
+    }
+    static pushToggle() {
+        if (!this.elements.content || !this.elements.menu) {
+            throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
+        }
+        const isPushed = this.elements.content.classList.contains('pushed');
+        this.toggleClass(this.elements.content, 'pushed', !isPushed);
+        this.toggleClass(this.elements.menu, 'pushed', !isPushed);
+        this.toggleClass(this.elements.header, 'pushed', !isPushed);
+        if (this.elements.controlIcon) {
+            if (isPushed) {
+                this.elements.controlIcon.classList.remove('icon-menu_open');
+                this.elements.controlIcon.classList.add('icon-menu');
+            }
+            else {
+                this.elements.controlIcon.classList.add('icon-menu_open');
+                this.elements.controlIcon.classList.remove('icon-menu');
+            }
+        }
+    }
+    static toggleClass(element, className, add) {
+        if (!element)
+            return;
+        if (add) {
+            element.classList.add(className);
+        }
+        else {
+            element.classList.remove(className);
+        }
+    }
+    static open() {
+        if (!this.elements.content?.classList.contains('pushed')) {
+            this.pushToggle();
+        }
+    }
+    static close() {
+        if (this.elements.content?.classList.contains('pushed')) {
+            this.pushToggle();
+        }
+    }
+    static isOpen() {
+        return this.elements.content?.classList.contains('pushed') ?? false;
+    }
+    static destroy() {
+        if (!this.initialized)
+            return;
+        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
+        this.elements.content?.removeEventListener('click', this.clickNav);
+        this.close();
+        this.elements = {
+            navigation: null,
+            content: null,
+            menu: null,
+            header: null,
+            controlIcon: null
+        };
+        this.initialized = false;
+    }
+    static refresh() {
+        this.elements.navigation = document.querySelector('.navigation');
+        this.elements.content = document.querySelector('.push-content');
+        this.elements.menu = document.querySelector('.push-menu');
+        this.elements.header = document.querySelector('.main-header');
+        this.elements.controlIcon = document.querySelector('.navigation-controls .icon');
+    }
+}
+PushMenu.elements = {
+    navigation: null,
+    content: null,
+    menu: null,
+    header: null,
+    controlIcon: null
+};
+PushMenu.initialized = false;
+PushMenu.clickNav = () => {
+    const navigation = PushMenu.elements.navigation;
+    navigation?.click();
+};
+export { PushMenu };

package/js/push-menu.ts

@@ -0,0 +1,130 @@
+interface PushMenuElements {
+    navigation: HTMLElement | null;
+    content: HTMLElement | null;
+    menu: HTMLElement | null;
+    header: HTMLElement | null;
+    controlIcon: HTMLElement | null;
+}
+
+class PushMenu {
+    private static elements: PushMenuElements = {
+        navigation: null,
+        content: null,
+        menu: null,
+        header: null,
+        controlIcon: null
+    };
+
+    private static initialized = false;
+
+    public static init(): void {
+        if (this.initialized) {
+            console.warn('PushMenu: Already initialized');
+            return;
+        }
+
+        this.refresh();
+
+        if (!this.elements.navigation || !this.elements.content) {
+            throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
+        }
+
+        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
+
+        this.initialized = true;
+    }
+
+    private static handleNavigationChange(): void {
+        const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
+
+        if (!isPushed) {
+            this.elements.content?.addEventListener('click', this.clickNav);
+        } else {
+            this.elements.content?.removeEventListener('click', this.clickNav);
+        }
+
+        this.pushToggle();
+    }
+
+    public static pushToggle(): void {
+        if (!this.elements.content || !this.elements.menu) {
+            throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
+        }
+
+        const isPushed = this.elements.content.classList.contains('pushed');
+
+        this.toggleClass(this.elements.content, 'pushed', !isPushed);
+        this.toggleClass(this.elements.menu, 'pushed', !isPushed);
+        this.toggleClass(this.elements.header, 'pushed', !isPushed);
+
+        if (this.elements.controlIcon) {
+            if (isPushed) {
+                this.elements.controlIcon.classList.remove('icon-menu_open');
+                this.elements.controlIcon.classList.add('icon-menu');
+            } else {
+                this.elements.controlIcon.classList.add('icon-menu_open');
+                this.elements.controlIcon.classList.remove('icon-menu');
+            }
+        }
+    }
+
+    private static toggleClass(element: HTMLElement | null, className: string, add: boolean): void {
+        if (!element) return;
+
+        if (add) {
+            element.classList.add(className);
+        } else {
+            element.classList.remove(className);
+        }
+    }
+
+    private static clickNav = (): void => {
+        const navigation = PushMenu.elements.navigation as HTMLElement;
+        navigation?.click();
+    };
+
+    public static open(): void {
+        if (!this.elements.content?.classList.contains('pushed')) {
+            this.pushToggle();
+        }
+    }
+
+    public static close(): void {
+        if (this.elements.content?.classList.contains('pushed')) {
+            this.pushToggle();
+        }
+    }
+
+    public static isOpen(): boolean {
+        return this.elements.content?.classList.contains('pushed') ?? false;
+    }
+
+    public static destroy(): void {
+        if (!this.initialized) return;
+
+        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
+        this.elements.content?.removeEventListener('click', this.clickNav);
+
+        this.close();
+
+        this.elements = {
+            navigation: null,
+            content: null,
+            menu: null,
+            header: null,
+            controlIcon: null
+        };
+
+        this.initialized = false;
+    }
+
+    public static refresh(): void {
+        this.elements.navigation = document.querySelector('.navigation');
+        this.elements.content = document.querySelector('.push-content');
+        this.elements.menu = document.querySelector('.push-menu');
+        this.elements.header = document.querySelector('.main-header');
+        this.elements.controlIcon = document.querySelector('.navigation-controls .icon');
+    }
+}
+
+export { PushMenu, type PushMenuElements };

package/js/request.js

@@ -0,0 +1,51 @@
+class Request {
+    constructor(url, parameters, success, error) {
+        this.url = url;
+        this.parameters = parameters;
+        this.success = success;
+        this.error = error;
+    }
+
+    get() {
+        const checked = this.#checkSuccessError(this.success, this.error);
+        if (this.parameters.data !== undefined) {
+            this.url += '?' + new URLSearchParams(this.parameters.data);
+        }
+        fetch(this.url)
+            .then(function(response) {
+                return response.json();
+            })
+            .then(checked.success)
+            .catch(checked.error);
+    }
+    post() {
+        const checked = this.#checkSuccessError(this.success, this.error);
+        fetch(this.url,
+            {
+                method: 'post',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(this.parameters.data)
+            })
+            .then(checked.success)
+            .catch(checked.error);
+    }
+
+    #checkSuccessError(success, error) {
+        if (success === undefined) {
+            success = function(data) {
+                console.log(data);
+            };
+        }
+        if (error === undefined) {
+            error = function(error) {
+                console.error(error);
+            }
+        }
+        return {success, error};
+    }
+}
+
+export {Request}