@dodlhuat/basix 1.0.0

package/js/tooltip.ts

@@ -0,0 +1,252 @@
+// tooltip.ts
+interface TooltipOptions {
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    offset?: number;
+    delay?: number;
+    className?: string;
+}
+
+class Tooltip {
+    private static activeTooltip: Tooltip | null = null;
+    private static idCounter: number = 0;
+
+    private readonly trigger: HTMLElement;
+    private readonly content: string;
+    private readonly options: Required<TooltipOptions>;
+    private tooltipElement: HTMLDivElement | null = null;
+    private showTimeout: number | null = null;
+    private isVisible: boolean = false;
+
+    constructor(trigger: HTMLElement, content: string, options: TooltipOptions = {}) {
+        this.trigger = trigger;
+        this.content = content;
+        this.options = {
+            position: options.position ?? 'auto',
+            offset: options.offset ?? 8,
+            delay: options.delay ?? 0,
+            className: options.className ?? ''
+        };
+
+        this.attachEvents();
+    }
+
+    public static initializeAll(): void {
+        const triggers = document.querySelectorAll<HTMLElement>('[data-tooltip]');
+        triggers.forEach(trigger => {
+            const content = trigger.getAttribute('data-tooltip');
+            const position = (trigger.getAttribute('data-tooltip-position') as TooltipOptions['position']) ?? 'auto';
+            const className = trigger.getAttribute('data-tooltip-class') ?? '';
+
+            if (content) {
+                new Tooltip(trigger, content, { position, className });
+            }
+        });
+
+        // Also support content from separate elements
+        const advancedTriggers = document.querySelectorAll<HTMLElement>('[data-tooltip-id]');
+        advancedTriggers.forEach(trigger => {
+            const contentId = trigger.getAttribute('data-tooltip-id');
+            const position = (trigger.getAttribute('data-tooltip-position') as TooltipOptions['position']) ?? 'auto';
+            const className = trigger.getAttribute('data-tooltip-class') ?? '';
+
+            if (contentId) {
+                const contentElement = document.getElementById(contentId);
+                if (contentElement) {
+                    const content = contentElement.innerHTML;
+                    new Tooltip(trigger, content, { position, className });
+                }
+            }
+        });
+    }
+
+    public show(): void {
+        if (this.showTimeout !== null) {
+            clearTimeout(this.showTimeout);
+        }
+
+        this.showTimeout = window.setTimeout(() => {
+            Tooltip.hideActive();
+            this.createTooltip();
+            this.position();
+            
+            requestAnimationFrame(() => {
+                this.tooltipElement?.classList.add('visible');
+                this.isVisible = true;
+            });
+
+            Tooltip.activeTooltip = this;
+        }, this.options.delay);
+    }
+
+    public hide(): void {
+        if (this.showTimeout !== null) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+
+        if (!this.tooltipElement) return;
+
+        this.tooltipElement.classList.remove('visible');
+        this.isVisible = false;
+
+        setTimeout(() => {
+            this.tooltipElement?.remove();
+            this.tooltipElement = null;
+
+            if (Tooltip.activeTooltip === this) {
+                Tooltip.activeTooltip = null;
+            }
+        }, 200);
+    }
+
+    private static hideActive(): void {
+        if (Tooltip.activeTooltip) {
+            Tooltip.activeTooltip.hide();
+        }
+    }
+
+    private createTooltip(): void {
+        const tooltip = document.createElement('div');
+        tooltip.className = 'tooltip';
+        tooltip.id = `tooltip-${++Tooltip.idCounter}`;
+        tooltip.setAttribute('role', 'tooltip');
+        tooltip.innerHTML = `<div class="tooltip-content">${this.content}</div>`;
+
+        if (this.options.className) {
+            tooltip.classList.add(this.options.className);
+        }
+
+        document.body.appendChild(tooltip);
+        this.tooltipElement = tooltip;
+
+        const previousDescribedBy = this.trigger.getAttribute('aria-describedby');
+        this.trigger.setAttribute('aria-describedby', tooltip.id);
+        this.trigger.setAttribute('data-previous-describedby', previousDescribedBy || '');
+    }
+
+    private position(): void {
+        if (!this.tooltipElement) return;
+
+        const triggerRect = this.trigger.getBoundingClientRect();
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+
+        let position = this.options.position;
+
+        if (position === 'auto') {
+            position = this.determineAutoPosition(triggerRect, tooltipRect);
+        }
+
+        const coords = this.calculatePosition(position, triggerRect, tooltipRect);
+
+        this.tooltipElement.style.left = `${coords.left}px`;
+        this.tooltipElement.style.top = `${coords.top}px`;
+        this.tooltipElement.setAttribute('data-position', position);
+    }
+
+    private determineAutoPosition(
+        triggerRect: DOMRect,
+        tooltipRect: DOMRect
+    ): 'top' | 'bottom' | 'left' | 'right' {
+        const spaceTop = triggerRect.top;
+        const spaceBottom = window.innerHeight - triggerRect.bottom;
+        const spaceLeft = triggerRect.left;
+        const spaceRight = window.innerWidth - triggerRect.right;
+
+        const canFitTop = spaceTop >= tooltipRect.height + this.options.offset;
+        const canFitBottom = spaceBottom >= tooltipRect.height + this.options.offset;
+        const canFitLeft = spaceLeft >= tooltipRect.width + this.options.offset;
+        const canFitRight = spaceRight >= tooltipRect.width + this.options.offset;
+
+        if (canFitTop && spaceTop >= Math.max(spaceBottom, spaceLeft, spaceRight)) {
+            return 'top';
+        } else if (canFitBottom && spaceBottom >= Math.max(spaceTop, spaceLeft, spaceRight)) {
+            return 'bottom';
+        } else if (canFitLeft && spaceLeft >= Math.max(spaceTop, spaceBottom, spaceRight)) {
+            return 'left';
+        } else if (canFitRight) {
+            return 'right';
+        }
+
+        return spaceBottom > spaceTop ? 'bottom' : 'top';
+    }
+
+    private calculatePosition(
+        position: 'top' | 'bottom' | 'left' | 'right',
+        triggerRect: DOMRect,
+        tooltipRect: DOMRect
+    ): { left: number; top: number } {
+        let left = 0;
+        let top = 0;
+
+        switch (position) {
+            case 'top':
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                top = triggerRect.top - tooltipRect.height - this.options.offset;
+                break;
+
+            case 'bottom':
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                top = triggerRect.bottom + this.options.offset;
+                break;
+
+            case 'left':
+                left = triggerRect.left - tooltipRect.width - this.options.offset;
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                break;
+
+            case 'right':
+                left = triggerRect.right + this.options.offset;
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                break;
+        }
+
+        // Clamp to viewport
+        const margin = 8;
+        left = Math.max(margin, Math.min(window.innerWidth - tooltipRect.width - margin, left));
+        top = Math.max(margin, Math.min(window.innerHeight - tooltipRect.height - margin, top));
+
+        return { left, top };
+    }
+
+    private attachEvents(): void {
+        this.trigger.addEventListener('mouseenter', this.handleMouseEnter);
+        this.trigger.addEventListener('mouseleave', this.handleMouseLeave);
+        this.trigger.addEventListener('focus', this.handleFocus);
+        this.trigger.addEventListener('blur', this.handleBlur);
+    }
+
+    private handleMouseEnter = (): void => {
+        this.show();
+    };
+
+    private handleMouseLeave = (): void => {
+        this.hide();
+    };
+
+    private handleFocus = (): void => {
+        this.show();
+    };
+
+    private handleBlur = (): void => {
+        this.hide();
+    };
+
+    public destroy(): void {
+        this.hide();
+        this.trigger.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.trigger.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.trigger.removeEventListener('focus', this.handleFocus);
+        this.trigger.removeEventListener('blur', this.handleBlur);
+
+        const previousDescribedBy = this.trigger.getAttribute('data-previous-describedby');
+        if (previousDescribedBy) {
+            this.trigger.setAttribute('aria-describedby', previousDescribedBy);
+        } else {
+            this.trigger.removeAttribute('aria-describedby');
+        }
+        this.trigger.removeAttribute('data-previous-describedby');
+    }
+}
+
+export { Tooltip };
+export type { TooltipOptions };

