ezfw-core 1.0.0

package/components/timepicker/EzTimePicker.ts

@@ -0,0 +1,540 @@
+import styles from './EzTimePicker.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+type Period = 'AM' | 'PM';
+
+export interface EzTimePickerConfig extends EzBaseComponentConfig {
+    placeholder?: string;
+    format?: string;
+    displayFormat?: string;
+    use12Hour?: boolean;
+    minuteStep?: number;
+    showSeconds?: boolean;
+    min?: string | null;
+    max?: string | null;
+    onTimeChange?: (value: string | null) => void;
+    value?: string | null;
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    name?: string;
+    formData?: string;
+}
+
+export class EzTimePicker extends EzBaseComponent {
+    declare config: EzTimePickerConfig;
+    declare el: HTMLElement;
+
+    placeholder: string;
+    format: string;
+    displayFormat: string;
+    use12Hour: boolean;
+    minuteStep: number;
+    showSeconds: boolean;
+    min: string | null;
+    max: string | null;
+    onTimeChange: ((value: string | null) => void) | null;
+    value: string | null;
+
+    private _isOpen: boolean = false;
+    private _selectedHour: number = 0;
+    private _selectedMinute: number = 0;
+    private _selectedSecond: number = 0;
+    private _selectedPeriod: Period = 'AM';
+
+    private _trigger: HTMLElement | null = null;
+    private _input: HTMLInputElement | null = null;
+    private _error: HTMLElement | null = null;
+    private _dropdown: HTMLElement | null = null;
+    private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+    constructor(config: EzTimePickerConfig = {}) {
+        super(config);
+
+        this.placeholder = config.placeholder || 'Select time...';
+        this.format = config.format || 'HH:mm';
+        this.displayFormat = config.displayFormat || config.format || 'HH:mm';
+        this.use12Hour = config.use12Hour || false;
+        this.minuteStep = config.minuteStep || 1;
+        this.showSeconds = config.showSeconds || false;
+        this.min = config.min || null;
+        this.max = config.max || null;
+        this.onTimeChange = config.onTimeChange || null;
+        this.value = config.value ?? null;
+
+        this._parseValue();
+    }
+
+    private _parseValue(): void {
+        if (!this.value) {
+            const now = new Date();
+            this._selectedHour = now.getHours();
+            this._selectedMinute = Math.floor(now.getMinutes() / this.minuteStep) * this.minuteStep;
+            this._selectedSecond = 0;
+            this._selectedPeriod = this._selectedHour >= 12 ? 'PM' : 'AM';
+            return;
+        }
+
+        const parts = this.value.split(':');
+        this._selectedHour = parseInt(parts[0], 10) || 0;
+        this._selectedMinute = parseInt(parts[1], 10) || 0;
+        this._selectedSecond = parseInt(parts[2], 10) || 0;
+        this._selectedPeriod = this._selectedHour >= 12 ? 'PM' : 'AM';
+    }
+
+    render(): HTMLElement {
+        const cfg = this.config;
+
+        if (cfg.name && cfg.formData) {
+            this.config.bind = `${cfg.formData}.${cfg.name}`;
+        }
+
+        this.el = document.createElement('div');
+        this.el.className = cls('timepicker', cfg.size, cfg.disabled && 'disabled');
+
+        this._trigger = document.createElement('div');
+        this._trigger.className = cls('trigger');
+
+        this._input = document.createElement('input');
+        this._input.type = 'text';
+        this._input.className = cls('input');
+        this._input.placeholder = this.placeholder;
+        this._input.readOnly = true;
+
+        if (cfg.name) {
+            this._input.setAttribute('data-ez-field', cfg.name);
+        }
+        if (cfg.disabled) {
+            this._input.disabled = true;
+        }
+
+        const icon = document.createElement('i');
+        icon.className = cls('icon') + ' fa-solid fa-clock';
+
+        this._trigger.appendChild(this._input);
+        this._trigger.appendChild(icon);
+        this.el.appendChild(this._trigger);
+
+        this._error = document.createElement('div');
+        this._error.className = cls('fieldError');
+        this.el.appendChild(this._error);
+
+        this._dropdown = document.createElement('div');
+        this._dropdown.className = cls('dropdown');
+        this._dropdown.style.opacity = '0';
+        this._dropdown.style.visibility = 'hidden';
+        document.body.appendChild(this._dropdown);
+
+        this._updateDisplay();
+        this._bindEvents();
+
+        return this.el;
+    }
+
+    private _updateDisplay(): void {
+        if (!this._input) return;
+        if (this.value) {
+            this._input.value = this._formatTime(this.value);
+        } else {
+            this._input.value = '';
+        }
+    }
+
+    private _formatTime(timeStr: string): string {
+        if (!timeStr) return '';
+
+        const parts = timeStr.split(':');
+        let hour = parseInt(parts[0], 10);
+        const minute = parts[1] || '00';
+        const second = parts[2] || '00';
+
+        if (this.use12Hour) {
+            const period = hour >= 12 ? 'PM' : 'AM';
+            hour = hour % 12 || 12;
+            const hourStr = hour.toString().padStart(2, '0');
+            if (this.showSeconds) {
+                return `${hourStr}:${minute}:${second} ${period}`;
+            }
+            return `${hourStr}:${minute} ${period}`;
+        }
+
+        const hourStr = hour.toString().padStart(2, '0');
+        if (this.showSeconds) {
+            return `${hourStr}:${minute}:${second}`;
+        }
+        return `${hourStr}:${minute}`;
+    }
+
+    private _buildTimePicker(): void {
+        if (!this._dropdown) return;
+        this._dropdown.innerHTML = '';
+
+        const container = document.createElement('div');
+        container.className = cls('pickerContainer');
+
+        const hoursCol = this._buildColumn('hour', this.use12Hour ? 12 : 24);
+        container.appendChild(hoursCol);
+
+        const sep1 = document.createElement('div');
+        sep1.className = cls('separator');
+        sep1.textContent = ':';
+        container.appendChild(sep1);
+
+        const minutesCol = this._buildColumn('minute', 60);
+        container.appendChild(minutesCol);
+
+        if (this.showSeconds) {
+            const sep2 = document.createElement('div');
+            sep2.className = cls('separator');
+            sep2.textContent = ':';
+            container.appendChild(sep2);
+
+            const secondsCol = this._buildColumn('second', 60);
+            container.appendChild(secondsCol);
+        }
+
+        if (this.use12Hour) {
+            const periodCol = this._buildPeriodColumn();
+            container.appendChild(periodCol);
+        }
+
+        this._dropdown.appendChild(container);
+
+        const footer = document.createElement('div');
+        footer.className = cls('footer');
+
+        const nowBtn = document.createElement('button');
+        nowBtn.type = 'button';
+        nowBtn.className = cls('nowBtn');
+        nowBtn.textContent = 'Now';
+        nowBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._selectNow();
+        });
+
+        const clearBtn = document.createElement('button');
+        clearBtn.type = 'button';
+        clearBtn.className = cls('clearBtn');
+        clearBtn.textContent = 'Clear';
+        clearBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._clearValue();
+        });
+
+        const okBtn = document.createElement('button');
+        okBtn.type = 'button';
+        okBtn.className = cls('okBtn');
+        okBtn.textContent = 'OK';
+        okBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._confirmSelection();
+        });
+
+        footer.appendChild(clearBtn);
+        footer.appendChild(nowBtn);
+        footer.appendChild(okBtn);
+        this._dropdown.appendChild(footer);
+
+        this._scrollToSelected();
+    }
+
+    private _buildColumn(type: 'hour' | 'minute' | 'second', count: number): HTMLElement {
+        const col = document.createElement('div');
+        col.className = cls('column');
+        col.dataset.type = type;
+
+        const list = document.createElement('div');
+        list.className = cls('columnList');
+
+        let start = 0;
+        let step = 1;
+
+        if (type === 'hour' && this.use12Hour) {
+            start = 1;
+            count = 12;
+        }
+        if (type === 'minute') {
+            step = this.minuteStep;
+        }
+
+        const end = type === 'hour' && this.use12Hour ? 13 : count;
+
+        for (let i = start; i < end; i += step) {
+            const item = document.createElement('div');
+            item.className = cls('columnItem');
+            item.dataset.value = String(i);
+            item.textContent = i.toString().padStart(2, '0');
+
+            let isSelected = false;
+            if (type === 'hour') {
+                if (this.use12Hour) {
+                    const displayHour = this._selectedHour % 12 || 12;
+                    isSelected = i === displayHour;
+                } else {
+                    isSelected = i === this._selectedHour;
+                }
+            } else if (type === 'minute') {
+                isSelected = i === this._selectedMinute;
+            } else if (type === 'second') {
+                isSelected = i === this._selectedSecond;
+            }
+
+            if (isSelected) {
+                item.classList.add(cls('selected'));
+            }
+
+            if (this._isTimeDisabled(type, i)) {
+                item.classList.add(cls('disabled'));
+            } else {
+                item.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._selectValue(type, i);
+                });
+            }
+
+            list.appendChild(item);
+        }
+
+        col.appendChild(list);
+        return col;
+    }
+
+    private _buildPeriodColumn(): HTMLElement {
+        const col = document.createElement('div');
+        col.className = cls('column', 'periodColumn');
+
+        const list = document.createElement('div');
+        list.className = cls('columnList');
+
+        (['AM', 'PM'] as Period[]).forEach(period => {
+            const item = document.createElement('div');
+            item.className = cls('columnItem', 'periodItem');
+            item.dataset.value = period;
+            item.textContent = period;
+
+            if (period === this._selectedPeriod) {
+                item.classList.add(cls('selected'));
+            }
+
+            item.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this._selectPeriod(period);
+            });
+
+            list.appendChild(item);
+        });
+
+        col.appendChild(list);
+        return col;
+    }
+
+    private _isTimeDisabled(_type: string, _value: number): boolean {
+        return false;
+    }
+
+    private _selectValue(type: 'hour' | 'minute' | 'second', value: number): void {
+        if (type === 'hour') {
+            if (this.use12Hour) {
+                if (this._selectedPeriod === 'PM' && value !== 12) {
+                    this._selectedHour = value + 12;
+                } else if (this._selectedPeriod === 'AM' && value === 12) {
+                    this._selectedHour = 0;
+                } else {
+                    this._selectedHour = value;
+                }
+            } else {
+                this._selectedHour = value;
+            }
+        } else if (type === 'minute') {
+            this._selectedMinute = value;
+        } else if (type === 'second') {
+            this._selectedSecond = value;
+        }
+
+        this._buildTimePicker();
+    }
+
+    private _selectPeriod(period: Period): void {
+        const oldPeriod = this._selectedPeriod;
+        this._selectedPeriod = period;
+
+        if (oldPeriod !== period) {
+            if (period === 'PM' && this._selectedHour < 12) {
+                this._selectedHour += 12;
+            } else if (period === 'AM' && this._selectedHour >= 12) {
+                this._selectedHour -= 12;
+            }
+        }
+
+        this._buildTimePicker();
+    }
+
+    private _selectNow(): void {
+        const now = new Date();
+        this._selectedHour = now.getHours();
+        this._selectedMinute = Math.floor(now.getMinutes() / this.minuteStep) * this.minuteStep;
+        this._selectedSecond = now.getSeconds();
+        this._selectedPeriod = this._selectedHour >= 12 ? 'PM' : 'AM';
+
+        this._confirmSelection();
+    }
+
+    private _clearValue(): void {
+        this.value = null;
+        this._updateDisplay();
+        this._close();
+
+        if (this.onTimeChange) {
+            this.onTimeChange(null);
+        }
+    }
+
+    private _confirmSelection(): void {
+        const hour = this._selectedHour.toString().padStart(2, '0');
+        const minute = this._selectedMinute.toString().padStart(2, '0');
+        const second = this._selectedSecond.toString().padStart(2, '0');
+
+        if (this.showSeconds) {
+            this.value = `${hour}:${minute}:${second}`;
+        } else {
+            this.value = `${hour}:${minute}`;
+        }
+
+        this._updateDisplay();
+        this._close();
+
+        if (this.onTimeChange) {
+            this.onTimeChange(this.value);
+        }
+    }
+
+    private _scrollToSelected(): void {
+        if (!this._dropdown) return;
+
+        setTimeout(() => {
+            this._dropdown!.querySelectorAll(`.${cls('column')}`).forEach(col => {
+                const selected = col.querySelector(`.${cls('selected')}`);
+                if (selected) {
+                    const list = col.querySelector(`.${cls('columnList')}`) as HTMLElement | null;
+                    if (list) {
+                        const itemHeight = (selected as HTMLElement).offsetHeight;
+                        const scrollTop = (selected as HTMLElement).offsetTop - (list.offsetHeight / 2) + (itemHeight / 2);
+                        list.scrollTop = Math.max(0, scrollTop);
+                    }
+                }
+            });
+        }, 0);
+    }
+
+    private _bindEvents(): void {
+        if (!this._trigger || !this._input) return;
+
+        this._trigger.addEventListener('click', (e) => {
+            if (this.config.disabled) return;
+            e.stopPropagation();
+            this._isOpen ? this._close() : this._open();
+        });
+
+        this._outsideClickHandler = (e: MouseEvent) => {
+            if (!this.el.contains(e.target as Node) && !this._dropdown?.contains(e.target as Node)) {
+                this._close();
+            }
+        };
+        document.addEventListener('click', this._outsideClickHandler);
+
+        this._input.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this._close();
+            } else if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._isOpen ? this._close() : this._open();
+            }
+        });
+    }
+
+    private _open(): void {
+        if (this._isOpen) return;
+        this._isOpen = true;
+
+        this._parseValue();
+        this._buildTimePicker();
+        this.el.classList.add(cls('isOpen'));
+        this._positionDropdown();
+
+        if (this._dropdown) {
+            this._dropdown.style.opacity = '1';
+            this._dropdown.style.visibility = 'visible';
+        }
+    }
+
+    private _positionDropdown(): void {
+        if (!this._trigger || !this._dropdown) return;
+
+        const rect = this._trigger.getBoundingClientRect();
+        const dropdownHeight = 280;
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+
+        this._dropdown.style.position = 'fixed';
+        this._dropdown.style.left = `${rect.left}px`;
+        this._dropdown.style.width = `${Math.max(rect.width, 200)}px`;
+        this._dropdown.style.zIndex = '9999';
+
+        if (spaceBelow < dropdownHeight && rect.top > spaceBelow) {
+            this._dropdown.style.bottom = `${viewportHeight - rect.top + 4}px`;
+            this._dropdown.style.top = 'auto';
+        } else {
+            this._dropdown.style.top = `${rect.bottom + 4}px`;
+            this._dropdown.style.bottom = 'auto';
+        }
+    }
+
+    private _close(): void {
+        if (!this._isOpen) return;
+        this._isOpen = false;
+        this.el.classList.remove(cls('isOpen'));
+
+        if (this._dropdown) {
+            this._dropdown.style.opacity = '0';
+            this._dropdown.style.visibility = 'hidden';
+        }
+    }
+
+    setValue(value: string | null): void {
+        this.value = value;
+        this._parseValue();
+        this._updateDisplay();
+    }
+
+    getValue(): string | null {
+        return this.value;
+    }
+
+    showError(message: string): void {
+        this.el.classList.add(cls('hasError'));
+        if (this._error) {
+            this._error.classList.add(cls('fieldErrorVisible'));
+            this._error.textContent = message;
+        }
+    }
+
+    clearError(): void {
+        this.el.classList.remove(cls('hasError'));
+        if (this._error) {
+            this._error.classList.remove(cls('fieldErrorVisible'));
+            this._error.textContent = '';
+        }
+    }
+
+    destroy(): void {
+        if (this._outsideClickHandler) {
+            document.removeEventListener('click', this._outsideClickHandler);
+        }
+        if (this._dropdown && this._dropdown.parentNode) {
+            this._dropdown.parentNode.removeChild(this._dropdown);
+        }
+        super.destroy();
+    }
+}