@dodlhuat/basix 1.3.3 → 1.3.5

package/js/gallery.js

@@ -1,10 +1,12 @@
 import { escapeHtml } from './utils.js';
+import { Lightbox } from './lightbox.js';
 /** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 class MasonryGallery {
     container;
     loader;
     options;
     columns = [];
+    allImages = [];
     isFetching = false;
     resizeObserver = null;
     abortController = null;
@@ -21,6 +23,7 @@ class MasonryGallery {
             scrollThreshold: options.scrollThreshold ?? 100,
             reload: 2,
             fetchFunction: options.fetchFunction,
+            enableLightbox: options.enableLightbox ?? true,
         };
         this.init();
     }
@@ -38,6 +41,7 @@ class MasonryGallery {
     }
     buildColumns(count) {
         this.container.innerHTML = '';
+        this.container.classList.add('masonry-container');
         this.columns = [];
         for (let i = 0; i < count; i++) {
             const col = document.createElement('div');
@@ -111,14 +115,29 @@ class MasonryGallery {
         }
     }
     renderImages(imageDataList) {
+        const startIndex = this.allImages.length;
+        this.allImages.push(...imageDataList);
         // Sort columns by current height so we start filling from the shortest.
         // Then round-robin across them — this avoids the problem where unloaded
         // images (0 height) cause offsetHeight-based distribution to pile all
         // new items into a single column.
         const sorted = [...this.columns].sort((a, b) => a.offsetHeight - b.offsetHeight);
-        imageDataList.forEach((data, index) => {
+        imageDataList.forEach((data, i) => {
             const item = this.createCard(data);
-            const col = sorted[index % sorted.length];
+            if (this.options.enableLightbox) {
+                const index = startIndex + i;
+                item.addEventListener('click', () => {
+                    new Lightbox({
+                        images: this.allImages.map(img => ({
+                            src: img.src,
+                            alt: img.title,
+                            caption: img.desc,
+                        })),
+                        startIndex: index,
+                    }).show();
+                });
+            }
+            const col = sorted[i % sorted.length];
             col.appendChild(item);
             requestAnimationFrame(() => {
                 const img = item.querySelector("img");
@@ -168,6 +187,7 @@ class MasonryGallery {
             this.abortController.abort();
             this.abortController = null;
         }
+        this.allImages = [];
     }
 }
 export { MasonryGallery };

package/js/modal.js

@@ -78,7 +78,7 @@ class Modal {
         }
     };
     buildTemplate() {
-        const parts = ['<div class="modal">'];
+        const parts = [`<div class="modal modal-${this.type}">`];
         if (this.closeable) {
             parts.push(CLOSE_ICON);
         }

package/js/sidebar-nav.d.ts

@@ -4,16 +4,26 @@ interface SidebarNavOptions {
     toggleSelector?: string;
     /** Breakpoint (px) above which the sidebar is always visible. Default: 768 */
     breakpoint?: number;
+    /** Minimum horizontal swipe distance (px) to trigger open/close. Default: 60 */
+    swipeThreshold?: number;
+    /** Width of the left-edge zone (px) that triggers open on swipe-right. Default: 20 */
+    swipeEdge?: number;
 }
-/** Collapsible sidebar navigation with backdrop and responsive breakpoint support. */
+/** Collapsible sidebar navigation with backdrop, swipe gestures, and responsive breakpoint support. */
 declare class SidebarNav {
     private nav;
     private backdrop;
     private toggleBtn;
+    private closeBtn;
     private opts;
+    private _touchStartX;
+    private _touchStartY;
     private _onToggle;
     private _onBackdrop;
     private _onResize;
+    private _onClose;
+    private _onTouchStart;
+    private _onTouchEnd;
     constructor(containerOrSelector: string | HTMLElement, options?: SidebarNavOptions);
     open(): void;
     close(): void;

package/js/sidebar-nav.js

@@ -1,12 +1,18 @@
-/** Collapsible sidebar navigation with backdrop and responsive breakpoint support. */
+/** Collapsible sidebar navigation with backdrop, swipe gestures, and responsive breakpoint support. */
 class SidebarNav {
     nav;
     backdrop;
     toggleBtn;
+    closeBtn = null;
     opts;
+    _touchStartX = 0;
+    _touchStartY = 0;
     _onToggle;
     _onBackdrop;
     _onResize;
+    _onClose;
+    _onTouchStart;
+    _onTouchEnd;
     constructor(containerOrSelector, options = {}) {
         const container = typeof containerOrSelector === 'string'
             ? document.querySelector(containerOrSelector)
@@ -14,6 +20,8 @@ class SidebarNav {
         this.opts = {
             toggleSelector: options.toggleSelector ?? '.sidebar-toggle',
             breakpoint: options.breakpoint ?? 768,
+            swipeThreshold: options.swipeThreshold ?? 60,
+            swipeEdge: options.swipeEdge ?? 20,
         };
         this.nav = container?.querySelector('.sidebar-nav') ?? null;
         this.backdrop = container?.querySelector('.sidebar-backdrop') ?? null;
@@ -22,9 +30,36 @@ class SidebarNav {
         this._onBackdrop = () => this.close();
         this._onResize = () => { if (window.innerWidth > this.opts.breakpoint)
             this.close(); };
+        this._onClose = () => this.close();
+        this._onTouchStart = (e) => {
+            this._touchStartX = e.touches[0].clientX;
+            this._touchStartY = e.touches[0].clientY;
+        };
+        this._onTouchEnd = (e) => {
+            if (window.innerWidth > this.opts.breakpoint)
+                return;
+            const dx = e.changedTouches[0].clientX - this._touchStartX;
+            const dy = e.changedTouches[0].clientY - this._touchStartY;
+            if (Math.abs(dx) < Math.abs(dy))
+                return;
+            if (!this.isOpen() && this._touchStartX <= this.opts.swipeEdge && dx >= this.opts.swipeThreshold) {
+                this.open();
+            }
+            else if (this.isOpen() && dx <= -this.opts.swipeThreshold) {
+                this.close();
+            }
+        };
         this.toggleBtn?.addEventListener('click', this._onToggle);
         this.backdrop?.addEventListener('click', this._onBackdrop);
         window.addEventListener('resize', this._onResize);
+        document.addEventListener('touchstart', this._onTouchStart, { passive: true });
+        document.addEventListener('touchend', this._onTouchEnd, { passive: true });
+        this.closeBtn = document.createElement('button');
+        this.closeBtn.className = 'sidebar-close';
+        this.closeBtn.setAttribute('aria-label', 'Close navigation');
+        this.closeBtn.innerHTML = '<div class="icon icon-close"></div>';
+        this.closeBtn.addEventListener('click', this._onClose);
+        this.nav?.append(this.closeBtn);
     }
     open() {
         this.nav?.classList.add('is-open');
@@ -44,6 +79,10 @@ class SidebarNav {
         this.toggleBtn?.removeEventListener('click', this._onToggle);
         this.backdrop?.removeEventListener('click', this._onBackdrop);
         window.removeEventListener('resize', this._onResize);
+        this.closeBtn?.removeEventListener('click', this._onClose);
+        this.closeBtn?.remove();
+        document.removeEventListener('touchstart', this._onTouchStart);
+        document.removeEventListener('touchend', this._onTouchEnd);
     }
 }
 export { SidebarNav };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",