@dodlhuat/basix 1.0.0

package/js/code-viewer.ts

@@ -0,0 +1,188 @@
+type SupportedLanguage = 'javascript' | 'js' | 'html' | 'css';
+
+class CodeViewer {
+    private container: HTMLElement;
+    private code: string;
+    private language: string;
+
+    constructor(elementOrSelector: string | HTMLElement, code: string, language: SupportedLanguage = 'javascript') {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector<HTMLElement>(elementOrSelector)
+            : elementOrSelector;
+
+        if (!element) {
+            throw new Error(`CodeViewer: Element not found for selector "${elementOrSelector}"`);
+        }
+        
+        this.container = element;
+        this.code = code;
+        this.language = language.toLowerCase();
+        this.render();
+    }
+
+    private highlight(code: string): string {
+        switch(this.language) {
+            case 'javascript':
+            case 'js':
+                return this.highlightJavaScript(code);
+            case 'html':
+                return this.highlightHTML(code);
+            case 'css':
+                return this.highlightCSS(code);
+            default:
+                return this.escape(code);
+        }
+    }
+
+    private escape(str: string): string {
+        return str
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+
+    private highlightJavaScript(code: string): string {
+        const strings: string[] = [];
+
+        code = code.replace(/`(?:[^`\\]|\\[\s\S])*`/g, (match) => {
+            strings.push(match);
+            return `###STRING${strings.length - 1}###`;
+        });
+
+        code = code.replace(/"(?:[^"\\]|\\[\s\S])*"/g, (match) => {
+            strings.push(match);
+            return `###STRING${strings.length - 1}###`;
+        });
+
+        code = code.replace(/'(?:[^'\\]|\\[\s\S])*'/g, (match) => {
+            strings.push(match);
+            return `###STRING${strings.length - 1}###`;
+        });
+
+        const comments: string[] = [];
+        code = code.replace(/(\/\/.*$)/gm, (match) => {
+            comments.push(match);
+            return `###COMMENT${comments.length - 1}###`;
+        });
+        code = code.replace(/(\/\*[\s\S]*?\*\/)/g, (match) => {
+            comments.push(match);
+            return `###COMMENT${comments.length - 1}###`;
+        });
+
+        code = this.escape(code);
+
+        const keywords = 'const|let|var|function|class|if|else|for|while|return|new|this|super|extends|import|export|from|default|async|await|try|catch|throw|switch|case|break|continue';
+        code = code.replace(new RegExp(`\\b(${keywords})\\b`, 'g'), '<span class="keyword">$1</span>');
+
+        code = code.replace(/\b(\d+(?:\.\d+)?)\b/g, '<span class="number">$1</span>');
+
+        strings.forEach((str, i) => {
+            code = code.replace(`###STRING${i}###`, '<span class="string">' + this.escape(str) + '</span>');
+        });
+
+        comments.forEach((comment, i) => {
+            code = code.replace(`###COMMENT${i}###`, '<span class="comment">' + this.escape(comment) + '</span>');
+        });
+
+        return code;
+    }
+
+    private highlightHTML(code: string): string {
+        code = this.escape(code);
+
+        code = code.replace(/(&lt;!--[\s\S]*?--&gt;)/g, '###COMMENT_START###$1###COMMENT_END###');
+
+        code = code.replace(/(&lt;\/?)([a-zA-Z0-9]+)([^&]*?)(&gt;)/g, (match, open, tagName, attrs, close) => {
+            attrs = attrs.replace(/\s+([a-zA-Z-]+)(=?)(&quot;[^&]*?&quot;|&#039;[^&]*?&#039;)?/g, (m: string, attrName: string, eq: string, attrValue?: string) => {
+                let result = ' <span class="attribute">' + attrName + '</span>';
+                if (eq) result += eq;
+                if (attrValue) result += '<span class="string">' + attrValue + '</span>';
+                return result;
+            });
+
+            return open + '<span class="tag">' + tagName + '</span>' + attrs + '<span class="punctuation">' + close + '</span>';
+        });
+
+        code = code.replace(/###COMMENT_START###(.*?)###COMMENT_END###/g, '<span class="comment">$1</span>');
+
+        return code;
+    }
+
+    private highlightCSS(code: string): string {
+        code = this.escape(code);
+
+        const comments: string[] = [];
+        code = code.replace(/(\/\*[\s\S]*?\*\/)/g, (match) => {
+            comments.push(match);
+            return `###COMMENT${comments.length - 1}###`;
+        });
+
+        const strings: string[] = [];
+        code = code.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, (match) => {
+            strings.push(match);
+            return `###STRING${strings.length - 1}###`;
+        });
+
+        code = code.replace(/^([^{]+)(?={)/gm, (match) => {
+            return '<span class="selector">' + match.trim() + '</span>';
+        });
+
+        code = code.replace(/([a-z-]+)(\s*):/gi, '<span class="property">$1</span>$2:');
+
+        code = code.replace(/:\s*([0-9.]+(?:px|em|rem|%|vh|vw|s|ms)?)/g, ': <span class="number">$1</span>');
+
+        strings.forEach((str, i) => {
+            code = code.replace(`###STRING${i}###`, '<span class="string">' + str + '</span>');
+        });
+
+        comments.forEach((comment, i) => {
+            code = code.replace(`###COMMENT${i}###`, '<span class="comment">' + comment + '</span>');
+        });
+
+        return code;
+    }
+
+    private async copyCode(): Promise<void> {
+        try {
+            await navigator.clipboard.writeText(this.code);
+            const btn = this.container.querySelector<HTMLButtonElement>('.copy-button');
+            
+            if (!btn) return;
+            
+            btn.textContent = 'copied!';
+            btn.classList.add('copied');
+
+            setTimeout(() => {
+                btn.textContent = 'Copy';
+                btn.classList.remove('copied');
+            }, 2000);
+        } catch (err) {
+            console.error('Error:', err);
+        }
+    }
+
+    private render(): void {
+        const highlighted = this.highlight(this.code);
+
+        this.container.innerHTML = `
+                    <div class="code-display">
+                        <div class="code-header">
+                            <span class="code-language">${this.language}</span>
+                            <button class="copy-button">Copy</button>
+                        </div>
+                        <div class="code-content">
+                            <pre>${highlighted}</pre>
+                        </div>
+                    </div>
+                `;
+
+        const copyButton = this.container.querySelector<HTMLButtonElement>('.copy-button');
+        if (copyButton) {
+            copyButton.addEventListener('click', () => this.copyCode());
+        }
+    }
+}
+export { CodeViewer };
+export type { SupportedLanguage };

package/js/datepicker.js

@@ -0,0 +1,497 @@
+class DatePicker {
+    constructor(elementOrSelector, options = {}) {
+        this.input = typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+        if (!this.input) {
+            throw new Error(`DatePicker: Element not found for selector "${elementOrSelector}"`);
+        }
+        const timePicker = options.timePicker ?? false;
+        this.options = {
+            mode: 'single',
+            startDay: 0,
+            timePicker,
+            locales: {
+                days: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+                months: [
+                    'January', 'February', 'March', 'April', 'May', 'June',
+                    'July', 'August', 'September', 'October', 'November', 'December'
+                ]
+            },
+            format: timePicker
+                ? (date) => {
+                    const hours = String(date.getHours()).padStart(2, '0');
+                    const minutes = String(date.getMinutes()).padStart(2, '0');
+                    return `${date.toDateString()} ${hours}:${minutes}`;
+                }
+                : (date) => date.toDateString(),
+            onSelect: () => { },
+            ...options
+        };
+        this.currentDate = new Date();
+        this.selectedDate = null;
+        this.rangeStart = null;
+        this.rangeEnd = null;
+        this.viewYear = this.currentDate.getFullYear();
+        this.viewMonth = this.currentDate.getMonth();
+        this.viewMode = 'days';
+        this.yearRangeStart = this.viewYear - (this.viewYear % 12);
+        this.selectedHours = this.currentDate.getHours();
+        this.selectedMinutes = this.currentDate.getMinutes();
+        this.init();
+    }
+    init() {
+        this.createCalendarElement();
+        this.attachEvents();
+        this.render();
+    }
+    createCalendarElement() {
+        this.calendar = document.createElement('div');
+        this.calendar.className = 'datepicker';
+        document.body.appendChild(this.calendar);
+        this.backdrop = document.createElement('div');
+        this.backdrop.className = 'datepicker-backdrop';
+        document.body.appendChild(this.backdrop);
+        this.backdrop.addEventListener('click', () => this.hide());
+    }
+    attachEvents() {
+        const toggle = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (this.calendar.classList.contains('visible')) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        };
+        this.input?.addEventListener('click', toggle);
+        this.backdrop.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.hide();
+        });
+        this.handleDocumentClick = (e) => {
+            if (this.calendar.classList.contains('mobile'))
+                return;
+            const target = e.target;
+            if (!this.calendar.contains(target) && target !== this.input) {
+                this.hide();
+            }
+        };
+    }
+    show() {
+        const isMobile = window.innerWidth <= 640;
+        if (isMobile) {
+            this.calendar.classList.add('mobile');
+            this.backdrop.classList.add('visible');
+            document.body.style.overflow = 'hidden';
+            this.calendar.style.top = '';
+            this.calendar.style.left = '';
+        }
+        else {
+            this.calendar.classList.remove('mobile');
+            this.backdrop.classList.remove('visible');
+            document.body.style.overflow = '';
+            if (this.input) {
+                const rect = this.input.getBoundingClientRect();
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+                this.calendar.style.top = `${rect.bottom + scrollTop + 5}px`;
+                this.calendar.style.left = `${rect.left + scrollLeft}px`;
+                if (rect.left + 320 > window.innerWidth) {
+                    this.calendar.style.left = `${rect.right + scrollLeft - 320}px`;
+                }
+            }
+            setTimeout(() => {
+                document.addEventListener('click', this.handleDocumentClick);
+            }, 0);
+        }
+        this.calendar.classList.add('visible');
+    }
+    hide() {
+        this.calendar.classList.remove('visible');
+        this.backdrop.classList.remove('visible');
+        document.body.style.overflow = '';
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    render() {
+        this.calendar.innerHTML = '';
+        const header = this.createHeader();
+        let content;
+        if (this.viewMode === 'days') {
+            content = this.createGrid();
+        }
+        else if (this.viewMode === 'months') {
+            content = this.createMonthGrid();
+        }
+        else {
+            content = this.createYearGrid();
+        }
+        this.calendar.appendChild(header);
+        this.calendar.appendChild(content);
+        if (this.options.timePicker && this.viewMode === 'days') {
+            const timeSection = this.createTimePicker();
+            this.calendar.appendChild(timeSection);
+        }
+    }
+    createHeader() {
+        const header = document.createElement('div');
+        header.className = 'datepicker-header';
+        const prevBtn = document.createElement('button');
+        prevBtn.className = 'datepicker-nav';
+        prevBtn.innerHTML = '&lt;';
+        prevBtn.onclick = (e) => {
+            e.stopPropagation();
+            this.navigate(-1);
+        };
+        const title = document.createElement('div');
+        title.className = 'datepicker-title';
+        if (this.viewMode === 'days') {
+            const monthBtn = document.createElement('button');
+            monthBtn.className = 'datepicker-title-btn';
+            monthBtn.textContent = this.options?.locales?.months[this.viewMonth] ?? '';
+            monthBtn.onclick = (e) => {
+                e.stopPropagation();
+                this.viewMode = 'months';
+                this.render();
+            };
+            const yearBtn = document.createElement('button');
+            yearBtn.className = 'datepicker-title-btn';
+            yearBtn.textContent = String(this.viewYear);
+            yearBtn.onclick = (e) => {
+                e.stopPropagation();
+                this.viewMode = 'years';
+                this.yearRangeStart = this.viewYear - (this.viewYear % 12);
+                this.render();
+            };
+            title.appendChild(monthBtn);
+            title.appendChild(yearBtn);
+        }
+        else if (this.viewMode === 'months') {
+            const yearBtn = document.createElement('button');
+            yearBtn.className = 'datepicker-title-btn';
+            yearBtn.textContent = String(this.viewYear);
+            yearBtn.onclick = (e) => {
+                e.stopPropagation();
+                this.viewMode = 'years';
+                this.yearRangeStart = this.viewYear - (this.viewYear % 12);
+                this.render();
+            };
+            title.appendChild(yearBtn);
+        }
+        else {
+            const rangeText = document.createElement('span');
+            rangeText.style.fontWeight = '600';
+            rangeText.textContent = `${this.yearRangeStart} - ${this.yearRangeStart + 11}`;
+            title.appendChild(rangeText);
+        }
+        const nextBtn = document.createElement('button');
+        nextBtn.className = 'datepicker-nav';
+        nextBtn.innerHTML = '&gt;';
+        nextBtn.onclick = (e) => {
+            e.stopPropagation();
+            this.navigate(1);
+        };
+        header.appendChild(prevBtn);
+        header.appendChild(title);
+        header.appendChild(nextBtn);
+        return header;
+    }
+    navigate(delta) {
+        if (this.viewMode === 'days') {
+            this.changeMonth(delta);
+        }
+        else if (this.viewMode === 'months') {
+            this.viewYear += delta;
+            this.render();
+        }
+        else {
+            this.yearRangeStart += delta * 12;
+            this.render();
+        }
+    }
+    createMonthGrid() {
+        const grid = document.createElement('div');
+        grid.className = 'datepicker-grid-months';
+        this.options?.locales?.months.forEach((month, index) => {
+            const el = document.createElement('div');
+            el.className = 'datepicker-month';
+            el.textContent = month.substring(0, 3);
+            if (index === this.viewMonth) {
+                el.classList.add('selected');
+            }
+            if (index === new Date().getMonth() && this.viewYear === new Date().getFullYear()) {
+                el.classList.add('current');
+            }
+            el.onclick = (e) => {
+                e.stopPropagation();
+                this.viewMonth = index;
+                this.viewMode = 'days';
+                this.render();
+            };
+            grid.appendChild(el);
+        });
+        return grid;
+    }
+    createYearGrid() {
+        const grid = document.createElement('div');
+        grid.className = 'datepicker-grid-years';
+        for (let i = 0; i < 12; i++) {
+            const year = this.yearRangeStart + i;
+            const el = document.createElement('div');
+            el.className = 'datepicker-year';
+            el.textContent = String(year);
+            if (year === this.viewYear) {
+                el.classList.add('selected');
+            }
+            if (year === new Date().getFullYear()) {
+                el.classList.add('current');
+            }
+            el.onclick = (e) => {
+                e.stopPropagation();
+                this.viewYear = year;
+                this.viewMode = 'months';
+                this.render();
+            };
+            grid.appendChild(el);
+        }
+        return grid;
+    }
+    createGrid() {
+        const grid = document.createElement('div');
+        grid.className = 'datepicker-grid';
+        const days = this.options?.locales?.days ?? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+        const startDay = this.options.startDay ?? 0;
+        const adjustedDays = [...days.slice(startDay), ...days.slice(0, startDay)];
+        adjustedDays.forEach(day => {
+            const el = document.createElement('div');
+            el.className = 'datepicker-day-header';
+            el.textContent = day;
+            grid.appendChild(el);
+        });
+        const firstDayOfMonth = new Date(this.viewYear, this.viewMonth, 1).getDay();
+        const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+        const offset = (firstDayOfMonth - startDay + 7) % 7;
+        const prevMonthDays = new Date(this.viewYear, this.viewMonth, 0).getDate();
+        for (let i = offset - 1; i >= 0; i--) {
+            const day = document.createElement('div');
+            day.className = 'datepicker-day other-month';
+            day.textContent = String(prevMonthDays - i);
+            grid.appendChild(day);
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            const day = document.createElement('div');
+            day.className = 'datepicker-day';
+            day.textContent = String(i);
+            const date = new Date(this.viewYear, this.viewMonth, i);
+            date.setHours(0, 0, 0, 0);
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            if (date.getTime() === today.getTime()) {
+                day.classList.add('today');
+            }
+            if (this.options.mode === 'single') {
+                const selectedDay = this.selectedDate ? new Date(this.selectedDate) : null;
+                if (selectedDay)
+                    selectedDay.setHours(0, 0, 0, 0);
+                if (selectedDay && date.getTime() === selectedDay.getTime()) {
+                    day.classList.add('selected');
+                }
+            }
+            else {
+                const t = date.getTime();
+                const start = this.rangeStart ? this.rangeStart.getTime() : null;
+                const end = this.rangeEnd ? this.rangeEnd.getTime() : null;
+                if (start && t === start) {
+                    day.classList.add('range-start');
+                }
+                if (end && t === end) {
+                    day.classList.add('range-end');
+                }
+                if (start && end && t > start && t < end) {
+                    day.classList.add('in-range');
+                }
+                if (start && !end && t === start) {
+                    day.classList.add('selected');
+                }
+            }
+            day.onclick = (e) => {
+                e.stopPropagation();
+                this.handleDateClick(date);
+            };
+            grid.appendChild(day);
+        }
+        return grid;
+    }
+    createTimePicker() {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'datepicker-time';
+        const label = document.createElement('div');
+        label.className = 'datepicker-time-label';
+        label.textContent = 'Time';
+        wrapper.appendChild(label);
+        const controls = document.createElement('div');
+        controls.className = 'datepicker-time-controls';
+        // Hours spinner
+        const hoursSpinner = this.createSpinner(this.selectedHours, 0, 23, (value) => {
+            this.selectedHours = value;
+            this.applyTimeToSelection();
+        });
+        const separator = document.createElement('span');
+        separator.className = 'datepicker-time-separator';
+        separator.textContent = ':';
+        // Minutes spinner
+        const minutesSpinner = this.createSpinner(this.selectedMinutes, 0, 59, (value) => {
+            this.selectedMinutes = value;
+            this.applyTimeToSelection();
+        });
+        controls.appendChild(hoursSpinner);
+        controls.appendChild(separator);
+        controls.appendChild(minutesSpinner);
+        wrapper.appendChild(controls);
+        return wrapper;
+    }
+    createSpinner(value, min, max, onChange) {
+        const spinner = document.createElement('div');
+        spinner.className = 'datepicker-time-spinner';
+        const upBtn = document.createElement('button');
+        upBtn.className = 'datepicker-time-btn';
+        upBtn.innerHTML = '&#9650;';
+        upBtn.onclick = (e) => {
+            e.stopPropagation();
+            const next = value + 1 > max ? min : value + 1;
+            onChange(next);
+            this.render();
+        };
+        const display = document.createElement('input');
+        display.className = 'datepicker-time-display';
+        display.type = 'text';
+        display.inputMode = 'numeric';
+        display.value = String(value).padStart(2, '0');
+        display.maxLength = 2;
+        display.addEventListener('click', (e) => e.stopPropagation());
+        display.addEventListener('focus', () => display.select());
+        display.addEventListener('change', (e) => {
+            e.stopPropagation();
+            let parsed = parseInt(display.value, 10);
+            if (isNaN(parsed) || parsed < min || parsed > max) {
+                display.value = String(value).padStart(2, '0');
+                return;
+            }
+            onChange(parsed);
+            this.render();
+        });
+        display.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                const next = value + 1 > max ? min : value + 1;
+                onChange(next);
+                this.render();
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                const next = value - 1 < min ? max : value - 1;
+                onChange(next);
+                this.render();
+            }
+        });
+        const downBtn = document.createElement('button');
+        downBtn.className = 'datepicker-time-btn';
+        downBtn.innerHTML = '&#9660;';
+        downBtn.onclick = (e) => {
+            e.stopPropagation();
+            const next = value - 1 < min ? max : value - 1;
+            onChange(next);
+            this.render();
+        };
+        spinner.appendChild(upBtn);
+        spinner.appendChild(display);
+        spinner.appendChild(downBtn);
+        return spinner;
+    }
+    applyTimeToSelection() {
+        if (this.options.mode === 'single' && this.selectedDate) {
+            this.selectedDate.setHours(this.selectedHours, this.selectedMinutes, 0, 0);
+            this.updateInput(this.options.format(this.selectedDate));
+            this.options.onSelect(this.selectedDate);
+        }
+        else if (this.options.mode === 'range') {
+            if (this.rangeStart) {
+                this.rangeStart.setHours(this.selectedHours, this.selectedMinutes, 0, 0);
+            }
+            if (this.rangeStart && this.rangeEnd) {
+                const startDate = this.options.format(this.rangeStart);
+                const endDate = this.options.format(this.rangeEnd);
+                this.updateInput(`${startDate} - ${endDate}`);
+            }
+            else if (this.rangeStart) {
+                this.updateInput(this.options.format(this.rangeStart) + ' - ...');
+            }
+            this.options.onSelect({ start: this.rangeStart, end: this.rangeEnd });
+        }
+    }
+    changeMonth(delta) {
+        this.viewMonth += delta;
+        if (this.viewMonth > 11) {
+            this.viewMonth = 0;
+            this.viewYear++;
+        }
+        else if (this.viewMonth < 0) {
+            this.viewMonth = 11;
+            this.viewYear--;
+        }
+        this.render();
+    }
+    handleDateClick(date) {
+        if (this.options.timePicker) {
+            date.setHours(this.selectedHours, this.selectedMinutes, 0, 0);
+        }
+        else {
+            date.setHours(0, 0, 0, 0);
+        }
+        if (this.options.mode === 'single') {
+            this.selectedDate = date;
+            this.updateInput(this.options.format(this.selectedDate));
+            this.options.onSelect(this.selectedDate);
+            if (!this.options.timePicker) {
+                this.hide();
+            }
+        }
+        else {
+            if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
+                this.rangeStart = date;
+                this.rangeEnd = null;
+                this.updateInput(this.options.format(this.rangeStart) + ' - ...');
+            }
+            else {
+                if (date.getTime() < this.rangeStart.getTime()) {
+                    this.rangeEnd = this.rangeStart;
+                    this.rangeStart = date;
+                }
+                else {
+                    this.rangeEnd = date;
+                }
+                const startDate = this.options.format(this.rangeStart);
+                const endDate = this.options.format(this.rangeEnd);
+                if (startDate === endDate) {
+                    this.updateInput(startDate);
+                }
+                else {
+                    this.updateInput(`${startDate} - ${endDate}`);
+                }
+                if (!this.options.timePicker) {
+                    this.hide();
+                }
+            }
+            this.options.onSelect({ start: this.rangeStart, end: this.rangeEnd });
+        }
+        this.render();
+    }
+    updateInput(value) {
+        if (this.input) {
+            this.input.value = value;
+        }
+    }
+}
+export { DatePicker };