@dodlhuat/basix 1.0.0 → 1.1.1

package/js/index.ts

@@ -17,6 +17,7 @@ import {Tooltip} from "./tooltip.js";
 import {Dropdown, DropdownSelectDetail} from "./dropdown.js";
 import {VirtualDropdown} from "./virtual-dropdown.js";
 import {TimeSpanPicker} from "./timepicker.js";
+import {RangeSlider} from "./range-slider.js";
 
 // Generate sample table data
 const generateData = (count: number): TableRow[] => {
@@ -349,6 +350,9 @@ utils.ready(() => {
         },
     });
 
+    // Initialize range sliders
+    RangeSlider.initAll();
+
     Tooltip.initializeAll();
 
     const timeSpanPicker = new TimeSpanPicker('timespan-1', {
@@ -397,14 +401,9 @@ new CodeViewer(
 );
 new CodeViewer(
     "#usage-slider-demo",
-    `<label for="range-slider" class="hidden">Slider</label>
-<input
-    type="range"
-    min="1"
-    max="100"
-    value="50"
-    id="range-slider-demo"
-/>`,
+    `<div class="range-slider">
+    <input type="range" min="1" max="100" value="50" />
+</div>`,
     "html",
 );
 new CodeViewer(

package/js/push-menu.js

@@ -1,101 +1,113 @@
-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 };
+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.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
+        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);
+        this.toggleClass(this.elements.backdrop, '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.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
+        this.close();
+        this.elements = {
+            navigation: null,
+            content: null,
+            menu: null,
+            header: null,
+            controlIcon: null,
+            backdrop: 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');
+        this.elements.backdrop = document.querySelector('.push-menu-backdrop');
+    }
+}
+PushMenu.elements = {
+    navigation: null,
+    content: null,
+    menu: null,
+    header: null,
+    controlIcon: null,
+    backdrop: null
+};
+PushMenu.initialized = false;
+PushMenu.clickNav = () => {
+    const navigation = PushMenu.elements.navigation;
+    navigation?.click();
+};
+PushMenu.handleBackdropClick = () => {
+    if (PushMenu.isOpen()) {
+        const navigation = PushMenu.elements.navigation;
+        navigation?.click();
+    }
+};
+export { PushMenu };

package/js/push-menu.ts

@@ -4,6 +4,7 @@ interface PushMenuElements {
     menu: HTMLElement | null;
     header: HTMLElement | null;
     controlIcon: HTMLElement | null;
+    backdrop: HTMLElement | null;
 }
 
 class PushMenu {
@@ -12,7 +13,8 @@ class PushMenu {
         content: null,
         menu: null,
         header: null,
-        controlIcon: null
+        controlIcon: null,
+        backdrop: null
     };
 
     private static initialized = false;
@@ -31,6 +33,8 @@ class PushMenu {
 
         this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
 
+        this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
+
         this.initialized = true;
     }
 
@@ -56,6 +60,7 @@ class PushMenu {
         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);
 
         if (this.elements.controlIcon) {
             if (isPushed) {
@@ -83,6 +88,13 @@ class PushMenu {
         navigation?.click();
     };
 
+    private static handleBackdropClick = (): void => {
+        if (PushMenu.isOpen()) {
+            const navigation = PushMenu.elements.navigation as HTMLElement;
+            navigation?.click();
+        }
+    };
+
     public static open(): void {
         if (!this.elements.content?.classList.contains('pushed')) {
             this.pushToggle();
@@ -104,6 +116,7 @@ class PushMenu {
 
         this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
         this.elements.content?.removeEventListener('click', this.clickNav);
+        this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
 
         this.close();
 
@@ -112,7 +125,8 @@ class PushMenu {
             content: null,
             menu: null,
             header: null,
-            controlIcon: null
+            controlIcon: null,
+            backdrop: null
         };
 
         this.initialized = false;
@@ -124,6 +138,7 @@ class PushMenu {
         this.elements.menu = document.querySelector('.push-menu');
         this.elements.header = document.querySelector('.main-header');
         this.elements.controlIcon = document.querySelector('.navigation-controls .icon');
+        this.elements.backdrop = document.querySelector('.push-menu-backdrop');
     }
 }
 

package/js/range-slider.js

@@ -0,0 +1,26 @@
+class RangeSlider {
+    constructor(input) {
+        this.handleInput = () => {
+            this.update();
+        };
+        this.input = input;
+        this.update();
+        this.input.addEventListener('input', this.handleInput);
+    }
+    static initAll(selector = '.range-slider input[type="range"]') {
+        document.querySelectorAll(selector).forEach(input => {
+            new RangeSlider(input);
+        });
+    }
+    update() {
+        const min = +this.input.min || 0;
+        const max = +this.input.max || 100;
+        const pct = ((+this.input.value - min) / (max - min)) * 100;
+        this.input.style.setProperty('--range-fill', `${pct}%`);
+    }
+    destroy() {
+        this.input.removeEventListener('input', this.handleInput);
+        this.input.style.removeProperty('--range-fill');
+    }
+}
+export { RangeSlider };

package/js/range-slider.ts

@@ -0,0 +1,33 @@
+class RangeSlider {
+    private readonly input: HTMLInputElement;
+
+    constructor(input: HTMLInputElement) {
+        this.input = input;
+        this.update();
+        this.input.addEventListener('input', this.handleInput);
+    }
+
+    public static initAll(selector: string = '.range-slider input[type="range"]'): void {
+        document.querySelectorAll<HTMLInputElement>(selector).forEach(input => {
+            new RangeSlider(input);
+        });
+    }
+
+    private update(): void {
+        const min = +this.input.min || 0;
+        const max = +this.input.max || 100;
+        const pct = ((+this.input.value - min) / (max - min)) * 100;
+        this.input.style.setProperty('--range-fill', `${pct}%`);
+    }
+
+    private handleInput = (): void => {
+        this.update();
+    };
+
+    public destroy(): void {
+        this.input.removeEventListener('input', this.handleInput);
+        this.input.style.removeProperty('--range-fill');
+    }
+}
+
+export { RangeSlider };

package/js/timepicker.js

@@ -1,98 +1,144 @@
-class TimeSpanPicker {
-    constructor(containerId, options) {
-        const element = document.getElementById(containerId);
-        if (!element) {
-            throw new Error(`Container with id "${containerId}" not found`);
-        }
-        this.container = element;
-        this.onChange = options?.onChange;
-        this.render();
-        // Query the inputs after rendering
-        this.startTimeInput = this.queryInput('.timespan-start');
-        this.endTimeInput = this.queryInput('.timespan-end');
-        // Set default values if provided
-        if (options?.defaultStart) {
-            this.startTimeInput.value = options.defaultStart;
-        }
-        if (options?.defaultEnd) {
-            this.endTimeInput.value = options.defaultEnd;
-        }
-        this.attachEventListeners();
-    }
-    queryInput(selector) {
-        const input = this.container.querySelector(selector);
-        if (!input) {
-            throw new Error(`Input with selector "${selector}" not found`);
-        }
-        return input;
-    }
-    render() {
-        this.container.innerHTML = `
-      <div class="timespan-picker">
-        <div class="timespan-field">
-          <label for="timespan-start">from</label>
-          <input
-            type="time"
-            class="timespan-start"
-            id="timespan-start"
-          />
-        </div>
-
-        <div class="timespan-separator">-</div>
-
-        <div class="timespan-field">
-          <label for="timespan-end">to</label>
-          <input
-            type="time"
-            class="timespan-end"
-            id="timespan-end"
-          />
-        </div>
-      </div>
-    `;
-    }
-    attachEventListeners() {
-        this.startTimeInput.addEventListener('change', () => this.handleChange());
-        this.endTimeInput.addEventListener('change', () => this.handleChange());
-    }
-    handleChange() {
-        const start = this.startTimeInput.value;
-        const end = this.endTimeInput.value;
-        // Validate that end time is after start time
-        if (start && end && start >= end) {
-            this.endTimeInput.setCustomValidity('Endzeit muss nach Startzeit liegen');
-        }
-        else {
-            this.endTimeInput.setCustomValidity('');
-        }
-        // Trigger onChange callback if both values are present
-        if (this.onChange && start && end) {
-            this.onChange(start, end);
-        }
-    }
-    getValue() {
-        return {
-            start: this.startTimeInput.value,
-            end: this.endTimeInput.value
-        };
-    }
-    setValue(start, end) {
-        this.startTimeInput.value = start;
-        this.endTimeInput.value = end;
-        this.handleChange();
-    }
-    reset() {
-        this.startTimeInput.value = '';
-        this.endTimeInput.value = '';
-        this.endTimeInput.setCustomValidity('');
-    }
-    isValid() {
-        const { start, end } = this.getValue();
-        return !!(start && end && start < end);
-    }
-    destroy() {
-        this.startTimeInput.removeEventListener('change', () => this.handleChange());
-        this.endTimeInput.removeEventListener('change', () => this.handleChange());
-    }
-}
-export { TimeSpanPicker };
+class TimeSpanPicker {
+    constructor(containerId, options) {
+        const element = document.getElementById(containerId);
+        if (!element) {
+            throw new Error(`Container with id "${containerId}" not found`);
+        }
+        this.container = element;
+        this.onChange = options?.onChange;
+        this.render();
+        this.startTimeInput = this.queryInput('.timespan-start');
+        this.endTimeInput = this.queryInput('.timespan-end');
+        if (options?.defaultStart) {
+            this.startTimeInput.value = options.defaultStart;
+        }
+        if (options?.defaultEnd) {
+            this.endTimeInput.value = options.defaultEnd;
+        }
+        this.attachEventListeners();
+        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;
+    }
+    render() {
+        this.container.innerHTML = `
+      <div class="timespan-picker">
+        <div class="timespan-field timespan-field-start">
+          <label for="timespan-start">From</label>
+          <input
+            type="time"
+            class="timespan-start"
+            id="timespan-start"
+          />
+        </div>
+
+        <div class="timespan-center">
+          <span class="timespan-arrow">→</span>
+          <span class="timespan-duration"></span>
+        </div>
+
+        <div class="timespan-field timespan-field-end">
+          <label for="timespan-end">To</label>
+          <input
+            type="time"
+            class="timespan-end"
+            id="timespan-end"
+          />
+        </div>
+      </div>
+      <div class="timespan-bar" aria-hidden="true">
+        <div class="timespan-bar-fill"></div>
+      </div>
+    `;
+    }
+    attachEventListeners() {
+        this.startTimeInput.addEventListener('change', () => this.handleChange());
+        this.endTimeInput.addEventListener('change', () => this.handleChange());
+    }
+    toMinutes(time) {
+        const [h, m] = time.split(':').map(Number);
+        return h * 60 + m;
+    }
+    formatDuration(minutes) {
+        const h = Math.floor(minutes / 60);
+        const m = minutes % 60;
+        if (h && m) return `${h}h ${m}m`;
+        if (h) return `${h}h`;
+        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);
+        if (isError) {
+            this.endTimeInput.setCustomValidity('End time must be after start time');
+            if (durationEl) durationEl.textContent = '!';
+            return;
+        }
+        this.endTimeInput.setCustomValidity('');
+        if (start && end && durationEl && barFill) {
+            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}%`;
+        } 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);
+        }
+    }
+    getValue() {
+        return {
+            start: this.startTimeInput.value,
+            end: this.endTimeInput.value
+        };
+    }
+    setValue(start, end) {
+        this.startTimeInput.value = start;
+        this.endTimeInput.value = end;
+        this.handleChange();
+    }
+    reset() {
+        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'; }
+    }
+    isValid() {
+        const { start, end } = this.getValue();
+        return !!(start && end && start < end);
+    }
+    destroy() {
+        const startHandler = () => this.handleChange();
+        const endHandler = () => this.handleChange();
+        this.startTimeInput.removeEventListener('change', startHandler);
+        this.endTimeInput.removeEventListener('change', endHandler);
+    }
+}
+export { TimeSpanPicker };