@dodlhuat/basix 1.2.0 → 1.2.1

package/js/toast.ts

@@ -1,138 +1,138 @@
-type ToastType = 'success' | 'error' | 'warning' | 'info';
-
-interface ToastOptions {
-    content: string;
-    header?: string;
-    type?: ToastType;
-    closeable?: boolean;
-}
-
-class Toast {
-    private readonly content: string;
-    private readonly header: string;
-    private readonly type?: ToastType;
-    private readonly closeable: boolean;
-    private readonly closureIcon: string = '<div class="icon icon-close close"></div>';
-    private readonly template: string;
-    private toastElement: HTMLDivElement | null = null;
-    private timerId: number | null = null;
-
-    constructor(options: ToastOptions);
-    constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
-    constructor(
-        contentOrOptions: string | ToastOptions,
-        header: string = '',
-        type?: ToastType,
-        closeable: boolean = true
-    ) {
-        if (typeof contentOrOptions === 'object') {
-            this.content = contentOrOptions.content;
-            this.header = contentOrOptions.header ?? '';
-            this.type = contentOrOptions.type;
-            this.closeable = contentOrOptions.closeable ?? true;
-        } else {
-            this.content = contentOrOptions;
-            this.header = header;
-            this.type = type;
-            this.closeable = closeable;
-        }
-
-        this.template = this.buildTemplate();
-    }
-
-    public show(ms?: number): void {
-        const div = document.createElement('div');
-        div.className = 'toast';
-
-        if (this.type) {
-            div.classList.add(this.type);
-        }
-
-        div.innerHTML = this.template;
-        document.body.appendChild(div);
-        this.toastElement = div;
-
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                this.toastElement?.classList.add('show');
-
-                const closeButton = this.toastElement?.querySelector<HTMLElement>('.close');
-                if (closeButton) {
-                    closeButton.addEventListener('click', this.handleClose);
-                }
-
-                if (ms !== undefined && ms > 0) {
-                    this.startTimer(ms);
-                }
-            });
-        });
-    }
-
-    public hide = (): void => {
-        if (this.timerId !== null) {
-            clearTimeout(this.timerId);
-            this.timerId = null;
-        }
-
-        this.toastElement?.classList.remove('show');
-
-        setTimeout(() => {
-            const closeButton = this.toastElement?.querySelector<HTMLElement>('.close');
-            if (closeButton) {
-                closeButton.removeEventListener('click', this.handleClose);
-            }
-
-            this.toastElement?.remove();
-            this.toastElement = null;
-        }, 150);
-    };
-
-    private handleClose = (): void => {
-        this.hide();
-    };
-
-    private startTimer(ms: number, elapsed: number = 0): void {
-        const stepSize = 250;
-
-        if (elapsed >= ms) {
-            this.hide();
-            return;
-        }
-
-        this.timerId = window.setTimeout(() => {
-            elapsed += stepSize;
-            const width = 100 - (100 / ms) * elapsed;
-
-            const barElement = this.toastElement?.querySelector<HTMLElement>('.bar');
-            if (barElement) {
-                barElement.style.width = `${width}%`;
-                this.startTimer(ms, elapsed);
-            }
-        }, stepSize);
-    }
-
-    private buildTemplate(): string {
-        const parts: string[] = ['<div class="bar"></div>'];
-
-        if (this.closeable) {
-            parts.push(this.closureIcon);
-        }
-
-        if (this.header) {
-            parts.push(`<div class="header">${this.escapeHtml(this.header)}</div>`);
-        }
-
-        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
-
-        return parts.join('');
-    }
-
-    private escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-}
-
-export { Toast };
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface ToastOptions {
+    content: string;
+    header?: string;
+    type?: ToastType;
+    closeable?: boolean;
+}
+
+class Toast {
+    private readonly content: string;
+    private readonly header: string;
+    private readonly type?: ToastType;
+    private readonly closeable: boolean;
+    private readonly closureIcon: string = '<div class="icon icon-close close"></div>';
+    private readonly template: string;
+    private toastElement: HTMLDivElement | null = null;
+    private timerId: number | null = null;
+
+    constructor(options: ToastOptions);
+    constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
+    constructor(
+        contentOrOptions: string | ToastOptions,
+        header: string = '',
+        type?: ToastType,
+        closeable: boolean = true
+    ) {
+        if (typeof contentOrOptions === 'object') {
+            this.content = contentOrOptions.content;
+            this.header = contentOrOptions.header ?? '';
+            this.type = contentOrOptions.type;
+            this.closeable = contentOrOptions.closeable ?? true;
+        } else {
+            this.content = contentOrOptions;
+            this.header = header;
+            this.type = type;
+            this.closeable = closeable;
+        }
+
+        this.template = this.buildTemplate();
+    }
+
+    public show(ms?: number): void {
+        const div = document.createElement('div');
+        div.className = 'toast';
+
+        if (this.type) {
+            div.classList.add(this.type);
+        }
+
+        div.innerHTML = this.template;
+        document.body.appendChild(div);
+        this.toastElement = div;
+
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.toastElement?.classList.add('show');
+
+                const closeButton = this.toastElement?.querySelector<HTMLElement>('.close');
+                if (closeButton) {
+                    closeButton.addEventListener('click', this.handleClose);
+                }
+
+                if (ms !== undefined && ms > 0) {
+                    this.startTimer(ms);
+                }
+            });
+        });
+    }
+
+    public hide = (): void => {
+        if (this.timerId !== null) {
+            clearTimeout(this.timerId);
+            this.timerId = null;
+        }
+
+        this.toastElement?.classList.remove('show');
+
+        setTimeout(() => {
+            const closeButton = this.toastElement?.querySelector<HTMLElement>('.close');
+            if (closeButton) {
+                closeButton.removeEventListener('click', this.handleClose);
+            }
+
+            this.toastElement?.remove();
+            this.toastElement = null;
+        }, 150);
+    };
+
+    private handleClose = (): void => {
+        this.hide();
+    };
+
+    private startTimer(ms: number, elapsed: number = 0): void {
+        const stepSize = 250;
+
+        if (elapsed >= ms) {
+            this.hide();
+            return;
+        }
+
+        this.timerId = window.setTimeout(() => {
+            elapsed += stepSize;
+            const width = 100 - (100 / ms) * elapsed;
+
+            const barElement = this.toastElement?.querySelector<HTMLElement>('.bar');
+            if (barElement) {
+                barElement.style.width = `${width}%`;
+                this.startTimer(ms, elapsed);
+            }
+        }, stepSize);
+    }
+
+    private buildTemplate(): string {
+        const parts: string[] = ['<div class="bar"></div>'];
+
+        if (this.closeable) {
+            parts.push(this.closureIcon);
+        }
+
+        if (this.header) {
+            parts.push(`<div class="header">${this.escapeHtml(this.header)}</div>`);
+        }
+
+        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
+
+        return parts.join('');
+    }
+
+    private escapeHtml(text: string): string {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+export { Toast };
 export type { ToastOptions, ToastType };

package/js/tooltip.js

@@ -1,3 +1,5 @@
+// tooltip.ts
+import { computePosition } from './position.js';
 class Tooltip {
     constructor(trigger, content, options = {}) {
         this.tooltipElement = null;
@@ -105,66 +107,10 @@ class Tooltip {
     position() {
         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);
-    }
-    determineAutoPosition(triggerRect, tooltipRect) {
-        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';
-    }
-    calculatePosition(position, triggerRect, tooltipRect) {
-        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 };
+        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);
     }
     attachEvents() {
         this.trigger.addEventListener('mouseenter', this.handleMouseEnter);