@oscarpalmer/oui 0.20.0 → 0.22.0

package/src/js/tooltip.ts

@@ -1,56 +1,60 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import {attributable} from './attributable';
-import {Floatable} from './floatable';
-
-type Attributes = {
-	ariaDescribedby: string | null;
-	ariaLabelledBy: string | null;
-};
-
-type Content = {
-	attributes: Attributes;
-	element: HTMLElement;
-};
+import {attributable} from './internal/attributable';
+import {Floatable} from './internal/floatable';
 
 class Tooltip {
-	attributes: Attributes;
+	elements: HTMLElement[];
 
 	floatable: Floatable;
 
-	timer: number | undefined;
+	constructor(anchor: HTMLElement, elements: HTMLElement[]) {
+		const content = getContent();
 
-	constructor(anchor: HTMLElement, content: Content) {
-		this.attributes = content.attributes;
+		this.elements = elements;
 
 		this.floatable = new Floatable({
 			anchor,
-			content: content.element,
-			defaultPosition: 'vertical',
+			content,
+			defaultPosition: 'above',
 			interactive: false,
-			preferAbove: true,
 			positionAttribute: ATTRIBUTE_POSITION,
-		});
+			reusable: true,
+			onAfter: (active: boolean): void => {
+				if (active) {
+					content.innerHTML = '';
+
+					content.append(...this.elements);
+				}
 
-		anchor.insertAdjacentElement('afterend', content.element);
+				if (active || TOOLTIPS_ACTIVE.size > 0) {
+					return;
+				}
 
-		TOOLTIPS_ALL.set(content.element, this);
+				content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+
+				contentTimer = setTimeout(() => {
+					content.innerHTML = '';
+
+					content.remove();
+				}, delayClose);
+			},
+		});
 	}
 
 	destroy(): void {
-		const {attributes, floatable} = this;
+		const {floatable} = this;
 
 		TOOLTIPS_ACTIVE.delete(this);
+		TOOLTIPS_PENDING.delete(this);
+
 		TOOLTIPS_ALL.delete(floatable.options.anchor);
 		TOOLTIPS_ALL.delete(floatable.options.content);
 
-		reset(floatable.options.anchor, attributes);
-
-		floatable.options.content.remove();
 		floatable.destroy();
 
-		this.attributes = undefined as never;
+		this.elements = [];
 		this.floatable = undefined as never;
 	}
 }
@@ -60,78 +64,54 @@ function addTooltip(anchor: HTMLElement): void {
 		return;
 	}
 
-	const content = getContent(anchor);
+	const elements = getElements(anchor);
 
-	if (content != null) {
-		TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, content));
+	if (elements != null) {
+		TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, elements));
 	}
 }
 
