@oscarpalmer/oui 0.11.0 → 0.13.0

package/src/js/attributable.ts

@@ -0,0 +1,70 @@
+export function attributable(
+	attribute: string,
+	add: (element: HTMLElement) => void,
+	remove: (element: HTMLElement) => void,
+): void {
+	const observer = new MutationObserver(entries => {
+		const {length} = entries;
+
+		for (let index = 0; index < length; index += 1) {
+			const entry = entries[index];
+
+			if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+				if (entry.target.hasAttribute(attribute)) {
+					handleAdded(attribute, [entry.target], add);
+				} else {
+					handleRemoved([entry.target], remove);
+				}
+			} else if (entry.type === 'childList') {
+				handleAdded(attribute, entry.addedNodes, add);
+				handleRemoved(entry.removedNodes, remove);
+			}
+		}
+	});
+
+	observer.observe(document, {
+		attributeFilter: [attribute],
+		attributes: true,
+		childList: true,
+		subtree: true,
+	});
+
+	requestAnimationFrame(() => {
+		handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+	});
+}
+
+function handleAdded(
+	attribute: string,
+	nodes: Node[] | NodeList,
+	add: (element: HTMLElement) => void,
+): void {
+	const elements = [...nodes].filter(
+		node => node instanceof HTMLElement,
+	) as HTMLElement[];
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+
+		if (element.hasAttribute(attribute)) {
+			add(element);
+		}
+	}
+}
+
+function handleRemoved(
+	nodes: Node[] | NodeList,
+	remove: (element: HTMLElement) => void,
+): void {
+	const elements = [...nodes].filter(
+		node => node instanceof HTMLElement,
+	) as HTMLElement[];
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		remove(elements[index]);
+	}
+}

package/src/js/focus-trap.ts

@@ -2,6 +2,7 @@ import {clamp} from '@oscarpalmer/atoms/number';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
+import {attributable} from './attributable';
 
 class FocusTrap {
 	active = true;
@@ -31,19 +32,9 @@ class FocusTrap {
 	}
 }
 
-function addFocusTraps(nodes: Node[] | NodeList): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
-
-	const {length} = elements;
-
-	for (let index = 0; index < length; index += 1) {
-		const element = elements[index];
-
-		if (element.hasAttribute(selector)) {
-			focusTraps.set(element, new FocusTrap(element));
-		}
+function addFocusTrap(element: HTMLElement): void {
+	if (!focusTraps.has(element)) {
+		focusTraps.set(element, new FocusTrap(element));
 	}
 }
 
@@ -117,65 +108,26 @@ function onTab(event: KeyboardEvent): void {
 	}
 }
 
-function removeFocusTraps(nodes: Node[] | NodeList): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
-
-	const {length} = elements;
-
-	for (let index = 0; index < length; index += 1) {
-		const element = elements[index];
-
-		focusTraps.get(element)?.destroy();
-		focusTraps.delete(element);
-	}
+function removeFocusTraps(element: HTMLElement): void {
+	focusTraps.get(element)?.destroy();
+	focusTraps.delete(element);
 }
 
 const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
 const inactive = new Set<FocusTrap>();
+const selector = 'oui-focus-trap';
 
-const observer = new MutationObserver(entries => {
-	const {length} = entries;
-
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
+attributable(selector, addFocusTrap, removeFocusTraps);
 
-		if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
-			if (entry.target.hasAttribute(selector)) {
-				addFocusTraps([entry.target]);
-			} else {
-				removeFocusTraps([entry.target]);
-			}
-		} else if (entry.type === 'childList') {
-			addFocusTraps(entry.addedNodes);
-			removeFocusTraps(entry.removedNodes);
-		}
-	}
+on(document, 'focusout', onFocusOut, {
+	capture: true,
 });
 
