@oscarpalmer/oui 0.12.0 → 0.14.0

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,227 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {on} from '@oscarpalmer/toretto/event';
+import {attributable} from './attributable';
+import {activate, deactivate, Floatable} from './floatable';
+
+type Attributes = {
+	ariaDescribedby: string | null;
+	ariaLabelledBy: string | null;
+};
+
+type Content = {
+	attributes: Attributes;
+	element: HTMLElement;
+};
+
+class Tooltip {
+	abortController = new AbortController();
+	attributes: Attributes;
+	floatable: Floatable;
+
+	constructor(anchor: HTMLElement, content: Content) {
+		this.attributes = content.attributes;
+		this.floatable = new Floatable(anchor, content.element);
+
+		initialize(this);
+	}
+
+	destroy(): void {
+		deactivate(this.floatable, active);
+		reset(this.floatable.anchor, this.attributes);
+
+		this.abortController.abort();
+		this.floatable.content.remove();
+		this.floatable.destroy();
+
+		this.abortController = undefined as never;
+		this.attributes = undefined as never;
+		this.floatable = undefined as never;
+	}
+}
+
+function addTooltip(anchor: HTMLElement): void {
+	if (tooltips.has(anchor)) {
+		return;
+	}
+
+	const content = getContent(anchor);
+
+	if (content != null) {
+		tooltips.set(anchor, new Tooltip(anchor, content));
+	}
+}
+
+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);
+
+	if (labelledElements.length > 0) {
+		anchor.setAttribute('aria-labelledby', wrapper.id);
+
+		for (const element of labelledElements) {
+			wrapper.append(element);
+		}
+
+		return {
+			attributes,
+			element: wrapper,
+		};
+	}
+
+	const describedElements = getElements(attributes.ariaDescribedby);
+
+	if (describedElements.length > 0) {
+		anchor.setAttribute('aria-describedby', wrapper.id);
+
+		for (const element of describedElements) {
+			wrapper.append(element);
+		}
+
+		return {
+			attributes,
+			element: wrapper,
+		};
+	}
+
+	let content = anchor.getAttribute('aria-label');
+
+	if (isNullableOrWhitespace(content)) {
+		content = anchor.getAttribute('aria-description');
+	}
+
+	if (isNullableOrWhitespace(content)) {
+		return;
+	}
+
+	const paragraph = document.createElement('p');
+
+	paragraph.textContent = content;
+
+	wrapper.append(paragraph);
+
+	return {
+		attributes,
+		element: wrapper,
+	};
+}
+
+function getElements(attribute: string | null): HTMLElement[] {
+	const ids = attribute?.split(/\s+/) ?? [];
+	const elements: HTMLElement[] = [];
+
+	for (const id of ids) {
+		if (isNullableOrWhitespace(id)) {
+			continue;
+		}
+
+		const element = document.querySelector(`#${id}`);
+
+		if (element instanceof HTMLElement) {
+			const cloned = element.cloneNode(true) as HTMLElement;
+
+			cloned.hidden = false;
+
+			elements.push(cloned);
+		}
+	}
+
+	return elements;
+}
+
+function getWrapper(anchor: HTMLElement): HTMLElement {
+	const wrapper = document.createElement('div');
+
+	wrapper.setAttribute(`${selector}-content`, '');
+
+	wrapper.className = anchor.getAttribute(`${selector}-class`) ?? '';
+	wrapper.hidden = true;
+	wrapper.id = `${selector}-${++index}`;
+	wrapper.role = 'tooltip';
+	wrapper.tabIndex = -1;
+
+	return wrapper;
+}
+
+function initialize(tooltip: Tooltip): void {
+	const {abortController, floatable} = tooltip;
+	const {anchor, content} = floatable;
+
+	anchor.insertAdjacentElement('afterend', content);
+
+	const elements = [anchor, content];
+
+	for (const element of elements) {
+		for (const event of activateEvents) {
+			on(
+				element,
+				event,
+				() => {
+					activate(floatable, active, 250);
+				},
+				{
+					signal: abortController.signal,
+				},
+			);
+		}
+
+		for (const event of deactivateEvents) {
+			on(
+				element,
+				event,
+				() => {
+					deactivate(floatable, active, 250);
+				},
+				{
+					signal: abortController.signal,
+				},
+			);
+		}
+	}
+}
+
+function removeTooltip(element: HTMLElement): void {
+	tooltips.get(element)?.destroy();
+	tooltips.delete(element);
+}
+
+function reset(anchor: HTMLElement, attributes: Attributes): void {
+	console.log('reset', anchor, attributes);
+
+	if (attributes.ariaDescribedby == null) {
+		anchor.removeAttribute('aria-describedby');
+	} else {
+		anchor.setAttribute('aria-describedby', attributes.ariaDescribedby);
+	}
+}
+
+//
+
+const active = new Set<Floatable>();
+
+const activateEvents = ['focus', 'mouseenter', 'touchstart'];
+
+const deactivateEvents = ['blur', 'mouseleave'];
+
+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 floatable of active) {
+			deactivate(floatable, active);
+		}
+	}
+});

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/floatable.d.cts

@@ -0,0 +1,16 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class Floatable {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	activate: number | undefined;
+	active: boolean;
+	deactivate: number | undefined;
+	frame: DOMHighResTimeStamp | undefined;
+	constructor(anchor: HTMLElement, content: HTMLElement);
+	destroy(): void;
+}
+export declare function activate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
+export declare function deactivate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
+
+export {};

package/types/floatable.d.ts

@@ -0,0 +1,12 @@
+export declare class Floatable {
+    anchor: HTMLElement;
+    content: HTMLElement;
+    activate: number | undefined;
+    active: boolean;
+    deactivate: number | undefined;
+    frame: DOMHighResTimeStamp | undefined;
+    constructor(anchor: HTMLElement, content: HTMLElement);
+    destroy(): void;
+}
+export declare function activate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
+export declare function deactivate(floatable: Floatable, active: Set<Floatable>, time?: number): 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 {};