npm - @dodlhuat/basix - Versions diffs - 1.3.0 → 1.3.2 - Mend

@dodlhuat/basix 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/js/editor.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { sanitizeHtml } from './utils.js';
 class Editor {
     constructor(options = {}) {
         this.undoStack = [];
@@ -89,11 +90,11 @@ class Editor {
             const code = this.code;
             const codeActions = document.querySelectorAll('.code-actions button');
             codeActions[0]?.addEventListener('click', () => {
-                this.editable.innerHTML = this.sanitizeHTML(code.value);
+                this.editable.innerHTML = sanitizeHtml(code.value);
                 this.onContentChange();
             }, sig);
             codeActions[1]?.addEventListener('click', () => {
-                code.value = this.sanitizeHTML(code.value);
+                code.value = sanitizeHtml(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
             }, sig);
@@ -183,7 +184,7 @@ class Editor {
         if (this.code)
             this.code.value = this.editable.innerHTML.trim();
         if (this.preview)
-            this.preview.innerHTML = this.sanitizeHTML(this.editable.innerHTML);
+            this.preview.innerHTML = sanitizeHtml(this.editable.innerHTML);
         this.updateWordCount();
     }
     updateWordCount() {
@@ -407,21 +408,8 @@ class Editor {
         sel.addRange(range);
         this.onContentChange();
     }
-    sanitizeHTML(html) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(html, 'text/html');
-        doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
-        doc.querySelectorAll('*').forEach(el => {
-            for (const attr of Array.from(el.attributes)) {
-                if (attr.name.startsWith('on') || attr.value.trim().toLowerCase().startsWith('javascript:')) {
-                    el.removeAttribute(attr.name);
-                }
-            }
-        });
-        return doc.body.innerHTML;
-    }
     downloadHTML() {
-        const content = this.sanitizeHTML(this.editable.innerHTML);
+        const content = sanitizeHtml(this.editable.innerHTML);
         const html = `<!doctype html>
 <html lang="en">
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Export</title></head>

package/js/gallery.d.ts CHANGED Viewed

@@ -22,6 +22,7 @@ declare class MasonryGallery {
     constructor(containerId: string, options: MasonryGalleryOptions);
     private init;
     private setupLayout;
+    private buildColumns;
     private addEventListeners;
     private reLayout;
     private handleScroll;

package/js/gallery.js CHANGED Viewed

@@ -37,14 +37,17 @@ class MasonryGallery {
         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);
-            }
+            this.buildColumns(numColumns);
+        }
+    }
+    buildColumns(count) {
+        this.container.innerHTML = '';
+        this.columns = [];
+        for (let i = 0; i < count; i++) {
+            const col = document.createElement('div');
+            col.className = 'masonry-column';
+            this.container.appendChild(col);
+            this.columns.push(col);
         }
     }
     addEventListeners() {
@@ -62,28 +65,16 @@ class MasonryGallery {
         });
     }
     reLayout() {
-        const items = [];
-        this.columns.forEach((col) => {
-            Array.from(col.children).forEach((child) => {
-                items.push(child);
-            });
-            col.innerHTML = "";
-        });
+        const items = this.columns.flatMap(col => Array.from(col.children));
         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);
-            }
+            this.buildColumns(numColumns);
         }
-        items.forEach((item) => {
-            this.addToShortestColumn(item);
-        });
+        else {
+            this.columns.forEach(col => { col.innerHTML = ''; });
+        }
+        items.forEach(item => this.addToShortestColumn(item));
     }
     async loadMoreImages(isAutoFill = false) {
         if (!isAutoFill)

package/js/push-menu.d.ts CHANGED Viewed

@@ -19,7 +19,6 @@ declare class PushMenu {
     private static resetPanels;
     private static handleNavigationChange;
     static pushToggle(): void;
-    private static toggleClass;
     private static clickNav;
     private static handleBackdropClick;
     static open(): void;

package/js/push-menu.js CHANGED Viewed

@@ -139,10 +139,10 @@ class PushMenu {
             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);
-        this.toggleClass(this.elements.backdrop, 'pushed', !isPushed);
+        this.elements.content.classList.toggle('pushed', !isPushed);
+        this.elements.menu.classList.toggle('pushed', !isPushed);
+        this.elements.header?.classList.toggle('pushed', !isPushed);
+        this.elements.backdrop?.classList.toggle('pushed', !isPushed);
         if (this.elements.controlIcon) {
             if (isPushed) {
                 this.elements.controlIcon.classList.remove('icon-menu_open');
@@ -154,16 +154,6 @@ class PushMenu {
             }
         }
     }
-    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();

package/js/timepicker.d.ts CHANGED Viewed

@@ -16,17 +16,31 @@ declare class TimeSpanPicker {
     private onChange?;
     private readonly uid;
     private fromString;
-    private toString;
+    private toLabel;
+    private pickerEl;
+    private durationEl;
+    private barEl;
+    private barFillEl;
+    private startHandleEl;
+    private endHandleEl;
+    private dragState;
     constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions);
-    private queryInput;
+    private queryEl;
     private render;
-    private readonly handleStartChange;
-    private readonly handleEndChange;
+    private readonly handleChange;
     private attachEventListeners;
+    private attachBarListeners;
+    private beginDrag;
+    private readonly onStartHandleDown;
+    private readonly onEndHandleDown;
+    private readonly onFillDown;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
     private toMinutes;
+    private minutesToTime;
+    private snap;
     private formatDuration;
     private updateUI;
-    private handleChange;
     getValue(): TimeSpan;
     setValue(start: string, end: string): void;
     reset(): void;

package/js/timepicker.js CHANGED Viewed

@@ -1,7 +1,72 @@
 class TimeSpanPicker {
     constructor(elementOrSelector, options) {
-        this.handleStartChange = () => { this.handleChange(); };
-        this.handleEndChange = () => { this.handleChange(); };
+        this.dragState = null;
+        this.handleChange = () => {
+            this.updateUI();
+            const start = this.startTimeInput.value;
+            const end = this.endTimeInput.value;
+            if (this.onChange && start && end) {
+                this.onChange(start, end);
+            }
+        };
+        this.onStartHandleDown = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this.beginDrag('start');
+        };
+        this.onEndHandleDown = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this.beginDrag('end');
+        };
+        this.onFillDown = (e) => {
+            if (e.target.classList.contains('timespan-handle'))
+                return;
+            e.preventDefault();
+            const start = this.startTimeInput.value;
+            if (!start)
+                return;
+            const rect = this.barEl.getBoundingClientRect();
+            const clickMins = ((e.clientX - rect.left) / rect.width) * 1440;
+            this.beginDrag('move', clickMins - this.toMinutes(start), rect);
+        };
+        this.onPointerMove = (e) => {
+            if (!this.dragState)
+                return;
+            e.preventDefault();
+            const { type, barLeft, barWidth, startMins, endMins, clickOffsetMins } = this.dragState;
+            const pct = Math.max(0, Math.min(1, (e.clientX - barLeft) / barWidth));
+            const rawMins = pct * 1440;
+            let start = this.startTimeInput.value;
+            let end = this.endTimeInput.value;
+            if (type === 'start') {
+                start = this.minutesToTime(Math.max(0, Math.min(endMins - 5, this.snap(rawMins))));
+                this.startTimeInput.value = start;
+            }
+            else if (type === 'end') {
+                end = this.minutesToTime(Math.max(startMins + 5, Math.min(1440, this.snap(rawMins))));
+                this.endTimeInput.value = end;
+            }
+            else {
+                const duration = endMins - startMins;
+                const newStartMins = Math.max(0, Math.min(1440 - duration, this.snap(rawMins - clickOffsetMins)));
+                start = this.minutesToTime(newStartMins);
+                end = this.minutesToTime(newStartMins + duration);
+                this.startTimeInput.value = start;
+                this.endTimeInput.value = end;
+            }
+            this.updateUI();
+            if (this.onChange)
+                this.onChange(start, end);
+        };
+        this.onPointerUp = () => {
+            if (!this.dragState)
+                return;
+            this.dragState = null;
+            this.barEl.classList.remove('is-dragging');
+            document.removeEventListener('pointermove', this.onPointerMove);
+            document.removeEventListener('pointerup', this.onPointerUp);
+        };
         const element = typeof elementOrSelector === 'string'
             ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
                 ? document.querySelector(elementOrSelector)
@@ -14,28 +79,25 @@ class TimeSpanPicker {
         this.onChange = options?.onChange;
         this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
         this.fromString = options?.fromString ?? 'From';
-        this.toString = options?.toString ?? 'To';
+        this.toLabel = options?.toString ?? 'To';
         this.render();
-        this.startTimeInput = this.queryInput('.timespan-start');
-        this.endTimeInput = this.queryInput('.timespan-end');
-        if (options?.defaultStart) {
+        this.startTimeInput = this.queryEl('.timespan-start');
+        this.endTimeInput = this.queryEl('.timespan-end');
+        if (options?.defaultStart)
             this.startTimeInput.value = options.defaultStart;
-        }
-        if (options?.defaultEnd) {
+        if (options?.defaultEnd)
             this.endTimeInput.value = options.defaultEnd;
-        }
         this.attachEventListeners();
-        // Render initial state if defaults provided
+        this.attachBarListeners();
         if (options?.defaultStart || options?.defaultEnd) {
             this.updateUI();
         }
     }
-    queryInput(selector) {
-        const input = this.container.querySelector(selector);
-        if (!input) {
-            throw new Error(`Input with selector "${selector}" not found`);
-        }
-        return input;
+    queryEl(selector) {
+        const el = this.container.querySelector(selector);
+        if (!el)
+            throw new Error(`TimeSpanPicker: "${selector}" not found`);
+        return el;
     }
     render() {
         const startId = `${this.uid}-start`;
@@ -53,23 +115,63 @@ class TimeSpanPicker {
         </div>
         <div class="timespan-field timespan-field-end">
-          <label for="${endId}">${this.toString}</label>
+          <label for="${endId}">${this.toLabel}</label>
           <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>
       <div class="timespan-bar" aria-hidden="true">
-        <div class="timespan-bar-fill"></div>
+        <div class="timespan-bar-fill">
+          <div class="timespan-handle timespan-handle-start"></div>
+          <div class="timespan-handle timespan-handle-end"></div>
+        </div>
       </div>
     `;
     }
     attachEventListeners() {
-        this.startTimeInput.addEventListener('change', this.handleStartChange);
-        this.endTimeInput.addEventListener('change', this.handleEndChange);
+        this.startTimeInput.addEventListener('change', this.handleChange);
+        this.endTimeInput.addEventListener('change', this.handleChange);
+    }
+    attachBarListeners() {
+        this.pickerEl = this.queryEl('.timespan-picker');
+        this.durationEl = this.queryEl('.timespan-duration');
+        this.barEl = this.queryEl('.timespan-bar');
+        this.barFillEl = this.queryEl('.timespan-bar-fill');
+        this.startHandleEl = this.queryEl('.timespan-handle-start');
+        this.endHandleEl = this.queryEl('.timespan-handle-end');
+        this.startHandleEl.addEventListener('pointerdown', this.onStartHandleDown);
+        this.endHandleEl.addEventListener('pointerdown', this.onEndHandleDown);
+        this.barFillEl.addEventListener('pointerdown', this.onFillDown);
+    }
+    beginDrag(type, clickOffsetMins = 0, rect) {
+        const start = this.startTimeInput.value;
+        const end = this.endTimeInput.value;
+        if (!start || !end)
+            return;
+        const barRect = rect ?? this.barEl.getBoundingClientRect();
+        this.dragState = {
+            type,
+            barLeft: barRect.left,
+            barWidth: barRect.width,
+            startMins: this.toMinutes(start),
+            endMins: this.toMinutes(end),
+            clickOffsetMins,
+        };
+        this.barEl.classList.add('is-dragging');
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
     }
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
         return h * 60 + m;
     }
+    minutesToTime(minutes) {
+        const h = Math.floor(minutes / 60);
+        const m = minutes % 60;
+        return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+    }
+    snap(mins) {
+        return Math.round(mins / 5) * 5;
+    }
     formatDuration(minutes) {
         const h = Math.floor(minutes / 60);
         const m = minutes % 60;
@@ -80,44 +182,31 @@ class TimeSpanPicker {
         return `${m}m`;
     }
     updateUI() {
-        const picker = this.container.querySelector('.timespan-picker');
-        const durationEl = this.container.querySelector('.timespan-duration');
-        const barFill = this.container.querySelector('.timespan-bar-fill');
         const start = this.startTimeInput.value;
         const end = this.endTimeInput.value;
         const isError = !!(start && end && start >= end);
-        picker?.classList.toggle('is-error', isError);
+        this.pickerEl.classList.toggle('is-error', isError);
         if (isError) {
             this.endTimeInput.setCustomValidity('End time must be after start time');
-            if (durationEl)
-                durationEl.textContent = '!';
+            this.durationEl.textContent = '!';
+            this.barFillEl.classList.remove('is-active');
             return;
         }
         this.endTimeInput.setCustomValidity('');
-        if (start && end && durationEl && barFill) {
+        if (start && end) {
             const startMins = this.toMinutes(start);
             const endMins = this.toMinutes(end);
             const duration = endMins - startMins;
-            durationEl.textContent = this.formatDuration(duration);
-            const startPct = ((startMins / 1440) * 100).toFixed(2);
-            const widthPct = ((duration / 1440) * 100).toFixed(2);
-            barFill.style.left = `${startPct}%`;
-            barFill.style.width = `${widthPct}%`;
+            this.durationEl.textContent = this.formatDuration(duration);
+            this.barFillEl.style.left = `${((startMins / 1440) * 100).toFixed(2)}%`;
+            this.barFillEl.style.width = `${((duration / 1440) * 100).toFixed(2)}%`;
+            this.barFillEl.classList.add('is-active');
         }
         else {
-            if (durationEl)
-                durationEl.textContent = '';
-            if (barFill) {
-                barFill.style.left = '0';
-                barFill.style.width = '0';
-            }
-        }
-    }
-    handleChange() {
-        this.updateUI();
-        const { start, end } = this.getValue();
-        if (this.onChange && start && end) {
-            this.onChange(start, end);
+            this.durationEl.textContent = '';
+            this.barFillEl.style.left = '0';
+            this.barFillEl.style.width = '0';
+            this.barFillEl.classList.remove('is-active');
         }
     }
     getValue() {
@@ -135,24 +224,24 @@ class TimeSpanPicker {
         this.startTimeInput.value = '';
         this.endTimeInput.value = '';
         this.endTimeInput.setCustomValidity('');
-        const picker = this.container.querySelector('.timespan-picker');
-        const durationEl = this.container.querySelector('.timespan-duration');
-        const barFill = this.container.querySelector('.timespan-bar-fill');
-        picker?.classList.remove('is-error');
-        if (durationEl)
-            durationEl.textContent = '';
-        if (barFill) {
-            barFill.style.left = '0';
-            barFill.style.width = '0';
-        }
+        this.pickerEl.classList.remove('is-error');
+        this.durationEl.textContent = '';
+        this.barFillEl.style.left = '0';
+        this.barFillEl.style.width = '0';
+        this.barFillEl.classList.remove('is-active');
     }
     isValid() {
         const { start, end } = this.getValue();
         return !!(start && end && start < end);
     }
     destroy() {
-        this.startTimeInput.removeEventListener('change', this.handleStartChange);
-        this.endTimeInput.removeEventListener('change', this.handleEndChange);
+        this.startTimeInput.removeEventListener('change', this.handleChange);
+        this.endTimeInput.removeEventListener('change', this.handleChange);
+        this.startHandleEl.removeEventListener('pointerdown', this.onStartHandleDown);
+        this.endHandleEl.removeEventListener('pointerdown', this.onEndHandleDown);
+        this.barFillEl.removeEventListener('pointerdown', this.onFillDown);
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
     }
 }
 export { TimeSpanPicker };

package/js/toast.d.ts CHANGED Viewed

@@ -18,7 +18,6 @@ declare class Toast {
     constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
     show(ms?: number): void;
     hide: () => void;
-    private handleClose;
     private startTimer;
     private buildTemplate;
 }

package/js/toast.js CHANGED Viewed

@@ -11,17 +11,11 @@ class Toast {
             }
             this.toastElement?.classList.remove('show');
             setTimeout(() => {
-                const closeButton = this.toastElement?.querySelector('.close');
-                if (closeButton) {
-                    closeButton.removeEventListener('click', this.handleClose);
-                }
+                this.toastElement?.querySelector('.close')?.removeEventListener('click', this.hide);
                 this.toastElement?.remove();
                 this.toastElement = null;
             }, 150);
         };
-        this.handleClose = () => {
-            this.hide();
-        };
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
             this.header = contentOrOptions.header ?? '';
@@ -50,7 +44,7 @@ class Toast {
                 this.toastElement?.classList.add('show');
                 const closeButton = this.toastElement?.querySelector('.close');
                 if (closeButton) {
-                    closeButton.addEventListener('click', this.handleClose);
+                    closeButton.addEventListener('click', this.hide);
                 }
                 if (ms !== undefined && ms > 0) {
                     this.startTimer(ms);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "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/*",