@dodlhuat/basix 1.2.0 → 1.2.1

package/js/lazy-loader.js

@@ -1,121 +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);
-        }
-    }
-}
+/**
+ * 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.ts

@@ -1,167 +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();
-    }
-}
-
+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 };