@oscarpalmer/oui 0.22.1 → 0.23.0

package/src/js/tooltip.ts

@@ -1,128 +1,98 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {createElement} from '@oscarpalmer/toretto/create';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {attributable} from './internal/attributable';
-import {Floatable} from './internal/floatable';
+import {Floatable, type FloatableOptions} from './internal/floatable';
 
 class Tooltip {
-	elements: HTMLElement[];
-
 	floatable: Floatable;
 
-	constructor(anchor: HTMLElement, elements: HTMLElement[]) {
-		const content = getContent();
-
-		this.elements = elements;
-
-		this.floatable = new Floatable({
-			anchor,
-			content,
-			defaultPosition: 'above',
-			interactive: false,
-			positionAttribute: ATTRIBUTE_POSITION,
-			reusable: true,
-			onAfter: (active: boolean): void => {
-				if (active) {
-					content.innerHTML = '';
-
-					content.append(...this.elements);
-				}
+	timer: number | undefined;
 
-				if (active || TOOLTIPS_ACTIVE.size > 0) {
-					return;
-				}
+	constructor(
+		public anchor: HTMLElement,
+		public content: HTMLElement,
+	) {
+		instances.set(content, this);
 
-				content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+		anchor.insertAdjacentElement('afterend', content);
 
-				contentTimer = setTimeout(() => {
-					content.innerHTML = '';
+		this.floatable = new Floatable(anchor, content, options);
 
-					content.remove();
-				}, delayClose);
-			},
-		});
+		this.floatable.update();
 	}
 
 	destroy(): void {
-		const {floatable} = this;
+		instances.delete(this.content);
 
-		TOOLTIPS_ACTIVE.delete(this);
-		TOOLTIPS_PENDING.delete(this);
+		this.anchor = null as never;
+		this.content = null as never;
+	}
+}
 
-		TOOLTIPS_ALL.delete(floatable.options.anchor);
-		TOOLTIPS_ALL.delete(floatable.options.content);
+function activate(event: Event, focus: boolean): void {
+	const anchor = findAncestor(event, SELECTOR) as HTMLElement | null;
+	const content = findAncestor(event, SELECTOR_CONTENT) as HTMLElement | null;
 
-		floatable.destroy();
+	if (anchor == null && content == null) {
+		if (!focused) {
+			closeTooltip(active);
 
-		this.elements = [];
-		this.floatable = undefined as never;
-	}
-}
+			active = undefined;
+		}
 
-function addTooltip(anchor: HTMLElement): void {
-	if (TOOLTIPS_ALL.has(anchor)) {
 		return;
 	}
 
-	const elements = getElements(anchor);
+	const instance = instances.get((anchor ?? content)!);
 
-	if (elements != null) {
-		TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, elements));
+	if (instance == null || instance === active) {
+		return;
 	}
-}
 
-function closeTooltips(current?: Tooltip): void {
-	const pending = [...TOOLTIPS_PENDING];
+	const shouldDelay = active == null;
 
-	for (const item of pending) {
-		if (item === current) {
-			continue;
-		}
-
-		TOOLTIPS_PENDING.delete(item);
-	}
+	closeTooltip(active);
 
-	const active = [...TOOLTIPS_ACTIVE];
+	active = instance;
+	focused = focus;
 
-	for (const item of active) {
-		if (item === current) {
-			continue;
-		}
+	instance.timer = setTimeout(
+		() => {
+			instance.content.showPopover({
+				source: instance.anchor,
+			});
 
-		TOOLTIPS_ACTIVE.delete(item);
+			setTimeout(() => {
+				instance.floatable.update();
 
-		item.floatable.toggle(false);
-	}
+				instance.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, '');
+			});
+		},
+		shouldDelay ? delay : 0,
+	);
 }
 