-function closeTooltips(next: Tooltip | undefined): void {
-	const tooltips = [...TOOLTIPS_ACTIVE];
+function closeTooltips(current?: Tooltip): void {
+	const pending = [...TOOLTIPS_PENDING];
 
-	for (const active of tooltips) {
-		if (active === next) {
+	for (const item of pending) {
+		if (item === current) {
 			continue;
 		}
 
-		if (active.timer != null) {
-			clearTimeout(active.timer);
-		}
-
-		active.floatable?.options.content.removeAttribute('oui-tooltip-content-active');
-
-		requestAnimationFrame(() => {
-			active.timer = setTimeout(() => {
-				TOOLTIPS_ACTIVE.delete(active);
-				active.floatable?.toggle(false);
-			}, delay) as never;
-		});
+		TOOLTIPS_PENDING.delete(item);
 	}
-}
-
-function getContent(anchor: HTMLElement): Content | undefined {
-	const attributes = {
-		ariaDescribedby: anchor.getAttribute('aria-describedby'),
-		ariaLabelledBy: anchor.getAttribute('aria-labelledby'),
-	};
-
-	const wrapper = getWrapper(anchor);
 
-	const labelledElements = getElements(attributes.ariaLabelledBy);
+	const active = [...TOOLTIPS_ACTIVE];
 
-	if (labelledElements.length > 0) {
-		anchor.setAttribute('aria-labelledby', wrapper.id);
-
-		for (const element of labelledElements) {
-			wrapper.append(element);
+	for (const item of active) {
+		if (item === current) {
+			continue;
 		}
 
-		return {
-			attributes,
-			element: wrapper,
-		};
+		TOOLTIPS_ACTIVE.delete(item);
+
+		item.floatable.toggle(false);
 	}
+}
 
-	const describedElements = getElements(attributes.ariaDescribedby);
+function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
+	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
 
-	if (describedElements.length > 0) {
-		anchor.setAttribute('aria-describedby', wrapper.id);
+	if (elements.length > 0) {
+		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
+	}
 
-		for (const element of describedElements) {
-			wrapper.append(element);
-		}
+	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
 
-		return {
-			attributes,
-			element: wrapper,
-		};
+	if (elements.length > 0) {
+		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
 	}
 
-	let content = anchor.getAttribute('aria-label');
+	let content = anchor.getAttribute(ARIA_LABEL);
 
 	if (isNullableOrWhitespace(content)) {
-		content = anchor.getAttribute('aria-description');
+		content = anchor.getAttribute(ARIA_DESCRIPTION);
 	}
 
 	if (isNullableOrWhitespace(content)) {
@@ -142,15 +122,10 @@ function getContent(anchor: HTMLElement): Content | undefined {
 
 	paragraph.textContent = content;
 
-	wrapper.append(paragraph);
-
-	return {
-		attributes,
-		element: wrapper,
-	};
+	return [paragraph];
 }
 
-function getElements(attribute: string | null): HTMLElement[] {
+function findElements(attribute: string | null): HTMLElement[] {
 	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
 	const elements: HTMLElement[] = [];
 
@@ -173,24 +148,31 @@ function getElements(attribute: string | null): HTMLElement[] {
 	return elements;
 }
 
-function getWrapper(anchor: HTMLElement): HTMLElement {
-	const wrapper = document.createElement('div');
+function getContent(): HTMLElement {
+	if (contentElement != null) {
+		return contentElement;
+	}
+
+	contentElement = document.createElement('div');
 
-	wrapper.setAttribute(ATTRIBUTE_CONTENT, '');
+	contentElement.setAttribute(ATTRIBUTE_CONTENT, '');
 
-	wrapper.className = anchor.getAttribute(ATTRIBUTE_CLASS) ?? '';
-	wrapper.hidden = true;
-	wrapper.id = `${SELECTOR}-${++index}`;
-	wrapper.role = 'tooltip';
-	wrapper.tabIndex = -1;
+	contentElement.role = 'tooltip';
+	contentElement.tabIndex = -1;
 
-	return wrapper;
+	return contentElement;
 }
 
 function onActivate(event: Event): void {
 	onToggle(event, true);
 }
 
+function onChange(): void {
+	if (TOOLTIPS_ACTIVE.size === 0) {
+		return;
+	}
+}
+
 function onClick(event: Event): void {
 	if (findAncestor(event, SELECTOR_CONTENT) != null) {
 		event.stopPropagation();
@@ -206,45 +188,54 @@ function onToggle(event: Event, activate: boolean): void {
 		cancelAnimationFrame(toggle);
 	}
 
+	if (findAncestor(event, SELECTOR_CONTENT) != null) {
+		if (contentTimer != null) {
+			clearTimeout(contentTimer);
+		}
+
+		return;
+	}
+
 	toggle = requestAnimationFrame(() => {
 		toggle = undefined;
 
-		const element = findAncestor(event, SELECTOR_FULL) as HTMLElement;
+		const element = findAncestor(event, SELECTOR) as HTMLElement;
 
 		const tooltip = TOOLTIPS_ALL.get(element);
 
-		if (TOOLTIPS_ACTIVE.size > 0) {
+		if (TOOLTIPS_ACTIVE.size > 0 || TOOLTIPS_PENDING.size > 0) {
 			closeTooltips(tooltip);
 		}
 
-		if (
-			tooltip == null ||
-			tooltip.floatable.options.content.hasAttribute('oui-tooltip-content-active') === activate
-		) {
+		if (tooltip == null || tooltip.floatable.active === activate) {
 			return;
 		}
 
 		if (activate) {
-			if (tooltip.timer != null) {
-				clearTimeout(tooltip.timer);
-			}
+			clearTimeout(contentTimer);
+
+			TOOLTIPS_PENDING.add(tooltip);
+
+			contentTimer = setTimeout(() => {
+				TOOLTIPS_ACTIVE.add(tooltip);
+				TOOLTIPS_PENDING.delete(tooltip);
+
+				tooltip.floatable.options.content.style.positionAnchor =
+					tooltip.floatable.options.anchor.style.anchorName;
 
-			TOOLTIPS_ACTIVE.add(tooltip);
-			tooltip.floatable.toggle(true);
+				tooltip.floatable.toggle(true);
 
-			requestAnimationFrame(() => {
-				tooltip.floatable.options.content.setAttribute('oui-tooltip-content-active', '');
-			});
+				setTimeout(() => {
+					tooltip.floatable.options.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, '');
+				});
+			}, delayOpen);
 
 			return;
 		}
 
-		tooltip.floatable.options.content.removeAttribute('oui-tooltip-content-active');
+		TOOLTIPS_ACTIVE.delete(tooltip);
 
-		tooltip.timer ??= setTimeout(() => {
-			TOOLTIPS_ACTIVE.delete(tooltip);
-			tooltip.floatable.toggle(false);
-		}, delay) as never;
+		tooltip.floatable.toggle(false);
 	});
 }
 
@@ -254,31 +245,32 @@ function removeTooltip(element: HTMLElement): void {
 	}
 }
 
-function reset(anchor: HTMLElement, attributes: Attributes): void {
-	if (attributes.ariaDescribedby == null) {
-		anchor.removeAttribute('aria-describedby');
-	} else {
-		anchor.setAttribute('aria-describedby', attributes.ariaDescribedby);
-	}
-}
-
-function setDelay(value: number): void {
-	delay = typeof value === 'number' && value >= 0 ? value : delay;
+function setTooltipDelay(open?: number, close?: number): void {
+	delayClose = typeof close === 'number' && close >= 0 ? close : delayClose;
+	delayOpen = typeof open === 'number' && open >= 0 ? open : delayOpen;
 }
 
 //
 
-const SELECTOR = 'oui-tooltip';
+const ARIA_DESCRIBEDBY = 'aria-describedby';
 
-const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
+const ARIA_DESCRIPTION = 'aria-description';
 
-const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
+const ARIA_LABEL = 'aria-label';
 
-const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+const ARIA_LABELLEDBY = 'aria-labelledby';
 
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const ATTRIBUTE = 'oui-tooltip';
+
+const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
+
+const ATTRIBUTE_CONTENT_ACTIVE = `${ATTRIBUTE_CONTENT}-active`;
 
-const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
+const ATTRIBUTE_POSITION = `${ATTRIBUTE}-position`;
+
+const SELECTOR = `[${ATTRIBUTE}]`;
+
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 
 const EXPRESSION_WHITESPACE = /\s+/;
 
@@ -286,22 +278,30 @@ const TOOLTIPS_ACTIVE: Set<Tooltip> = new Set();
 
 const TOOLTIPS_ALL: WeakMap<HTMLElement, Tooltip> = new WeakMap();
 
-let delay = 500;
+const TOOLTIPS_PENDING: Set<Tooltip> = new Set();
+
+let contentElement: HTMLElement | undefined;
+
+let contentTimer: number | undefined;
+
+let delayClose = 250;
 
-let index = 0;
+let delayOpen = 500;
 
 let toggle: DOMHighResTimeStamp | undefined;
 
 //
 
-attributable(SELECTOR, addTooltip, removeTooltip);
+attributable(ATTRIBUTE, addTooltip, removeTooltip);
 
 on(document, 'click', onClick, {capture: true});
 on(document, 'focusin', onActivate);
 on(document, 'focusout', onDeactivate);
 on(document, 'mousemove', onActivate);
+on(window, 'resize', onChange);
+on(document, 'scroll', onChange);
 on(document, 'touchstart', onActivate);
 
 //
 
-export {setDelay};
+export {setTooltipDelay};

package/dist/js/floatable.mjs

@@ -1,284 +0,0 @@
-import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-//#region src/js/floatable.ts
-var Floatable = class {
-	active = false;
-	disabled = false;
-	frame;
-	ignoreFocus = false;
-	constructor(options) {
-		this.options = options;
-		initialize(this);
-	}
-	destroy() {
-		stop(this);
-		const state = getState();
-		state?.active.delete(this);
-		state?.mapped.delete(this.options.anchor);
-		state?.mapped.delete(this.options.content);
-		this.options.anchor = void 0;
-		this.options.content = void 0;
-	}
-	disable() {
-		if (this.disabled) return;
-		this.disabled = true;
-		stop(this);
-		getState()?.active.delete(this);
-	}
-	enable() {
-		if (!this.disabled) return;
-		this.disabled = false;
-		initialize(this);
-	}
-	toggle(active, ignoreFocus) {
-		if (this.disabled || this.active === active) return;
-		const state = getState();
-		if (state == null) return;
-		this.ignoreFocus = !active && (ignoreFocus ?? false);
-		stop(this);
-		if (active) state.active.add(this);
-		else state.active.delete(this);
-		if (this.options.interactive) if (active) state.order.push(this);
-		else {
-			const index = state.order.indexOf(this);
-			if (index > -1) state.order.splice(index, 1);
-		}
-		if (active) activate(this);
-		else deactivate(this);
-	}
-};
-function activate(floatable) {
-	floatable.active = true;
-	document.body.append(floatable.options.content);
-	floatable.options.content.hidden = false;
-	updatePosition(floatable);
-}
-function closeAbove(element) {
-	const state = getState();
-	if (state == null) return;
-	const index = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
-	if (index === -1 || index === state.order.length - 1) return;
-	while (index < state.order.length - 1) state.order.pop()?.toggle(false, true);
-}
-function closeAll() {
-	const state = getState();
-	const floatables = [...state?.active ?? []];
-	state?.active.clear();
-	for (const floatable of floatables) floatable.toggle(false, true);
-}
-function closeNonInteractive(state) {
-	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
-}
-function deactivate(floatable) {
-	floatable.active = false;
-	floatable.options.content.hidden = true;
-	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
-	floatable.options.onAfter?.(false);
-}
-function getAttribute(position, anchor, top, left) {
-	switch (position) {
-		case "horizontal":
-		case "horizontal-bottom":
-		case "horizontal-top": return position.replace("horizontal", left >= anchor.right ? "right" : "left");
-		case "vertical":
-		case "vertical-end":
-		case "vertical-start": return position.replace("vertical", top >= anchor.bottom ? "bottom" : "top");
-		default: break;
-	}
-}
-function getMargin() {
-	try {
-		const fontsize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-		if (Number.isNaN(fontsize)) return 5;
-		const margin = fontsize / 2;
-		return margin < 5 ? 5 : margin;
-	} catch {
-		return 5;
-	}
-}
-function getState() {
-	return window._oscarpalmer_oui_floatable;
-}
-function getX(anchor, content, position, margin) {
-	if (position === "above" || position === "below" || position === "vertical") {
-		const center = anchor.left + anchor.width / 2;
-		const width = content.width / 2;
-		if (center + width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
-		if (center - width - margin <= 0) return margin / 2;
-		return center - width;
-	}
-	if (position.startsWith("end")) return anchor.right;
-	if (position.startsWith("start")) return anchor.left - content.width;
-	if (position.endsWith("end")) return anchor.right - content.width - margin <= 0 ? margin / 2 : anchor.right - content.width;
-	if (position.endsWith("start")) {
-		if (anchor.left + content.width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
-		return anchor.left - margin <= 0 ? margin / 2 : anchor.left;
-	}
-	if (!position.startsWith("horizontal")) return 0;
-	if (anchor.right + content.width + margin >= document.body.clientWidth) return anchor.left - content.width;
-	return anchor.right;
-}
-function getY(anchor, content, position, margin, preferAbove) {
-	if (position === "end" || position === "start" || position === "horizontal") {
-		const center = anchor.top + anchor.height / 2;
-		const height = content.height / 2;
-		if (center + height + margin >= document.body.clientHeight) return document.body.clientHeight - content.height - margin / 2;
-		if (center - height - margin <= 0) return margin / 2;
-		return center - height;
-	}
-	if (position.startsWith("above")) return anchor.top - content.height;
-	if (position.startsWith("below")) return anchor.bottom;
-	if (position.endsWith("bottom")) return anchor.bottom - content.height - margin <= 0 ? margin / 2 : anchor.bottom - content.height;
-	if (position.endsWith("top")) return anchor.top + content.height + margin >= document.body.clientHeight ? document.body.clientHeight - content.height - margin : anchor.top;
-	if (!position.startsWith("vertical")) return 0;
-	if (preferAbove) {
-		if (anchor.top - content.height - margin <= 0 && anchor.bottom + content.height + margin <= document.body.clientHeight) return anchor.bottom;
-		return anchor.top - content.height;
-	}
-	if (anchor.bottom + content.height + margin >= document.body.clientHeight) return anchor.top - content.height;
-	return anchor.bottom;
-}
-function initialize(floatable) {
-	const { anchor, content, interactive } = floatable.options;
-	if (interactive) {
-		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
-		content.setAttribute(ATTRIBUTE_CONTENT, "");
-	}
-	content.style.position = "fixed";
-	content.style.inset = "0 auto auto 0";
-	content.style.zIndex = "10";
-	const state = getState();
-	state?.mapped.set(anchor, floatable);
-	state?.mapped.set(content, floatable);
-}
-function isDisabled(element) {
-	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
-}
-function onClick(event) {
-	const related = findAncestor(event, SELECTOR_ALL);
-	if (!(related instanceof HTMLElement)) closeAll();
-	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
-	else if (!isDisabled(related)) toggle(related);
-}
-function onKeyDown(event) {
-	if (event.key !== "Escape") return;
-	const state = getState();
-	if (state == null || state.active.size === 0) return;
-	closeNonInteractive(state);
-	const related = findAncestor(event, SELECTOR_CONTENT);
-	if (!(related instanceof HTMLElement)) return;
-	closeAbove(related);
-	const floatable = state.mapped.get(related);
-	if (floatable != null) floatable.toggle(false);
-}
-function setAttribute(position, anchor, floater, top, left) {
-	let actual;
-	if (/^(horizontal|vertical)/.test(position)) actual = getAttribute(position, anchor, top, left);
-	floater.setAttribute("position", actual ?? position);
-}
-function stop(floatable) {
-	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
-	floatable.frame = void 0;
-}
-function toggle(anchor) {
-	const floatable = getState()?.mapped.get(anchor);
-	if (floatable == null) {
-		closeAll();
-		return;
-	}
-	const active = Boolean(floatable.active);
-	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
-	if (content == null) closeAll();
-	else closeAbove(content);
-	floatable.toggle(!active);
-}
-function updatePosition(floatable) {
-	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
-	if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
-	const margin = getMargin();
-	let previousAnchor;
-	let previousContent;
-	let calculated = false;
-	let runOnAfter = false;
-	function run() {
-		const anchor = floatable.options.anchor.getBoundingClientRect();
-		const content = floatable.options.content.getBoundingClientRect();
-		if (calculated) {
-			if (previousAnchor != null && previousContent != null) {
-				if (PROPERTIES.every((property) => anchor[property] === previousAnchor[property]) && PROPERTIES.every((property) => content[property] === previousContent[property])) {
-					floatable.frame = requestAnimationFrame(run);
-					return;
-				}
-			}
-		} else calculated = true;
-		update(anchor, content);
-	}
-	function update(anchor, content) {
-		previousAnchor = anchor;
-		previousContent = content;
-		const left = getX(anchor, content, position, margin);
-		const top = getY(anchor, content, position, margin, floatable.options.preferAbove);
-		setAttribute(position, anchor, floatable.options.content, top, left);
-		if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
-		else floatable.options.content.style.height = "";
-		if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
-		else floatable.options.content.style.width = "";
-		floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-		floatable.frame = requestAnimationFrame(run);
-		if (!runOnAfter) {
-			runOnAfter = true;
-			floatable.options.onAfter?.(true);
-		}
-	}
-	floatable.frame = requestAnimationFrame(run);
-}
-const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
-const ATTRIBUTE_CONTENT = "oui-floatable-content";
-const INSERT_AFTEREND = "afterend";
-const POSITIONS = new Set([
-	"above",
-	"above-end",
-	"above-start",
-	"below",
-	"below-end",
-	"below-start",
-	"end",
-	"end-bottom",
-	"end-top",
-	"horizontal",
-	"horizontal-bottom",
-	"horizontal-top",
-	"start",
-	"start-bottom",
-	"start-top",
-	"vertical",
-	"vertical-end",
-	"vertical-start"
-]);
-const PROPERTIES = [
-	"bottom",
-	"left",
-	"right",
-	"top"
-];
-const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-if (window._oscarpalmer_oui_floatable == null) {
-	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
-		enumerable: false,
-		value: {
-			active: /* @__PURE__ */ new Set(),
-			mapped: /* @__PURE__ */ new Map(),
-			order: []
-		},
-		writable: false
-	});
-	on(document, "keydown", (event) => {
-		onKeyDown(event);
-	});
-	on(document, "click", (event) => {
-		onClick(event);
-	});
-}
-//#endregion
-export { Floatable, deactivate };