package/js/tree.js

@@ -0,0 +1,162 @@
+class TreeNode {
+    constructor(label, type = 'file', children = []) {
+        this.label = label;
+        this.type = type;
+        this.children = children;
+        this.expanded = false;
+        this.selected = false;
+        this.element = null;
+        this.childrenContainer = null;
+    }
+}
+class TreeComponent {
+    constructor(elementOrSelector, data) {
+        const container = typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+        if (!container) {
+            throw new Error(`TreeComponent: Element not found for selector "${elementOrSelector}"`);
+        }
+        this.container = container;
+        this.data = data;
+        this.selectedNode = null;
+        this.init();
+    }
+    init() {
+        this.render();
+    }
+    render() {
+        this.container.innerHTML = '';
+        this.data.forEach(node => {
+            this.renderNode(node, this.container);
+        });
+    }
+    renderNode(node, parentElement) {
+        const li = document.createElement('li');
+        li.className = 'tree-node';
+        const itemDiv = document.createElement('div');
+        itemDiv.className = `tree-item ${node.type}`;
+        if (node.selected) {
+            itemDiv.classList.add('selected');
+        }
+        if (node.expanded) {
+            itemDiv.classList.add('expanded');
+        }
+        const iconDiv = this.createIconElement(node.type);
+        const labelSpan = this.createLabelElement(node.label);
+        itemDiv.append(iconDiv, labelSpan);
+        li.appendChild(itemDiv);
+        node.element = itemDiv;
+        if (node.type === 'folder' && node.children.length > 0) {
+            const childrenUl = this.createChildrenContainer(node);
+            li.appendChild(childrenUl);
+            node.childrenContainer = childrenUl;
+            itemDiv.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.toggleNode(node);
+            });
+        }
+        else {
+            itemDiv.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.selectNode(node);
+            });
+        }
+        parentElement.appendChild(li);
+    }
+    createIconElement(type) {
+        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>
+      `;
+        }
+        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>
+      `;
+        }
+        return iconDiv;
+    }
+    createLabelElement(label) {
+        const labelSpan = document.createElement('span');
+        labelSpan.className = 'tree-label';
+        labelSpan.textContent = label;
+        return labelSpan;
+    }
+    createChildrenContainer(node) {
+        const childrenUl = document.createElement('ul');
+        childrenUl.className = 'tree-children';
+        if (node.expanded) {
+            childrenUl.classList.add('expanded');
+        }
+        node.children.forEach(child => {
+            this.renderNode(child, childrenUl);
+        });
+        return childrenUl;
+    }
+    toggleNode(node) {
+        node.expanded = !node.expanded;
+        if (node.element) {
+            node.element.classList.toggle('expanded', node.expanded);
+        }
+        if (node.childrenContainer) {
+            node.childrenContainer.classList.toggle('expanded', node.expanded);
+        }
+    }
+    selectNode(node) {
+        if (this.selectedNode?.element) {
+            this.selectedNode.element.classList.remove('selected');
+            this.selectedNode.selected = false;
+        }
+        node.selected = true;
+        node.element?.classList.add('selected');
+        this.selectedNode = node;
+        console.log('Selected:', node.label);
+    }
+    expandAll() {
+        this.traverseNodes(this.data, (node) => {
+            if (node.type === 'folder') {
+                node.expanded = true;
+                node.element?.classList.add('expanded');
+                node.childrenContainer?.classList.add('expanded');
+            }
+        });
+    }
+    collapseAll() {
+        this.traverseNodes(this.data, (node) => {
+            if (node.type === 'folder') {
+                node.expanded = false;
+                node.element?.classList.remove('expanded');
+                node.childrenContainer?.classList.remove('expanded');
+            }
+        });
+    }
+    traverseNodes(nodes, callback) {
+        nodes.forEach(node => {
+            callback(node);
+            if (node.children.length > 0) {
+                this.traverseNodes(node.children, callback);
+            }
+        });
+    }
+    getSelectedNode() {
+        return this.selectedNode;
+    }
+    findNodeByLabel(label) {
+        let result = null;
+        this.traverseNodes(this.data, (node) => {
+            if (node.label === label) {
+                result = node;
+            }
+        });
+        return result;
+    }
+}
+export { TreeComponent, TreeNode };