-const selector = 'oui-focus-trap';
-
-observer.observe(document, {
-	attributeFilter: [selector],
-	attributes: true,
-	childList: true,
-	subtree: true,
+on(document, 'keydown', onTab, {
+	capture: true,
+	passive: false,
 });
 
-requestAnimationFrame(() => {
-	addFocusTraps(document.querySelectorAll(`[${selector}]`));
-
-	on(document, 'focusout', onFocusOut, {
-		capture: true,
-	});
-
-	on(document, 'keydown', onTab, {
-		capture: true,
-		passive: false,
-	});
-
-	on(document, 'keydown', onEscape, {
-		passive: false,
-	});
+on(document, 'keydown', onEscape, {
+	passive: false,
 });

package/src/js/tooltip.ts

@@ -0,0 +1,289 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {on} from '@oscarpalmer/toretto/event';
+import {attributable} from './attributable';
+
+class Tooltip {
+	abortController = new AbortController();
+
+	activate: number | undefined;
+
+	active = false;
+
+	deactivate: number | undefined;
+
+	element: HTMLElement;
+
+	frame: DOMHighResTimeStamp | undefined;
+
+	constructor(public parent: HTMLElement) {
+		this.element = getContent(parent) as HTMLElement;
+
+		if (this.element != null) {
+			parent.insertAdjacentElement('afterend', this.element);
+
+			initialize(this);
+		}
+	}
+
+	destroy() {
+		deactivate(this);
+
+		this.abortController.abort();
+
+		this.abortController = undefined as never;
+		this.activate = undefined as never;
+		this.deactivate = undefined as never;
+		this.element = undefined as never;
+		this.frame = undefined as never;
+		this.parent = undefined as never;
+	}
+}
+
+function activate(tooltip: Tooltip): void {
+	stop(tooltip);
+
+	if (tooltip.active) {
+		return;
+	}
+
+	tooltip.activate = +setTimeout(() => {
+		tooltip.active = true;
+
+		active.add(tooltip);
+
+		document.body.append(tooltip.element);
+
+		tooltip.element.hidden = false;
+
+		update(tooltip);
+	}, 250);
+}
+
+function addTooltip(element: HTMLElement): void {
+	if (!tooltips.has(element)) {
+		tooltips.set(element, new Tooltip(element));
+	}
+}
+
+function deactivate(tooltip: Tooltip, time?: number): void {
+	stop(tooltip);
+
+	if (!tooltip.active) {
+		return;
+	}
+
+	tooltip.deactivate = +setTimeout(() => {
+		tooltip.active = false;
+
+		active.delete(tooltip);
+
+		tooltip.element.hidden = true;
+
+		tooltip.parent.insertAdjacentElement('afterend', tooltip.element);
+	}, time ?? 250);
+}
+
+function getContent(parent: HTMLElement): HTMLElement | undefined {
+	const wrapper = getWrapper(parent);
+
+	const ids = (parent.getAttribute('aria-describedby') ?? '').split(/\s+/);
+
+	parent.setAttribute('aria-describedby', wrapper.id);
+
+	const elements = ids
+		.map(id =>
+			isNullableOrWhitespace(id) ? undefined : document.querySelector(`#${id}`),
+		)
+		.filter(element => element instanceof HTMLElement);
+
+	if (elements.length > 0) {
+		for (const element of elements) {
+			element.hidden = false;
+
+			wrapper.append(element);
+		}
+
+		return wrapper;
+	}
+
+	let content = parent.getAttribute('aria-description');
+
+	if (isNullableOrWhitespace(content)) {
+		content = parent.getAttribute('aria-label');
+
+		if (isNullableOrWhitespace(content)) {
+			return;
+		}
+	}
+
+	const paragraph = document.createElement('p');
+
+	paragraph.textContent = content;
+
+	wrapper.append(paragraph);
+
+	return wrapper;
+}
+
+function getTop(parent: DOMRect, content: DOMRect): number {
+	let top = parent.top - content.height - margin;
+
+	if (top - margin >= 0) {
+		return top;
+	}
+
+	top = parent.bottom + margin;
+
+	if (top + content.height + margin <= window.innerHeight) {
+		return top;
+	}
+
+	return parent.top + (parent.height - content.height) / 2;
+}
+
+function getWrapper(parent: HTMLElement): HTMLElement {
+	const wrapper = document.createElement('div');
+
+	wrapper.setAttribute(`${selector}-content`, '');
+
+	wrapper.className = parent.getAttribute(`${selector}-class`) ?? '';
+	wrapper.hidden = true;
+	wrapper.id = `${selector}-${++index}`;
+	wrapper.role = 'tooltip';
+	wrapper.tabIndex = -1;
+
+	return wrapper;
+}
+
+function getX(
+	parent: DOMRect,
+	content: DOMRect,
+): {left?: number; right?: number} {
+	if (content.width + 2 * margin >= window.innerWidth) {
+		return {
+			left: margin,
+			right: margin,
+		};
+	}
+
+	const left = parent.left + (parent.width - content.width) / 2;
+	const right = window.innerWidth - margin;
+
+	if (left < margin) {
+		return {
+			left: margin,
+		};
+	}
+
+	if (left + content.width > right) {
+		return {
+			right: margin,
+		};
+	}
+
+	return {
+		left,
+	};
+}
+
+function initialize(tooltip: Tooltip): void {
+	const elements = [tooltip.parent, tooltip.element];
+
+	for (const element of elements) {
+		for (const event of activateEvents) {
+			on(
+				element,
+				event,
+				() => {
+					activate(tooltip);
+				},
+				{
+					signal: tooltip.abortController.signal,
+				},
+			);
+		}
+
+		for (const event of deactivateEvents) {
+			on(
+				element,
+				event,
+				() => {
+					deactivate(tooltip);
+				},
+				{
+					signal: tooltip.abortController.signal,
+				},
+			);
+		}
+	}
+}
+
+function removeTooltip(element: HTMLElement): void {
+	tooltips.get(element)?.destroy();
+	tooltips.delete(element);
+}
+
+function stop(tooltip: Tooltip): void {
+	if (tooltip.frame != null) {
+		cancelAnimationFrame(tooltip.frame);
+
+		tooltip.frame = undefined;
+	}
+
+	if (tooltip.activate != null) {
+		clearTimeout(tooltip.activate);
+
+		tooltip.activate = undefined;
+	}
+
+	if (tooltip.deactivate != null) {
+		clearTimeout(tooltip.deactivate);
+
+		tooltip.deactivate = undefined;
+	}
+}
+
+function update(tooltip: Tooltip): void {
+	function run(): void {
+		const parentRect = tooltip.parent.getBoundingClientRect();
+		const contentRect = tooltip.element.getBoundingClientRect();
+
+		const top = getTop(parentRect, contentRect);
+		const {left, right} = getX(parentRect, contentRect);
+
+		tooltip.element.style.inset = `${top}px ${right == null ? 'auto' : `${right}px`} auto ${left == null ? 'auto' : `${left}px`}`;
+
+		tooltip.frame = requestAnimationFrame(run);
+	}
+
+	tooltip.frame = requestAnimationFrame(run);
+}
+
+//
+
+const active = new Set<Tooltip>();
+
+const activateEvents = ['focus', 'mouseenter', 'touchstart'];
+
+const deactivateEvents = ['blur', 'mouseleave'];
+
+const margin =
+	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+
+const selector = 'oui-tooltip';
+
+const tooltips = new WeakMap<HTMLElement, Tooltip>();
+
+let index = 0;
+
+//
+
+attributable(selector, addTooltip, removeTooltip);
+
+on(document, 'keydown', event => {
+	if (event.key === 'Escape') {
+		for (const tooltip of active) {
+			deactivate(tooltip, 0);
+		}
+	}
+});

package/types/attributable.d.cts

@@ -0,0 +1,5 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
+
+export {};

package/types/attributable.d.ts

@@ -0,0 +1 @@
+export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;

package/types/tooltip.d.cts

@@ -0,0 +1,3 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export {};

package/types/tooltip.d.ts

@@ -0,0 +1 @@
+export {};