@dodlhuat/basix 1.0.0

package/js/carousel.ts

@@ -0,0 +1,173 @@
+interface CarouselOptions {
+    loop?: boolean;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+}
+
+class Carousel {
+    private root: HTMLElement;
+    private options: CarouselOptions;
+    private track!: HTMLUListElement;
+    private slides!: HTMLElement[];
+    private slideWidth!: number;
+    private currentIndex!: number;
+    private prevButton!: HTMLButtonElement;
+    private nextButton!: HTMLButtonElement;
+    private dotsNav!: HTMLDivElement;
+    private dots!: HTMLButtonElement[];
+
+    constructor(elementOrSelector: string | HTMLElement, options: CarouselOptions = {}) {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector<HTMLElement>(elementOrSelector)
+            : elementOrSelector;
+
+        this.options = {
+            loop: options.loop ?? false,
+            autoPlay: options.autoPlay ?? false,
+            autoPlayInterval: options.autoPlayInterval ?? 3000
+        };
+
+        if (!element) {
+            throw new Error(`Carousel: Element not found for selector "${elementOrSelector}"`);
+        }
+
+        this.root = element;
+
+        this.init();
+    }
+
+    private init(): void {
+        this.setupDOM();
+        this.slides = Array.from(this.track.children) as HTMLElement[];
+        this.slideWidth = this.slides[0].getBoundingClientRect().width;
+        this.currentIndex = 0;
+        this.bindEvents();
+        this.updateDots(0);
+        if (this.options.autoPlay) {
+            this.startAutoPlay();
+        }
+    }
+
+    private setupDOM(): void {
+        const slides = Array.from(this.root.children) as HTMLElement[];
+        const container = document.createElement('div');
+        container.classList.add('carousel-track-container');
+
+        this.track = document.createElement('ul');
+        this.track.classList.add('carousel-track');
+
+        slides.forEach(slide => {
+            slide.classList.add('carousel-slide');
+            this.track.appendChild(slide);
+        });
+
+        container.appendChild(this.track);
+        this.root.appendChild(container);
+
+        this.prevButton = document.createElement('button');
+        this.prevButton.classList.add('carousel-button', 'carousel-button--left');
+        this.prevButton.innerHTML = '<span class="icon-navigate_before icon"></span>';
+        this.prevButton.setAttribute('aria-label', 'Previous Slide');
+
+        this.nextButton = document.createElement('button');
+        this.nextButton.classList.add('carousel-button', 'carousel-button--right');
+        this.nextButton.innerHTML = '<span class="icon-navigate_next icon"></span>';
+        this.nextButton.setAttribute('aria-label', 'Next Slide');
+
+        this.root.appendChild(this.prevButton);
+        this.root.appendChild(this.nextButton);
+
+        this.dotsNav = document.createElement('div');
+        this.dotsNav.classList.add('carousel-nav');
+
+        this.dots = [];
+        slides.forEach((_, index) => {
+            const dot = document.createElement('button');
+            dot.classList.add('carousel-indicator');
+            dot.setAttribute('aria-label', `Slide ${index + 1}`);
+            this.dotsNav.appendChild(dot);
+            this.dots.push(dot);
+        });
+
+        this.root.appendChild(this.dotsNav);
+    }
+
+    private bindEvents(): void {
+        this.nextButton.addEventListener('click', () => this.moveToNextSlide());
+        this.prevButton.addEventListener('click', () => this.moveToPrevSlide());
+
+        this.dotsNav.addEventListener('click', (e: MouseEvent) => {
+            const targetDot = (e.target as HTMLElement).closest('button');
+            if (!targetDot) return;
+
+            const targetIndex = this.dots.findIndex(dot => dot === targetDot);
+            this.moveToSlide(targetIndex);
+        });
+
+        window.addEventListener('resize', () => {
+            this.slideWidth = this.slides[0].getBoundingClientRect().width;
+            this.moveToSlide(this.currentIndex, false);
+        });
+
+        this.addTouchSupport();
+    }
+
+    private moveToSlide(targetIndex: number, animate: boolean = true): void {
+        if (targetIndex < 0) {
+            if (this.options.loop) targetIndex = this.slides.length - 1;
+            else targetIndex = 0;
+        } else if (targetIndex >= this.slides.length) {
+            if (this.options.loop) targetIndex = 0;
+            else targetIndex = this.slides.length - 1;
+        }
+
+        const amountToMove = -1 * (this.slideWidth * targetIndex);
+        this.track.style.transform = `translateX(${amountToMove}px)`;
+
+        this.updateDots(targetIndex);
+        this.currentIndex = targetIndex;
+    }
+
+    private moveToNextSlide(): void {
+        this.moveToSlide(this.currentIndex + 1);
+    }
+
+    private moveToPrevSlide(): void {
+        this.moveToSlide(this.currentIndex - 1);
+    }
+
+    private updateDots(targetIndex: number): void {
+        this.dots.forEach(dot => dot.classList.remove('current-slide'));
+        this.dots[targetIndex].classList.add('current-slide');
+    }
+
+    private addTouchSupport(): void {
+        let startX = 0;
+        let isDragging = false;
+
+        this.track.addEventListener('touchstart', (e: TouchEvent) => {
+            startX = e.touches[0].clientX;
+            isDragging = true;
+        }, { passive: true });
+
+        this.track.addEventListener('touchend', (e: TouchEvent) => {
+            if (!isDragging) return;
+            const endX = e.changedTouches[0].clientX;
+            const diffX = startX - endX;
+
+            if (Math.abs(diffX) > 50) {
+                if (diffX > 0) this.moveToNextSlide();
+                else this.moveToPrevSlide();
+            }
+            isDragging = false;
+        });
+    }
+
+    private startAutoPlay(): void {
+        setInterval(() => {
+            this.moveToNextSlide();
+        }, this.options.autoPlayInterval);
+    }
+}
+export { Carousel };
+export type { CarouselOptions };