package/js/tree.ts

@@ -0,0 +1,218 @@
+type NodeType = 'file' | 'folder';
+
+interface TreeNodeConfig {
+  label: string;
+  type?: NodeType;
+  children?: TreeNode[];
+}
+
+class TreeNode {
+  public label: string;
+  public type: NodeType;
+  public children: TreeNode[];
+  public expanded: boolean;
+  public selected: boolean;
+  public element: HTMLDivElement | null;
+  public childrenContainer: HTMLUListElement | null;
+
+  constructor(label: string, type: NodeType = 'file', children: TreeNode[] = []) {
+    this.label = label;
+    this.type = type;
+    this.children = children;
+    this.expanded = false;
+    this.selected = false;
+    this.element = null;
+    this.childrenContainer = null;
+  }
+}
+
+class TreeComponent {
+  private container: HTMLElement;
+  private data: TreeNode[];
+  private selectedNode: TreeNode | null;
+
+  constructor(elementOrSelector: string | HTMLElement, data: TreeNode[]) {
+    const container = typeof elementOrSelector === 'string'
+      ? document.querySelector<HTMLElement>(elementOrSelector)
+      : elementOrSelector;
+
+    if (!container) {
+      throw new Error(`TreeComponent: Element not found for selector "${elementOrSelector}"`);
+    }
+    
+    this.container = container;
+    this.data = data;
+    this.selectedNode = null;
+    this.init();
+  }
+
+  private init(): void {
+    this.render();
+  }
+
+  public render(): void {
+    this.container.innerHTML = '';
+    this.data.forEach(node => {
+      this.renderNode(node, this.container);
+    });
+  }
+
+  private renderNode(node: TreeNode, parentElement: HTMLElement): void {
+    const li = document.createElement('li');
+    li.className = 'tree-node';
+
+    const itemDiv = document.createElement('div');
+    itemDiv.className = `tree-item ${node.type}`;
+    
+    if (node.selected) {
+      itemDiv.classList.add('selected');
+    }
+    
+    if (node.expanded) {
+      itemDiv.classList.add('expanded');
+    }
+
+    const iconDiv = this.createIconElement(node.type);
+    const labelSpan = this.createLabelElement(node.label);
+
+    itemDiv.append(iconDiv, labelSpan);
+    li.appendChild(itemDiv);
+
+    node.element = itemDiv;
+
+    if (node.type === 'folder' && node.children.length > 0) {
+      const childrenUl = this.createChildrenContainer(node);
+      li.appendChild(childrenUl);
+      node.childrenContainer = childrenUl;
+
+      itemDiv.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.toggleNode(node);
+      });
+    } else {
+      itemDiv.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.selectNode(node);
+      });
+    }
+
+    parentElement.appendChild(li);
+  }
+
+  private createIconElement(type: NodeType): HTMLDivElement {
+    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>
+      `;
+    } 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>
+      `;
+    }
+    
+    return iconDiv;
+  }
+
+  private createLabelElement(label: string): HTMLSpanElement {
+    const labelSpan = document.createElement('span');
+    labelSpan.className = 'tree-label';
+    labelSpan.textContent = label;
+    return labelSpan;
+  }
+
+  private createChildrenContainer(node: TreeNode): HTMLUListElement {
+    const childrenUl = document.createElement('ul');
+    childrenUl.className = 'tree-children';
+    
+    if (node.expanded) {
+      childrenUl.classList.add('expanded');
+    }
+
+    node.children.forEach(child => {
+      this.renderNode(child, childrenUl);
+    });
+
+    return childrenUl;
+  }
+
+  private toggleNode(node: TreeNode): void {
+    node.expanded = !node.expanded;
+    
+    if (node.element) {
+      node.element.classList.toggle('expanded', node.expanded);
+    }
+
+    if (node.childrenContainer) {
+      node.childrenContainer.classList.toggle('expanded', node.expanded);
+    }
+  }
+
+  public selectNode(node: TreeNode): void {
+    if (this.selectedNode?.element) {
+      this.selectedNode.element.classList.remove('selected');
+      this.selectedNode.selected = false;
+    }
+
+    node.selected = true;
+    node.element?.classList.add('selected');
+    
+    this.selectedNode = node;
+    
+    console.log('Selected:', node.label);
+  }
+
+  public expandAll(): void {
+    this.traverseNodes(this.data, (node) => {
+      if (node.type === 'folder') {
+        node.expanded = true;
+        node.element?.classList.add('expanded');
+        node.childrenContainer?.classList.add('expanded');
+      }
+    });
+  }
+
+  public collapseAll(): void {
+    this.traverseNodes(this.data, (node) => {
+      if (node.type === 'folder') {
+        node.expanded = false;
+        node.element?.classList.remove('expanded');
+        node.childrenContainer?.classList.remove('expanded');
+      }
+    });
+  }
+
+  private traverseNodes(nodes: TreeNode[], callback: (node: TreeNode) => void): void {
+    nodes.forEach(node => {
+      callback(node);
+      if (node.children.length > 0) {
+        this.traverseNodes(node.children, callback);
+      }
+    });
+  }
+
+  public getSelectedNode(): TreeNode | null {
+    return this.selectedNode;
+  }
+
+  public findNodeByLabel(label: string): TreeNode | null {
+    let result: TreeNode | null = null;
+    
+    this.traverseNodes(this.data, (node) => {
+      if (node.label === label) {
+        result = node;
+      }
+    });
+    
+    return result;
+  }
+}
+export { TreeComponent, TreeNode };
+export type { NodeType, TreeNodeConfig };

package/js/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "outDir": ".",
+    "rootDir": ".",
+    "strict": true,
+    "types": [],
+  },
+  "include": [
+    "*.ts"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "../node_modules"
+  ]
+}