@dodlhuat/basix 1.0.0 → 1.1.0

package/js/timepicker.ts

@@ -1,131 +1,194 @@
-interface TimeSpan {
-    start: string;
-    end: string;
-}
-
-interface TimeSpanPickerOptions {
-    onChange?: (start: string, end: string) => void;
-    defaultStart?: string;
-    defaultEnd?: string;
-}
-
-class TimeSpanPicker {
-    private container: HTMLElement;
-    private startTimeInput: HTMLInputElement;
-    private endTimeInput: HTMLInputElement;
-    private onChange?: (start: string, end: string) => void;
-
-    constructor(containerId: string, options?: TimeSpanPickerOptions) {
-        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();
-    }
-
-    private queryInput(selector: string): HTMLInputElement {
-        const input = this.container.querySelector<HTMLInputElement>(selector);
-        if (!input) {
-            throw new Error(`Input with selector "${selector}" not found`);
-        }
-        return input;
-    }
-
-    private render(): void {
-        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>
-    `;
-    }
-
-    private attachEventListeners(): void {
-        this.startTimeInput.addEventListener('change', () => this.handleChange());
-        this.endTimeInput.addEventListener('change', () => this.handleChange());
-    }
-
-    private handleChange(): void {
-        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);
-        }
-    }
-
-    public getValue(): TimeSpan {
-        return {
-            start: this.startTimeInput.value,
-            end: this.endTimeInput.value
-        };
-    }
-
-    public setValue(start: string, end: string): void {
-        this.startTimeInput.value = start;
-        this.endTimeInput.value = end;
-        this.handleChange();
-    }
-
-    public reset(): void {
-        this.startTimeInput.value = '';
-        this.endTimeInput.value = '';
-        this.endTimeInput.setCustomValidity('');
-    }
-
-    public isValid(): boolean {
-        const {start, end} = this.getValue();
-        return !!(start && end && start < end);
-    }
-
-    public destroy(): void {
-        this.startTimeInput.removeEventListener('change', () => this.handleChange());
-        this.endTimeInput.removeEventListener('change', () => this.handleChange());
-    }
-}
-
-export {TimeSpanPicker};
-export type {TimeSpan, TimeSpanPickerOptions};
+interface TimeSpan {
+    start: string;
+    end: string;
+}
+
+interface TimeSpanPickerOptions {
+    onChange?: (start: string, end: string) => void;
+    defaultStart?: string;
+    defaultEnd?: string;
+}
+
+class TimeSpanPicker {
+    private container: HTMLElement;
+    private startTimeInput: HTMLInputElement;
+    private endTimeInput: HTMLInputElement;
+    private onChange?: (start: string, end: string) => void;
+
+    constructor(containerId: string, options?: TimeSpanPickerOptions) {
+        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();
+
+        // Render initial state if defaults provided
+        if (options?.defaultStart || options?.defaultEnd) {
+            this.updateUI();
+        }
+    }
+
+    private queryInput(selector: string): HTMLInputElement {
+        const input = this.container.querySelector<HTMLInputElement>(selector);
+        if (!input) {
+            throw new Error(`Input with selector "${selector}" not found`);
+        }
+        return input;
+    }
+
+    private render(): void {
+        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>
+    `;
+    }
+
+    private attachEventListeners(): void {
+        this.startTimeInput.addEventListener('change', () => this.handleChange());
+        this.endTimeInput.addEventListener('change', () => this.handleChange());
+    }
+
+    private toMinutes(time: string): number {
+        const [h, m] = time.split(':').map(Number);
+        return h * 60 + m;
+    }
+
+    private formatDuration(minutes: number): string {
+        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`;
+    }
+
+    private updateUI(): void {
+        const picker = this.container.querySelector<HTMLElement>('.timespan-picker');
+        const durationEl = this.container.querySelector<HTMLElement>('.timespan-duration');
+        const barFill = this.container.querySelector<HTMLElement>('.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';
+            }
+        }
+    }
+
+    private handleChange(): void {
+        this.updateUI();
+
+        const { start, end } = this.getValue();
+        if (this.onChange && start && end) {
+            this.onChange(start, end);
+        }
+    }
+
+    public getValue(): TimeSpan {
+        return {
+            start: this.startTimeInput.value,
+            end: this.endTimeInput.value
+        };
+    }
+
+    public setValue(start: string, end: string): void {
+        this.startTimeInput.value = start;
+        this.endTimeInput.value = end;
+        this.handleChange();
+    }
+
+    public reset(): void {
+        this.startTimeInput.value = '';
+        this.endTimeInput.value = '';
+        this.endTimeInput.setCustomValidity('');
+
+        const picker = this.container.querySelector('.timespan-picker');
+        const durationEl = this.container.querySelector<HTMLElement>('.timespan-duration');
+        const barFill = this.container.querySelector<HTMLElement>('.timespan-bar-fill');
+
+        picker?.classList.remove('is-error');
+        if (durationEl) durationEl.textContent = '';
+        if (barFill) { barFill.style.left = '0'; barFill.style.width = '0'; }
+    }
+
+    public isValid(): boolean {
+        const { start, end } = this.getValue();
+        return !!(start && end && start < end);
+    }
+
+    public destroy(): void {
+        const startHandler = () => this.handleChange();
+        const endHandler = () => this.handleChange();
+        this.startTimeInput.removeEventListener('change', startHandler);
+        this.endTimeInput.removeEventListener('change', endHandler);
+    }
+}
+
+export { TimeSpanPicker };
+export type { TimeSpan, TimeSpanPickerOptions };

package/js/tree.js

@@ -10,7 +10,7 @@ class TreeNode {
     }
 }
 class TreeComponent {
-    constructor(elementOrSelector, data) {
+    constructor(elementOrSelector, data, options = {}) {
         const container = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -20,6 +20,7 @@ class TreeComponent {
         this.container = container;
         this.data = data;
         this.selectedNode = null;
+        this.options = options;
         this.init();
     }
     init() {
@@ -36,12 +37,10 @@ class TreeComponent {
         li.className = 'tree-node';
         const itemDiv = document.createElement('div');
         itemDiv.className = `tree-item ${node.type}`;
-        if (node.selected) {
+        if (node.selected)
             itemDiv.classList.add('selected');
-        }
-        if (node.expanded) {
+        if (node.expanded)
             itemDiv.classList.add('expanded');
-        }
         const iconDiv = this.createIconElement(node.type);
         const labelSpan = this.createLabelElement(node.label);
         itemDiv.append(iconDiv, labelSpan);
@@ -68,18 +67,18 @@ class TreeComponent {
         const iconDiv = document.createElement('div');
         iconDiv.className = 'tree-icon';
         if (type === 'folder') {
-            iconDiv.innerHTML = `
-        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+            iconDiv.innerHTML = `
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
       `;
         }
         else {
-            iconDiv.innerHTML = `
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M13 2v7h7" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+            iconDiv.innerHTML = `
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M13 2v7h7" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
       `;
         }
         return iconDiv;
@@ -95,6 +94,7 @@ class TreeComponent {
         childrenUl.className = 'tree-children';
         if (node.expanded) {
             childrenUl.classList.add('expanded');
+            childrenUl.style.height = 'auto';
         }
         node.children.forEach(child => {
             this.renderNode(child, childrenUl);
@@ -103,13 +103,29 @@ class TreeComponent {
     }
     toggleNode(node) {
         node.expanded = !node.expanded;
-        if (node.element) {
-            node.element.classList.toggle('expanded', node.expanded);
-        }
+        node.element?.classList.toggle('expanded', node.expanded);
         if (node.childrenContainer) {
+            if (node.expanded) {
+                this.expandChildren(node.childrenContainer);
+            }
+            else {
+                this.collapseChildren(node.childrenContainer);
+            }
             node.childrenContainer.classList.toggle('expanded', node.expanded);
         }
     }
+    expandChildren(container) {
+        container.style.height = container.scrollHeight + 'px';
+        container.addEventListener('transitionend', () => {
+            container.style.height = 'auto';
+        }, { once: true });
+    }
+    collapseChildren(container) {
+        container.style.height = container.offsetHeight + 'px';
+        requestAnimationFrame(() => {
+            container.style.height = '0';
+        });
+    }
     selectNode(node) {
         if (this.selectedNode?.element) {
             this.selectedNode.element.classList.remove('selected');
@@ -118,23 +134,29 @@ class TreeComponent {
         node.selected = true;
         node.element?.classList.add('selected');
         this.selectedNode = node;
-        console.log('Selected:', node.label);
+        this.options.onSelect?.(node);
+        this.container.dispatchEvent(new CustomEvent('tree-select', {
+            detail: { node },
+            bubbles: true,
+        }));
     }
     expandAll() {
         this.traverseNodes(this.data, (node) => {
-            if (node.type === 'folder') {
+            if (node.type === 'folder' && node.childrenContainer) {
                 node.expanded = true;
                 node.element?.classList.add('expanded');
-                node.childrenContainer?.classList.add('expanded');
+                node.childrenContainer.classList.add('expanded');
+                node.childrenContainer.style.height = 'auto';
             }
         });
     }
     collapseAll() {
         this.traverseNodes(this.data, (node) => {
-            if (node.type === 'folder') {
+            if (node.type === 'folder' && node.childrenContainer) {
                 node.expanded = false;
                 node.element?.classList.remove('expanded');
-                node.childrenContainer?.classList.remove('expanded');
+                node.childrenContainer.classList.remove('expanded');
+                node.childrenContainer.style.height = '0';
             }
         });
     }
@@ -150,13 +172,19 @@ class TreeComponent {
         return this.selectedNode;
     }
     findNodeByLabel(label) {
-        let result = null;
-        this.traverseNodes(this.data, (node) => {
-            if (node.label === label) {
-                result = node;
+        return this.findNode(this.data, label);
+    }
+    findNode(nodes, label) {
+        for (const node of nodes) {
+            if (node.label === label)
+                return node;
+            if (node.children.length > 0) {
+                const found = this.findNode(node.children, label);
+                if (found)
+                    return found;
             }
-        });
-        return result;
+        }
+        return null;
     }
 }
 export { TreeComponent, TreeNode };