@oscarpalmer/oui 0.17.0 → 0.18.0

package/src/js/floatable.ts

@@ -1,31 +1,109 @@
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+
 export class Floatable {
-		activate: number | undefined;
+	active = false;
+
+	disabled = false;
+
+	frame: DOMHighResTimeStamp | undefined;
+
+	ignoreFocus = false;
+
+	constructor(readonly options: Options) {
+		initialize(this);
+	}
+
+	destroy(): void {
+		stop(this);
+
+		const state = getState();
+
+		state?.active.delete(this);
+		state?.mapped.delete(this.options.anchor);
+		state?.mapped.delete(this.options.content);
+
+		this.options.anchor = undefined as never;
+		this.options.content = undefined as never;
+	}
+
+	disable(): void {
+		if (this.disabled) {
+			return;
+		}
+
+		this.disabled = true;
+
+		stop(this);
+
+		getState()?.active.delete(this);
+	}
 
-		active = false;
+	enable(): void {
+		if (!this.disabled) {
+			return;
+		}
+
+		this.disabled = false;
+
+		initialize(this);
+	}
+
+	toggle(active: boolean, ignoreFocus?: boolean): void {
+		if (this.disabled || this.active === active) {
+			return;
+		}
+
+		const state = getState();
+
+		if (state == null) {
+			return;
+		}
 
-		deactivate: number | undefined;
+		this.ignoreFocus = !active && (ignoreFocus ?? false);
 
-		frame: DOMHighResTimeStamp | undefined;
+		stop(this);
 
-		constructor(
-			public anchor: HTMLElement,
-			public content: HTMLElement,
-			readonly attribute: string,
-			readonly position: Position,
-			readonly preferAbove: boolean,
-		) {
-			setStyles(content);
+		if (active) {
+			state.active.add(this);
+		} else {
+			state.active.delete(this);
 		}
 
-		destroy(): void {
-			this.activate = undefined;
-			this.deactivate = undefined;
-			this.frame = undefined;
+		if (this.options.interactive) {
+			if (active) {
+				state.order.push(this);
+			} else {
+				const index = state.order.indexOf(this);
 
-			this.anchor = undefined as never;
-			this.content = undefined as never;
+				if (index > -1) {
+					state.order.splice(index, 1);
+				}
+			}
+		}
+
+		if (active) {
+			activate(this);
+		} else {
+			deactivate(this);
 		}
 	}
+}
+
+type FloatableWindow = Window & {
+	// biome-ignore lint/style/useNamingConvention: Non-standard name to avoid conflicts
+	_oscarpalmer_oui_floatable: State;
+};
+
+type Options = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	defaultPosition: Position;
+	interactive: boolean;
+	positionAttribute: string;
+	preferAbove: boolean;
+	onAfter?: (active: boolean) => void;
+};
 
 type Position =
 	| 'above'
@@ -47,82 +125,117 @@ type Position =
 	| 'vertical-end'
 	| 'vertical-start';
 
+type State = {
+	active: Set<Floatable>;
+	mapped: Map<HTMLElement, Floatable>;
+	order: Floatable[];
+};
+
 //
 
-export function activate(
-	floatable: Floatable,
-	active: Set<Floatable>,
-	order?: Floatable[],
-	time?: number,
-): void {
-	stop(floatable);
+function activate(floatable: Floatable): void {
+	floatable.active = true;
+
+	document.body.append(floatable.options.content);
+
+	floatable.options.content.hidden = false;
 
-	if (floatable.active) {
+	updatePosition(floatable);
+}
+
+function closeAbove(element: HTMLElement): void {
+	const state = getState();
+
+	if (state == null) {
 		return;
 	}
 
-	if (time == null || time === 0) {
-		onActivate(floatable, active, order);
-	} else {
-		floatable.activate = +setTimeout(() => {
-			onActivate(floatable, active, order);
-		}, time);
+	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) {
+		void state.order.pop()?.toggle(false, true);
 	}
 }
 
-export function deactivate(
-	floatable: Floatable,
-	active: Set<Floatable>,
-	order?: Floatable[],
-	time?: number,
-): void {
-	stop(floatable);
+function closeAll(): void {
+	const state = getState();
 
-	if (!floatable.active) {
-		return;
+	const floatables = [...(state?.active ?? [])];
+
+	state?.active.clear();
+
+	for (const floatable of floatables) {
+		void floatable.toggle(false, true);
 	}
+}
 
-	if (time == null || time === 0) {
-		onDeactivate(floatable, active, order);
-	} else {
-		floatable.deactivate = +setTimeout(() => {
-			onDeactivate(floatable, active, order);
-		}, time);
+function closeNonInteractive(state: State): void {
+	for (const floatable of state.active) {
+		if (!floatable.options.interactive) {
+			void floatable.toggle(false);
+		}
 	}
 }
 
+export function deactivate(floatable: Floatable): void {
+	floatable.active = false;
+
+	floatable.options.content.hidden = true;
+
+	floatable.options.anchor.insertAdjacentElement(
+		INSERT_AFTEREND,
+		floatable.options.content,
+	);
+
+	floatable.options.onAfter?.(false);
+}
+
+function getState(): State {
+	return (window as unknown as FloatableWindow)._oscarpalmer_oui_floatable;
+}
+
 function getX(anchor: DOMRect, content: DOMRect, position: Position): number {
-	if (position.endsWith('-end')) {
+	if (position.endsWith(POSITION_SUFFIX_END)) {
 		const end = anchor.right - content.width;
 
-		return end - margin < 0 ? margin : end;
+		return end < 0 ? 0 : end;
 	}
 
-	if (position.endsWith('-start')) {
+	if (position.endsWith(POSITION_SUFFIX_START)) {
 		const start = anchor.left;
 
-		return start + content.width + margin > window.innerWidth
-			? window.innerWidth - content.width - margin
+		return start + content.width > window.innerWidth
+			? window.innerWidth - content.width
 			: start;
 	}
 
-	if (position.startsWith('end')) {
-		return anchor.right + margin;
+	if (position.startsWith(POSITION_END)) {
+		return anchor.right;
 	}
 
-	if (position.startsWith('start')) {
-		return anchor.left - content.width - margin;
+	if (position.startsWith(POSITION_START)) {
+		return anchor.left - content.width;
 	}
 
-	if (position.startsWith('horizontal')) {
-		if (anchor.right + content.width + margin <= window.innerWidth) {
-			return anchor.right + margin;
+	if (position.startsWith(POSITION_HORIZONTAL)) {
+		if (anchor.right + content.width <= window.innerWidth) {
+			return anchor.right;
 		}
 
-		return anchor.left - content.width - margin;
+		return anchor.left - content.width;
 	}
 
-	return anchor.left + (anchor.width - content.width) / 2;
+	const left = anchor.left + (anchor.width - content.width) / 2;
+
+	return left < 0 ? 0 : left;
 }
 
 function getY(
@@ -131,137 +244,243 @@ function getY(
 	position: Position,
 	preferAbove: boolean,
 ): number {
-	if (position.startsWith('above')) {
-		return anchor.top - content.height - margin;
+	if (position.startsWith(POSITION_ABOVE)) {
+		return anchor.top - content.height;
 	}
 
-	if (position.startsWith('below')) {
-		return anchor.bottom + margin;
+	if (position.startsWith(POSITION_BELOW)) {
+		return anchor.bottom;
 	}
 
-	if (position.endsWith('bottom')) {
+	if (position.endsWith(POSITION_BOTTOM)) {
 		const bottom = anchor.bottom - content.height;
 
-		return bottom + margin < 0 ? margin : bottom;
+		return bottom < 0 ? 0 : bottom;
 	}
 
-	if (position.endsWith('top')) {
+	if (position.endsWith(POSITION_TOP)) {
 		const top = anchor.top;
 
-		return top + content.height + margin > window.innerHeight
-			? window.innerHeight - content.height - margin
+		return top + content.height > window.innerHeight
+			? window.innerHeight - content.height
 			: top;
 	}
 
-	if (position.startsWith('vertical')) {
-		if (preferAbove && anchor.top - content.height - margin >= 0) {
-			return anchor.top - content.height - margin;
+	if (position.startsWith(POSITION_VERTICAL)) {
+		if (preferAbove && anchor.top - content.height >= 0) {
+			return anchor.top - content.height;
 		}
 
-		if (anchor.bottom + content.height + margin <= document.body.clientHeight) {
-			return anchor.bottom + margin;
+		if (anchor.bottom + content.height <= document.body.clientHeight) {
+			return anchor.bottom;
 		}
 
-		return anchor.top - content.height - margin;
+		return anchor.top - content.height;
 	}
 
 	return anchor.top + (anchor.height - content.height) / 2;
 }
 
-function onActivate(
-	floatable: Floatable,
-	active: Set<Floatable>,
-	order?: Floatable[],
-): void {
-	floatable.active = true;
+function initialize(floatable: Floatable): void {
+	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);
+}
 
-	active.add(floatable);
+function isDisabled(element: HTMLElement): boolean {
+	return (
+		(element as HTMLInputElement).disabled ||
+		(element as HTMLInputElement).readOnly ||
+		element.getAttribute('aria-disabled') === 'true'
+	);
+}
+
+function onClick(event: PointerEvent): void {
+	const related = findAncestor(event.target as never, SELECTOR_ALL);
 
-	if (order != null) {
-		order.push(floatable);
+	if (!(related instanceof HTMLElement)) {
+		closeAll();
+	} else if (related.hasAttribute(ATTRIBUTE_CONTENT)) {
+		closeAbove(related);
+	} else if (!isDisabled(related)) {
+		toggle(related);
 	}
+}
 
-	document.body.append(floatable.content);
+function onKeyDown(event: KeyboardEvent): void {
+	if (event.key !== 'Escape') {
+		return;
+	}
+
+	const state = getState();
+
+	if (state == null || state.active.size === 0) {
+		return;
+	}
 
-	floatable.content.hidden = false;
+	closeNonInteractive(state);
 
-	update(floatable);
+	const related = findAncestor(event.target as never, SELECTOR_CONTENT);
+
+	if (!(related instanceof HTMLElement)) {
+		return;
+	}
+
+	closeAbove(related);
+
+	const floatable = state.mapped.get(related);
+
+	if (floatable != null) {
+		void floatable.toggle(false);
+	}
 }
 
-function onDeactivate(
-	floatable: Floatable,
-	active: Set<Floatable>,
-	order?: Floatable[],
-): void {
-	floatable.active = false;
+function stop(floatable: Floatable): void {
+	if (floatable.frame != null) {
+		cancelAnimationFrame(floatable.frame);
+	}
 
-	active.delete(floatable);
+	floatable.frame = undefined;
+}
+
+function toggle(anchor: HTMLElement): void {
+	const floatable = getState()?.mapped.get(anchor);
 
-	const index = order?.indexOf(floatable) ?? -1;
+	if (floatable == null) {
+		closeAll();
 
-	if (index > -1) {
-		order?.splice(index, 1);
+		return;
 	}
 
-	floatable.content.hidden = true;
+	const active = Boolean(floatable.active);
+	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
 
-	floatable.anchor.insertAdjacentElement('afterend', floatable.content);
+	if (content == null) {
+		closeAll();
+	} else {
+		closeAbove(content as HTMLElement);
+	}
+
+	void floatable.toggle(!active);
 }
 
-function update(floatable: Floatable): void {
+function updatePosition(floatable: Floatable): void {
 	let position: Position =
-		(floatable.anchor.getAttribute(floatable.attribute)?.trim() as Position) ??
-		floatable.position;
+		(floatable.options.anchor
+			.getAttribute(floatable.options.positionAttribute)
+			?.trim() as Position) ?? floatable.options.defaultPosition;
 
-	if (!positions.has(position as Position)) {
-		position = floatable.position;
+	if (!POSITIONS.has(position as Position)) {
+		position = floatable.options.defaultPosition;
 	}
 
+	let previousAnchor: DOMRect;
+	let previousContent: DOMRect;
+
+	let calculated = false;
+	let runOnAfter = false;
+
 	function run(): void {
-			const anchor = floatable.anchor.getBoundingClientRect();
-			const content = floatable.content.getBoundingClientRect();
+		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);
+	}
 
-			const left = getX(anchor, content, position);
-			const top = getY(anchor, content, position, floatable.preferAbove);
+	function update(anchor: DOMRect, content: DOMRect): void {
+		previousAnchor = anchor;
+		previousContent = content;
 
-			floatable.content.style.inset = `${top}px auto auto ${left}px`;
+		const left = getX(anchor, content, position);
+		const top = getY(anchor, content, position, floatable.options.preferAbove);
 
-			floatable.frame = requestAnimationFrame(run);
+		if (top + content.height > window.innerHeight) {
+			floatable.options.content.style.height = `${window.innerHeight - top}px`;
+		} else {
+			floatable.options.content.style.height = '';
 		}
 
-	floatable.frame = requestAnimationFrame(run);
-}
+		if (left + content.width > window.innerWidth) {
+			floatable.options.content.style.width = `${window.innerWidth - left}px`;
+		} else {
+			floatable.options.content.style.width = '';
+		}
 
-function setStyles(content: HTMLElement): void {
-	content.style.position = 'fixed';
-	content.style.inset = '0 auto auto 0';
-	content.style.zIndex = '10';
-}
+		// floatable.options.content.style.inset = `${top}px auto auto ${left}px`;
+		floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
 
-function stop(floatable: Floatable): void {
-	if (floatable.frame != null) {
-		cancelAnimationFrame(floatable.frame);
-	}
+		floatable.frame = requestAnimationFrame(run);
 
-	if (floatable.activate != null) {
-		clearTimeout(floatable.activate);
-	}
+		if (!runOnAfter) {
+			runOnAfter = true;
 
-	if (floatable.deactivate != null) {
-		clearTimeout(floatable.deactivate);
+			floatable.options.onAfter?.(true);
+		}
 	}
 
-	floatable.activate = undefined;
-	floatable.deactivate = undefined;
-	floatable.frame = undefined;
+	floatable.frame = requestAnimationFrame(run);
 }
 
 //
 
-const margin =
-	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
+const ATTRIBUTE_ANCHOR = 'oui-floatable-anchor';
+
+const ATTRIBUTE_CONTENT = 'oui-floatable-content';
+
+const INSERT_AFTEREND = 'afterend';
+
+const POSITION_ABOVE = 'above';
 
-const positions = new Set<Position>([
+const POSITION_BELOW = 'below';
+
+const POSITION_BOTTOM = 'bottom';
+
+const POSITION_END = 'end';
+
+const POSITION_HORIZONTAL = 'horizontal';
+
+const POSITION_START = 'start';
+
+const POSITION_SUFFIX_END = '-end';
+
+const POSITION_SUFFIX_START = '-start';
+
+const POSITION_TOP = 'top';
+
+const POSITION_VERTICAL = 'vertical';
+
+const POSITIONS: Set<Position> = new Set([
 	'above',
 	'above-end',
 	'above-start',
@@ -281,3 +500,31 @@ const positions = new Set<Position>([
 	'vertical-end',
 	'vertical-start',
 ]);
+
+const PROPERTIES: (keyof DOMRect)[] = ['bottom', 'left', 'right', 'top'];
+
+const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
+
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+
+//
+
+if ((window as unknown as FloatableWindow)._oscarpalmer_oui_floatable == null) {
+	Object.defineProperty(window, '_oscarpalmer_oui_floatable', {
+		enumerable: false,
+		value: {
+			active: new Set(),
+			mapped: new Map(),
+			order: [],
+		},
+		writable: false,
+	});
+
+	on(document, 'keydown', event => {
+		onKeyDown(event);
+	});
+
+	on(document, 'click', event => {
+		onClick(event);
+	});
+}