@dodlhuat/basix 1.2.0 → 1.2.2

package/js/tooltip.ts

@@ -1,252 +1,185 @@
-// 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 };
+// tooltip.ts
+import { computePosition } from './position.js';
+import type { Placement } from './position.js';
+
+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 { left, top, placement } = computePosition(
+            this.trigger.getBoundingClientRect(),
+            this.tooltipElement.getBoundingClientRect(),
+            { placement: this.options.position, offset: this.options.offset }
+        );
+
+        this.tooltipElement.style.left = `${left}px`;
+        this.tooltipElement.style.top  = `${top}px`;
+        this.tooltipElement.setAttribute('data-position', placement);
+    }
+
+    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/tsconfig.json

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

package/js/utils.ts

@@ -1,84 +1,84 @@
-/**
- * Utility functions for DOM manipulation and element handling
- */
-
-interface Utils {
-    ready(fn: () => void): void;
-    value(element: HTMLElement): string;
-    text(element: HTMLElement): string;
-    attribute(element: HTMLElement, attribute: string): string | undefined;
-    isList(element: HTMLElement | NodeList): boolean;
-    isHidden(element: HTMLElement): boolean;
-}
-
-const utils: Utils = {
-    /**
-     * Execute a function when the DOM is ready
-     * @param fn - Callback function to execute
-     */
-    ready(fn: () => void): void {
-        if (document.readyState === "complete" || document.readyState === "interactive") {
-            setTimeout(fn, 1);
-        } else {
-            document.addEventListener("DOMContentLoaded", fn);
-        }
-    },
-
-    /**
-     * Get the value of an element from various sources
-     * Priority: value attribute > data-value attribute > innerText
-     * @param element - HTML element to get value from
-     * @returns The element's value as a string
-     */
-    value(element: HTMLElement): string {
-        if (element.hasAttribute('value')) {
-            return element.getAttribute('value') || '';
-        }
-        if (element.hasAttribute('data-value')) {
-            return element.getAttribute('data-value') || '';
-        }
-        return element.innerText;
-    },
-
-    /**
-     * Get the text content of an element
-     * @param element - HTML element to get text from
-     * @returns The element's inner text
-     */
-    text(element: HTMLElement): string {
-        return element.innerText;
-    },
-
-    /**
-     * Get an attribute value from an element
-     * @param element - HTML element to get attribute from
-     * @param attribute - Name of the attribute to retrieve
-     * @returns The attribute value or undefined if not present
-     */
-    attribute(element: HTMLElement, attribute: string): string | undefined {
-        if (element.hasAttribute(attribute)) {
-            return element.getAttribute(attribute) || undefined;
-        }
-        return undefined;
-    },
-
-    /**
-     * Check if an element is a NodeList
-     * @param element - Element or NodeList to check
-     * @returns True if the element is a NodeList
-     */
-    isList(element: HTMLElement | NodeList): element is NodeList {
-        return NodeList.prototype.isPrototypeOf(element);
-    },
-
-    /**
-     * Check if an element is hidden
-     * @param element - HTML element to check
-     * @returns True if the element is hidden
-     */
-    isHidden(element: HTMLElement): boolean {
-        return element.offsetParent === null;
-    }
-};
-
+/**
+ * Utility functions for DOM manipulation and element handling
+ */
+
+interface Utils {
+    ready(fn: () => void): void;
+    value(element: HTMLElement): string;
+    text(element: HTMLElement): string;
+    attribute(element: HTMLElement, attribute: string): string | undefined;
+    isList(element: HTMLElement | NodeList): boolean;
+    isHidden(element: HTMLElement): boolean;
+}
+
+const utils: Utils = {
+    /**
+     * Execute a function when the DOM is ready
+     * @param fn - Callback function to execute
+     */
+    ready(fn: () => void): void {
+        if (document.readyState === "complete" || document.readyState === "interactive") {
+            setTimeout(fn, 1);
+        } else {
+            document.addEventListener("DOMContentLoaded", fn);
+        }
+    },
+
+    /**
+     * Get the value of an element from various sources
+     * Priority: value attribute > data-value attribute > innerText
+     * @param element - HTML element to get value from
+     * @returns The element's value as a string
+     */
+    value(element: HTMLElement): string {
+        if (element.hasAttribute('value')) {
+            return element.getAttribute('value') || '';
+        }
+        if (element.hasAttribute('data-value')) {
+            return element.getAttribute('data-value') || '';
+        }
+        return element.innerText;
+    },
+
+    /**
+     * Get the text content of an element
+     * @param element - HTML element to get text from
+     * @returns The element's inner text
+     */
+    text(element: HTMLElement): string {
+        return element.innerText;
+    },
+
+    /**
+     * Get an attribute value from an element
+     * @param element - HTML element to get attribute from
+     * @param attribute - Name of the attribute to retrieve
+     * @returns The attribute value or undefined if not present
+     */
+    attribute(element: HTMLElement, attribute: string): string | undefined {
+        if (element.hasAttribute(attribute)) {
+            return element.getAttribute(attribute) || undefined;
+        }
+        return undefined;
+    },
+
+    /**
+     * Check if an element is a NodeList
+     * @param element - Element or NodeList to check
+     * @returns True if the element is a NodeList
+     */
+    isList(element: HTMLElement | NodeList): element is NodeList {
+        return NodeList.prototype.isPrototypeOf(element);
+    },
+
+    /**
+     * Check if an element is hidden
+     * @param element - HTML element to check
+     * @returns True if the element is hidden
+     */
+    isHidden(element: HTMLElement): boolean {
+        return element.offsetParent === null;
+    }
+};
+
 export { utils };