package/js/chart.js

@@ -0,0 +1,257 @@
+class ChartConfig {
+    constructor() {
+        this.minVal = 19;
+        this.maxVal = 81;
+        this.gridLines = [19, 27, 34, 38, 41, 45, 47, 50, 53, 55, 59, 62, 66, 73, 81];
+        this.zoneBoundaries = [43, 55]; // Left < 43, 43 <= Mid <= 55, Right > 55
+        this.rowHeight = 40; // Must match CSS .chart-row height
+        this.headerHeight = 40; // Must match CSS #chart-container padding-top
+        this.infoColumnWidth = 350; // Must match CSS .row-info width
+        this.valueSpans = [
+            {min: 19, max: 23, text: "Bad"},
+            {min: 24, max: 38, text: "Better"},
+            {min: 39, max: 44, text: "Ok"},
+            {min: 45, max: 55, text: "Good"},
+            {min: 56, max: 81, text: "Excellent"}
+        ];
+    }
+}
+
+class Row {
+    constructor(data) {
+        this.id = data.id;
+        this.position = data.position;
+        this.name = data.name;
+        this.description = data.description || '';
+        this.value = data.value;
+    }
+
+    render() {
+        const div = document.createElement('div');
+        div.className = 'chart-row';
+        div.innerHTML = `
+            <div class="row-info">
+                <div class="row-name">${this.name}</div>
+                <div class="row-meta">${this.description ? this.description : ''}</div>
+            </div>
+        `;
+        return div;
+    }
+}
+
+class Chart {
+    constructor(containerId, data) {
+        this.container = document.getElementById(containerId);
+        this.data = data.map(d => new Row(d));
+        this.config = new ChartConfig();
+
+        // Sort data by position just in case
+        this.data.sort((a, b) => a.position - b.position);
+
+        // Create tooltip element
+        this.tooltip = document.createElement('div');
+        this.tooltip.className = 'chart-tooltip';
+        this.tooltip.style.display = 'none';
+        document.body.appendChild(this.tooltip);
+
+        // Handle resize
+        window.addEventListener('resize', () => {
+            this.render();
+        });
+    }
+
+    // Helper to map value to percentage width
+    // The chart area starts after the info column.
+    // But wait, the prompt implies the values 19-81 are the positions.
+    // If the grid lines are fixed at 19...81, then the X axis represents this range.
+    // So 19 is 0% (or left edge of graph area) and 81 is 100% (or right edge).
+    getPercentage(value) {
+        const range = this.config.maxVal - this.config.minVal;
+        // Clamp value
+        const clamped = Math.max(this.config.minVal, Math.min(this.config.maxVal, value));
+        return ((clamped - this.config.minVal) / range) * 100;
+    }
+
+    updateRowValue(id, newValue) {
+        const row = this.data.find(r => r.id === id);
+        if (row) {
+            row.value = Math.max(this.config.minVal, Math.min(this.config.maxVal, newValue));
+            this.render(); // Re-render to update line and dots
+        }
+    }
+
+    render() {
+        this.container.innerHTML = '';
+
+        // 1. Render Background Zones
+        this.renderBackgroundZones();
+
+        // 2. Render Grid Lines
+        this.renderGridLines();
+
+        // 3. Render Content Rows
+        const contentLayer = document.createElement('div');
+        contentLayer.className = 'chart-content';
+        this.data.forEach(row => {
+            contentLayer.appendChild(row.render());
+        });
+        this.container.appendChild(contentLayer);
+
+        // 4. Render Connecting Line (SVG)
+        this.renderLine();
+    }
+
+    renderBackgroundZones() {
+        const bgLayer = document.createElement('div');
+        bgLayer.className = 'chart-background';
+
+        // Calculate widths based on boundaries
+        // Range: 19 to 81.
+        // Zone 1: 19 to 43
+        // Zone 2: 43 to 55
+        // Zone 3: 55 to 81
+
+        const width1 = this.getPercentage(this.config.zoneBoundaries[0]);
+        const width2 = this.getPercentage(this.config.zoneBoundaries[1]) - width1;
+        const width3 = 100 - (width1 + width2);
+
+        // We need to account for the info column width which is not part of the graph area?
+        // Actually, usually in these charts, the grid is the background of the whole row or just the right side?
+        // Let's assume the graph area is to the right of the info column.
+        // We will use CSS calc or absolute positioning.
+        // To make it simple, let's make the background layer only cover the graph area.
+        // The graph area width is calc(100% - 200px).
+
+        bgLayer.style.left = `${this.config.infoColumnWidth}px`;
+        bgLayer.style.width = `calc(100% - ${this.config.infoColumnWidth}px)`;
+
+        const zone1 = document.createElement('div');
+        zone1.className = 'zone zone-left';
+        zone1.style.width = `${width1}%`;
+
+        const zone2 = document.createElement('div');
+        zone2.className = 'zone zone-mid';
+        zone2.style.width = `${width2}%`;
+
+        const zone3 = document.createElement('div');
+        zone3.className = 'zone zone-right';
+        zone3.style.width = `${width3}%`;
+
+        bgLayer.appendChild(zone1);
+        bgLayer.appendChild(zone2);
+        bgLayer.appendChild(zone3);
+
+        this.container.appendChild(bgLayer);
+    }
+
+    renderGridLines() {
+        const gridLayer = document.createElement('div');
+        gridLayer.className = 'grid-lines';
+        gridLayer.style.left = `${this.config.infoColumnWidth}px`;
+        gridLayer.style.width = `calc(100% - ${this.config.infoColumnWidth}px)`;
+
+        this.config.gridLines.forEach(val => {
+            const line = document.createElement('div');
+            line.className = 'grid-line';
+            line.style.left = `${this.getPercentage(val)}%`;
+
+            const label = document.createElement('div');
+            label.className = 'grid-label';
+            label.innerText = val;
+            label.style.left = `${this.getPercentage(val)}%`;
+
+            gridLayer.appendChild(line);
+            gridLayer.appendChild(label);
+        });
+
+        this.container.appendChild(gridLayer);
+    }
+
+    renderLine() {
+        const svgLayer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgLayer.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        svgLayer.setAttribute('class', 'chart-svg-layer');
+        // The SVG covers the whole container, but we need to map points to the graph area.
+
+        const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+        polyline.classList.add('chart-polyline');
+
+        const points = [];
+
+        // We need the actual width of the graph area to calculate X coordinates in pixels
+        // or we can use percentage coordinates if we set viewBox?
+        // Let's use getBoundingClientRect for simplicity to get pixels,
+        // but that requires the element to be in DOM. It is.
+
+        // Wait for layout? No, we can just calculate based on percentages if we use percentage in SVG?
+        // SVG doesn't support percentage points easily in polyline without viewBox.
+        // Let's use a resize observer or just calculate once.
+
+        const graphAreaWidth = this.container.clientWidth - this.config.infoColumnWidth;
+
+        this.data.forEach((row, index) => {
+            // X calculation
+            const pct = this.getPercentage(row.value);
+            const x = this.config.infoColumnWidth + (graphAreaWidth * (pct / 100));
+
+            // Y calculation: headerHeight + (index * rowHeight) + (rowHeight / 2)
+            const y = this.config.headerHeight + (index * this.config.rowHeight) + (this.config.rowHeight / 2);
+
+            points.push(`${x},${y}`);
+
+            // Draw circle for point
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.classList.add('chart-point');
+            circle.setAttribute('cx', x);
+            circle.setAttribute('cy', y);
+            circle.setAttribute('r', 10); // Increased radius
+            circle.setAttribute('fill', '#d32f2f'); // Direct fill color
+            circle.setAttribute('stroke', 'white');
+            circle.setAttribute('stroke-width', '2');
+            circle.style.pointerEvents = 'all'; // Enable pointer events for hover
+
+            // Add hover events
+            circle.addEventListener('mouseover', (e) => this.showTooltip(e, row.value));
+            circle.addEventListener('mouseout', () => this.hideTooltip());
+
+            // Add title for hover (native tooltip as backup)
+            const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+            title.textContent = `Value: ${row.value}`;
+            circle.appendChild(title);
+
+            svgLayer.appendChild(circle);
+
+            // Draw text for value
+            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            text.setAttribute('x', x); // Centered horizontally
+            text.setAttribute('y', y + 4); // Centered vertically (approx)
+            text.textContent = row.value;
+            text.setAttribute('fill', 'white'); // White text
+            text.setAttribute('font-size', '10px');
+            text.setAttribute('font-family', 'sans-serif');
+            text.setAttribute('font-weight', 'bold');
+            text.setAttribute('text-anchor', 'middle'); // Center text
+            text.style.pointerEvents = 'none'; // Let clicks pass through to circle
+            svgLayer.appendChild(text);
+        });
+
+        polyline.setAttribute('points', points.join(' '));
+        svgLayer.prepend(polyline); // Put line behind points
+
+        this.container.appendChild(svgLayer);
+    }
+
+    showTooltip(e, value) {
+        const span = this.config.valueSpans.find(s => value >= s.min && value <= s.max);
+        if (span) {
+            this.tooltip.innerText = `${span.text} (${value})`;
+            this.tooltip.style.display = 'block';
+            this.tooltip.style.left = `${e.pageX + 10}px`;
+            this.tooltip.style.top = `${e.pageY + 10}px`;
+        }
+    }
+
+    hideTooltip() {
+        this.tooltip.style.display = 'none';
+    }
+}

package/js/code-viewer.js

@@ -0,0 +1,148 @@
+class CodeViewer {
+    constructor(elementOrSelector, code, language = 'javascript') {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector(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();
+    }
+    highlight(code) {
+        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);
+        }
+    }
+    escape(str) {
+        return str
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+    highlightJavaScript(code) {
+        const strings = [];
+        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 = [];
+        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;
+    }
+    highlightHTML(code) {
+        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, attrName, eq, attrValue) => {
+                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;
+    }
+    highlightCSS(code) {
+        code = this.escape(code);
+        const comments = [];
+        code = code.replace(/(\/\*[\s\S]*?\*\/)/g, (match) => {
+            comments.push(match);
+            return `###COMMENT${comments.length - 1}###`;
+        });
+        const strings = [];
+        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;
+    }
+    async copyCode() {
+        try {
+            await navigator.clipboard.writeText(this.code);
+            const btn = this.container.querySelector('.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);
+        }
+    }
+    render() {
+        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('.copy-button');
+        if (copyButton) {
+            copyButton.addEventListener('click', () => this.copyCode());
+        }
+    }
+}
+export { CodeViewer };