-function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
-	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
-
-	if (elements.length > 0) {
-		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
+function closeTooltip(instance?: Tooltip): void {
+	if (instance == null) {
+		return;
 	}
 
-	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
-
-	if (elements.length > 0) {
-		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
+	if (instance.timer != null) {
+		clearTimeout(instance.timer);
 	}
 
-	let content = anchor.getAttribute(ARIA_LABEL);
+	instance.content.hidePopover();
+	instance.content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+}
 
-	if (isNullableOrWhitespace(content)) {
-		content = anchor.getAttribute(ARIA_DESCRIPTION);
-	}
+function createTooltip(anchor: HTMLElement): void {
+	const content = getContent(anchor);
 
-	if (isNullableOrWhitespace(content)) {
-		return;
+	if (content != null) {
+		instances.set(anchor, new Tooltip(anchor, content));
 	}
-
-	const paragraph = document.createElement('p');
-
-	paragraph.textContent = content;
-
-	return [paragraph];
 }
 
 function findElements(attribute: string | null): HTMLElement[] {
@@ -148,109 +118,105 @@ function findElements(attribute: string | null): HTMLElement[] {
 	return elements;
 }
 
-function getContent(): HTMLElement {
-	if (contentElement != null) {
-		return contentElement;
+function getContent(anchor: HTMLElement): HTMLElement | undefined {
+	const elements = getElements(anchor);
+
+	if (elements == null) {
+		return;
 	}
 
-	contentElement = document.createElement('div');
+	const content = createElement(CONTENT_TAGNAME, {
+		popover: 'hint',
+		role: 'tooltip',
+		tabIndex: -1,
+	});
 
-	contentElement.setAttribute(ATTRIBUTE_CONTENT, '');
+	content.setAttribute(ATTRIBUTE_CONTENT, '');
 
-	contentElement.role = 'tooltip';
-	contentElement.tabIndex = -1;
+	content.append(...elements);
 
-	return contentElement;
+	return content;
 }
 
-function onActivate(event: Event): void {
-	onToggle(event, true);
-}
+function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
+	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
 
-function onChange(): void {
-	if (TOOLTIPS_ACTIVE.size === 0) {
-		return;
+	if (elements.length > 0) {
+		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
 	}
-}
 
-function onClick(event: Event): void {
-	if (findAncestor(event, SELECTOR_CONTENT) != null) {
-		event.stopPropagation();
+	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
+
+	if (elements.length > 0) {
+		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
 	}
-}
 
-function onDeactivate(event: Event): void {
-	onToggle(event, false);
-}
+	let content = anchor.getAttribute(ARIA_LABEL);
 
-function onToggle(event: Event, activate: boolean): void {
-	if (toggle != null) {
-		cancelAnimationFrame(toggle);
+	if (isNullableOrWhitespace(content)) {
+		content = anchor.getAttribute(ARIA_DESCRIPTION);
 	}
 
-	if (findAncestor(event, SELECTOR_CONTENT) != null) {
-		if (contentTimer != null) {
-			clearTimeout(contentTimer);
-		}
-
+	if (isNullableOrWhitespace(content)) {
 		return;
 	}
 
-	toggle = requestAnimationFrame(() => {
-		toggle = undefined;
-
-		const element = findAncestor(event, SELECTOR) as HTMLElement;
-
-		const tooltip = TOOLTIPS_ALL.get(element);
-
-		if (TOOLTIPS_ACTIVE.size > 0 || TOOLTIPS_PENDING.size > 0) {
-			closeTooltips(tooltip);
-		}
-
-		if (tooltip == null || tooltip.floatable.active === activate) {
-			return;
-		}
+	const paragraph = document.createElement('p');
 
-		if (activate) {
-			clearTimeout(contentTimer);
+	paragraph.textContent = content;
 
-			TOOLTIPS_PENDING.add(tooltip);
+	return [paragraph];
+}
 
-			contentTimer = setTimeout(() => {
-				TOOLTIPS_ACTIVE.add(tooltip);
-				TOOLTIPS_PENDING.delete(tooltip);
+function onAdd(element: HTMLElement): void {
+	if (!instances.has(element)) {
+		createTooltip(element);
+	}
+}
 
-				tooltip.floatable.options.content.style.positionAnchor =
-					tooltip.floatable.options.anchor.style.anchorName;
+function onFocusin(event: Event): void {
+	activate(event, true);
+}
 
-				tooltip.floatable.toggle(true);
+function onFocusout(): void {
+	if (active == null) {
+		return;
+	}
 
-				setTimeout(() => {
-					tooltip.floatable.options.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, '');
-				});
-			}, delayOpen);
+	if (focusTimer != null) {
+		clearTimeout(focusTimer);
+	}
 
+	focusTimer = setTimeout(() => {
+		if (
+			active == null ||
+			document.activeElement == null ||
+			findAncestor(document.activeElement, SELECTOR) != null
+		) {
 			return;
 		}
 
-		TOOLTIPS_ACTIVE.delete(tooltip);
+		closeTooltip(active);
 
-		tooltip.floatable.toggle(false);
+		active = undefined;
 	});
 }
 
-function removeTooltip(element: HTMLElement): void {
-	if (!element.hasAttribute(ATTRIBUTE_CONTENT)) {
-		TOOLTIPS_ALL.get(element)?.destroy();
-	}
+function onPointermove(event: Event): void {
+	activate(event, false);
 }
 
-function setTooltipDelay(open?: number, close?: number): void {
-	delayClose = typeof close === 'number' && close >= 0 ? close : delayClose;
-	delayOpen = typeof open === 'number' && open >= 0 ? open : delayOpen;
+function onRemove(element: HTMLElement): void {
+	instances.get(element)?.destroy();
+
+	instances.delete(element);
 }
 
-//
+export function setTooltipDelay(value: number): void {
+	if (typeof value === 'number' && !Number.isNaN(value) && value >= 0) {
+		delay = value;
+	}
+}
 
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 
@@ -260,48 +226,37 @@ const ARIA_LABEL = 'aria-label';
 
 const ARIA_LABELLEDBY = 'aria-labelledby';
 
+const CONTENT_TAGNAME = 'div';
+
+const EXPRESSION_WHITESPACE = /\s+/;
+
 const ATTRIBUTE = 'oui-tooltip';
 
 const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
 
 const ATTRIBUTE_CONTENT_ACTIVE = `${ATTRIBUTE_CONTENT}-active`;
 
-const ATTRIBUTE_POSITION = `${ATTRIBUTE}-position`;
-
 const SELECTOR = `[${ATTRIBUTE}]`;
 
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 
-const EXPRESSION_WHITESPACE = /\s+/;
-
-const TOOLTIPS_ACTIVE: Set<Tooltip> = new Set();
-
-const TOOLTIPS_ALL: WeakMap<HTMLElement, Tooltip> = new WeakMap();
-
-const TOOLTIPS_PENDING: Set<Tooltip> = new Set();
-
-let contentElement: HTMLElement | undefined;
-
-let contentTimer: number | undefined;
-
-let delayClose = 250;
+const instances = new WeakMap<HTMLElement, Tooltip>();
 
-let delayOpen = 500;
+const options: FloatableOptions = {
+	attribute: 'oui-tooltip-position',
+	position: 'above',
+};
 
-let toggle: DOMHighResTimeStamp | undefined;
+let delay = 500;
 
-//
+let focused = false;
 
-attributable(ATTRIBUTE, addTooltip, removeTooltip);
+let active: Tooltip | undefined;
 
-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);
+let focusTimer: number | undefined;
 
-//
+on(document, 'focusin', onFocusin);
+on(document, 'focusout', onFocusout);
+on(document, 'pointermove', onPointermove);
 
-export {setTooltipDelay};
+attributable(ATTRIBUTE, onAdd, onRemove);