@oscarpalmer/oui 0.24.0 → 0.26.0

package/src/js/movable.ts

@@ -3,7 +3,7 @@ import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {attributable} from './internal/attributable';
 import {
 	addDraggable,
-	Draggable,
+	OuiDraggable,
 	removeDraggable,
 	type DraggableBound,
 	type DraggableState,
@@ -12,7 +12,7 @@ import {
 
 // #region Types
 
-export class Movable extends Draggable {
+export class OuiMovable extends OuiDraggable {
 	inset: string;
 
 	moved = false;
@@ -73,15 +73,15 @@ export class Movable extends Draggable {
 
 // #region Functions
 
-function afterDirection(draggable: Draggable): void {
+function afterDirection(draggable: OuiDraggable): void {
 	const container = draggable.container?.getBoundingClientRect();
 
 	if (container != null) {
-		setOffset(draggable as Movable, container);
+		setOffset(draggable as OuiMovable, container);
 	}
 }
 
-function destroyContainer(_: Draggable, container: HTMLElement, empty: boolean): void {
+function destroyContainer(_: OuiDraggable, container: HTMLElement, empty: boolean): void {
 	if (empty) {
 		resizer.unobserve(container);
 	}
@@ -89,7 +89,7 @@ function destroyContainer(_: Draggable, container: HTMLElement, empty: boolean):
 
 function getOffsetPosition(
 	state: DraggableState,
-	_: Draggable,
+	_: OuiDraggable,
 	__: HTMLElement,
 	position: EventPosition,
 ): EventPosition {
@@ -106,14 +106,14 @@ function getOriginalPosition(state: DraggableState): EventPosition {
 	};
 }
 
-function initializeContainer(draggable: Draggable): void {
+function initializeContainer(draggable: OuiDraggable): void {
 	resizer.observe(draggable.container!);
 }
 
 function onBegin(): void {}
 
-function onCancel(state: DraggableState, draggable: Draggable): void {
-	const movable = draggable as Movable;
+function onCancel(state: DraggableState, draggable: OuiDraggable): void {
+	const movable = draggable as OuiMovable;
 
 	const {element, inset, moved, position} = movable;
 	const {x, y} = state.original ?? {x: 0, y: 0};
@@ -129,10 +129,10 @@ function onCancel(state: DraggableState, draggable: Draggable): void {
 function onEnd(
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	reset: () => void,
 ): void {
-	const movable = draggable as Movable;
+	const movable = draggable as OuiMovable;
 
 	if (!movable.moved) {
 		movable.moved = true;
@@ -170,7 +170,7 @@ function onEnd(
 function onMove(
 	_: MouseEvent | TouchEvent,
 	state: DraggableState,
-	__: Draggable,
+	__: OuiDraggable,
 	position: DragMovePosition,
 ): PlainObject | undefined {
 	return {
@@ -202,7 +202,7 @@ function onScroll(): void {
 	}
 }
 
-function reposition(movable: Movable): void {
+function reposition(movable: OuiMovable): void {
 	if (!movable.moved || movable.container == null) {
 		return;
 	}
@@ -215,7 +215,7 @@ function reposition(movable: Movable): void {
 	movable.element.style.inset = `${y}px auto auto ${x}px`;
 }
 
-function setOffset(movable: Movable, container: DOMRect): void {
+function setOffset(movable: OuiMovable, container: DOMRect): void {
 	movable.offset = {};
 
 	const element = movable.element.getBoundingClientRect();
@@ -234,16 +234,16 @@ const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
 
 const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
 
-const CONTAINERS = new Map<HTMLElement, Set<Movable>>();
+const CONTAINERS = new Map<HTMLElement, Set<OuiMovable>>();
 
 const EVENT_END = 'move:end';
 
-const MOVED = new Set<Movable>();
+const MOVED = new Set<OuiMovable>();
 
 const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
 
 const bound: DraggableBound = {
-	constructor: Movable,
+	constructor: OuiMovable,
 	property: 'movable',
 };
 

package/src/js/popover.ts

@@ -3,110 +3,192 @@ import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {
 	ATTRIBUTE_FLOATABLE,
-	createFloatable,
-	removeFloatable,
-	type Floatable,
-	type FloatableOptions,
-} from './floatable';
-import {createFocusTrap, removeFocusTrap, type FocusTrap} from './focus-trap/embedded';
+	createEmbeddedFloatable,
+	getOnBeforeToggleListener,
+	type OuiFloatable,
+	type OuiFloatableOptions,
+} from './floatable/embedded';
+import {createFocusTrap, type OuiFocusTrap} from './focus-trap/embedded';
 import {attributable} from './internal/attributable';
 
-class Popover {
-	anchor: HTMLElement | null;
-	floatable?: Floatable;
-	focusTrap?: FocusTrap;
-	listener: RemovableEventListener;
+// #region Types
 
-	constructor(public element: HTMLElement) {
-		const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+class OuiPopover {
+	readonly #state: OuiPopoverState;
 
-		if (!isHTMLOrSVGElement(anchor)) {
-			throw new Error(`No anchor found for popover with id '${element.id}'.`);
-		}
-
-		if (element.contains(anchor)) {
-			throw new Error('Popover content cannot contain its anchor.');
-		}
+	/**
+	 * Is the popover open?
+	 */
+	get open(): boolean {
+		return this.#state.content.checkVisibility();
+	}
 
-		this.anchor = anchor as HTMLElement;
+	constructor(state: OuiPopoverState) {
+		this.#state = state;
 
-		this.floatable = createFloatable(this.anchor, element, options, false);
+		this.#state.floatable.update();
+	}
 
-		this.focusTrap = createFocusTrap(element, {
-			noescape: true,
-		});
+	/**
+	 * Closes the popover
+	 */
+	hide(): void {
+		this.#state.floatable.hide();
+	}
 
-		this.listener = on(element, EVENT_TOGGLE, event => {
-			if (event.newState === STATE_OPEN) {
-				ignoreFocus = false;
+	/**
+	 * Opens the popover
+	 */
+	show(): void {
+		this.#state.floatable.show();
+	}
+}
 
-				this.floatable?.update();
+type OuiPopoverState = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	floatable: OuiFloatable;
+	focusTrap?: OuiFocusTrap;
+	listeners: RemovableEventListener[];
+	popover: OuiPopover;
+};
 
-				element.focus();
-			} else if (!ignoreFocus) {
-				this.anchor?.focus();
-			}
-		});
+// #endregion
 
-		this.element.setAttribute(ATTRIBUTE_CONTENT, '');
+// #region Functions
 
-		this.floatable?.update();
+function addPopover(element: HTMLElement): void {
+	if (states.has(element) || element.hasAttribute(ATTRIBUTE_FLOATABLE)) {
+		return;
 	}
 
-	destroy(): void {
-		this.focusTrap?.destroy();
+	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
 
-		removeFloatable(this.element);
-		removeFocusTrap(this.element);
+	if (isHTMLOrSVGElement(anchor)) {
+		states.set(element, getState(anchor, element));
+	}
+}
 
-		this.element.removeAttribute(ATTRIBUTE_CONTENT);
+function destroyPopover(state: OuiPopoverState): void {
+	state.floatable.destroy();
+	state.focusTrap?.destroy();
 
-		this.anchor = null;
-		this.element = null as never;
+	for (const listener of state.listeners) {
+		listener();
 	}
+
+	state.anchor = undefined as never;
+	state.content = undefined as never;
+	state.floatable = undefined as never;
+	state.focusTrap = undefined as never;
+	state.listeners = undefined as never;
+	state.popover = undefined as never;
 }
 
-function onAdd(element: HTMLElement): void {
-	if (
-		!instances.has(element) &&
-		element.getAttribute(ATTRIBUTE) !== POPOVER_HINT &&
-		!element.hasAttribute(ATTRIBUTE_FLOATABLE)
-	) {
-		instances.set(element, new Popover(element));
-	}
+/**
+ * Get the _OuiPopover_ for an element
+ *
+ * @param element Element to get _OuiPopover_ for
+ * @returns _OuiPopover_ instance
+ */
+function getPopover(element: HTMLElement): OuiPopover | undefined {
+	return states.get(element)?.popover;
+}
+
+function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
+	const state: OuiPopoverState = {
+		anchor,
+		content,
+		floatable: createEmbeddedFloatable(anchor, content, options),
+		focusTrap:
+			content.getAttribute(ARIA_MODAL) === TRUE
+				? createFocusTrap(content, {
+						noescape: true,
+					})
+				: undefined,
+		listeners: [
+			getOnBeforeToggleListener(content),
+			on(content, EVENT_TOGGLE, event => {
+				if (event.newState === STATE_OPEN) {
+					ignoreFocus = false;
+
+					state.floatable?.update();
+
+					content.setAttribute(ATTRIBUTE_OPEN, '');
+
+					content.focus();
+				} else {
+					content.removeAttribute(ATTRIBUTE_OPEN);
+
+					if (!ignoreFocus) {
+						anchor?.focus();
+					}
+				}
+			}),
+		],
+		popover: undefined as never,
+	};
+
+	state.popover = new OuiPopover(state);
+
+	return state;
 }
 
 function onPointerdown(): void {
 	ignoreFocus = true;
 }
 
-function onRemove(element: HTMLElement): void {
-	instances.get(element)?.destroy();
+function removePopover(element: HTMLElement): void {
+	const state = states.get(element);
 
-	instances.delete(element);
+	if (state == null) {
+		return;
+	}
+
+	destroyPopover(state);
+
+	states.delete(element);
 }
 
-const ATTRIBUTE = 'popover';
+// #endregion
 
-const ATTRIBUTE_CONTENT = 'oui-popover-content';
+// #region Variables
 
-const EVENT_TOGGLE = 'toggle';
+const ATTRIBUTE = 'oui-popover';
+
+const ARIA_MODAL = 'aria-modal';
 
-const POPOVER_HINT = 'hint';
+const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
+
+const EVENT_TOGGLE = 'toggle';
 
 const STATE_OPEN = 'open';
 
-const instances = new WeakMap<HTMLElement, Popover>();
+const TRUE = 'true';
 
-const options: FloatableOptions = {
+const options: OuiFloatableOptions = {
 	attribute: `${ATTRIBUTE}position`,
 	position: 'below-start',
 };
 
+const states = new WeakMap<HTMLElement, OuiPopoverState>();
+
 let ignoreFocus = false;
 
+// #endregion
+
+// #region Initialization
+
 on(document, 'pointerdown', onPointerdown, {
 	capture: true,
 });
 
-attributable(ATTRIBUTE, onAdd, onRemove);
+attributable(ATTRIBUTE, addPopover, removePopover);
+
+// #endregion
+
+// #region Exports
+
+export {getPopover, type OuiPopover};
+
+// #endregion

package/src/js/sortable.ts

@@ -6,7 +6,7 @@ import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {attributable} from './internal/attributable';
 import {
 	addDraggable,
-	Draggable,
+	OuiDraggable,
 	removeDraggable,
 	type DraggableBound,
 	type DraggableState,
@@ -15,7 +15,7 @@ import {
 
 // #region Types
 
-export class Sortable extends Draggable {
+export class OuiSortable extends OuiDraggable {
 	connections: string | null;
 
 	origin: HTMLElement | undefined;
@@ -49,12 +49,12 @@ export class Sortable extends Draggable {
 	}
 }
 
-type SortablePlaceholder = {
-	drag: SortablePlaceholderDrag;
+type OuiSortablePlaceholder = {
+	drag: OuiSortablePlaceholderDrag;
 	position: HTMLElement | undefined;
 };
 
-type SortablePlaceholderDrag = {
+type OuiSortablePlaceholderDrag = {
 	custom: HTMLElement | undefined;
 	default: HTMLElement | undefined;
 };
@@ -65,7 +65,7 @@ type SortablePlaceholderDrag = {
 
 function afterEnd(
 	insert: 'append' | 'insert' | 'prepend' | undefined,
-	from: Sortable,
+	from: OuiSortable,
 	events: CustomEvent[],
 	elements: {origin?: HTMLElement; target: HTMLElement},
 	position: EventPosition | undefined,
@@ -114,7 +114,7 @@ function getDragPlaceholder(): HTMLElement {
 
 function getOffsetPosition(
 	_: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	element: HTMLElement,
 	position: EventPosition,
 ): EventPosition {
@@ -128,13 +128,13 @@ function getOffsetPosition(
 
 function getOriginalPosition(
 	_: DraggableState,
-	__: Draggable,
+	__: OuiDraggable,
 	position: EventPosition,
 ): EventPosition {
 	return position;
 }
 
-function getPositionPlaceholder(sortable: Sortable): HTMLElement {
+function getPositionPlaceholder(sortable: OuiSortable): HTMLElement {
 	placeholder.position ??= createElement('div');
 
 	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, '');
@@ -152,10 +152,10 @@ function getPositionPlaceholder(sortable: Sortable): HTMLElement {
 function onBegin(
 	_: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	element: HTMLElement,
 ): void {
-	const sortable = draggable as Sortable;
+	const sortable = draggable as OuiSortable;
 
 	sortable.origin = element;
 
@@ -166,8 +166,8 @@ function onBegin(
 	document.body.setAttribute(ATTRIBUTE_ACTIVE, '');
 }
 
-function onCancel(_: DraggableState, draggable: Draggable): void {
-	const sortable = draggable as Sortable;
+function onCancel(_: DraggableState, draggable: OuiDraggable): void {
+	const sortable = draggable as OuiSortable;
 
 	const {origin} = sortable;
 
@@ -183,10 +183,10 @@ function onCancel(_: DraggableState, draggable: Draggable): void {
 function onEnd(
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	reset: () => void,
 ): void {
-	const from = draggable as Sortable;
+	const from = draggable as OuiSortable;
 	const {origin} = from;
 
 	const position = getPosition(event) ?? {x: 0, y: 0};
@@ -206,7 +206,7 @@ function onEnd(
 	}
 
 	let insert: 'append' | 'insert' | 'prepend' | undefined = 'insert';
-	let to: Sortable | undefined;
+	let to: OuiSortable | undefined;
 
 	if (element == null) {
 		element = findAncestor(target, SELECTOR) as HTMLElement;
@@ -258,15 +258,15 @@ function onEnd(
 function onMove(
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	position: DragMovePosition,
 ): PlainObject | undefined {
-	const from = draggable as Sortable;
+	const from = draggable as OuiSortable;
 
 	const fromElement = from.origin;
 	const toElement = findAncestor(event, SELECTOR_ITEM) as HTMLElement;
 
-	let to: Sortable | undefined;
+	let to: OuiSortable | undefined;
 
 	if (toElement == null) {
 		to = state.instances.get(findAncestor(event, SELECTOR) as HTMLElement)?.sortable;
@@ -320,7 +320,7 @@ function resetPlaceholders(): void {
 	placeholder.drag.custom = undefined;
 }
 
-function setPlaceholder(state: DraggableState, sortable: Sortable, origin: HTMLElement): void {
+function setPlaceholder(state: DraggableState, sortable: OuiSortable, origin: HTMLElement): void {
 	const element = getDragPlaceholder();
 
 	placeholder.drag.default!.innerHTML = '';
@@ -363,7 +363,7 @@ function setPlaceholder(state: DraggableState, sortable: Sortable, origin: HTMLE
 	});
 }
 
-function updatePlaceholder(sortable: Sortable, element: HTMLElement): void {
+function updatePlaceholder(sortable: OuiSortable, element: HTMLElement): void {
 	element.style.position = 'fixed';
 
 	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, '');
@@ -383,8 +383,8 @@ function updatePlaceholder(sortable: Sortable, element: HTMLElement): void {
 
 function validatePosition(
 	_: DraggableState,
-	from: Sortable,
-	to: Sortable | undefined,
+	from: OuiSortable,
+	to: OuiSortable | undefined,
 	position: EventPosition,
 ): boolean {
 	let valid = true;
@@ -434,7 +434,7 @@ const ATTRIBUTE_PLACEHOLDER_POSITION = `${ATTRIBUTE}-placeholder-position`;
 
 const ATTRIBUTE_VERTICAL = `${ATTRIBUTE}-vertical`;
 
-const CONTAINERS = new Map<HTMLElement, Set<Sortable>>();
+const CONTAINERS = new Map<HTMLElement, Set<OuiSortable>>();
 
 const EVENT_END = 'sort:end';
 
@@ -449,11 +449,11 @@ const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
 
 const bound: DraggableBound = {
-	constructor: Sortable,
+	constructor: OuiSortable,
 	property: 'sortable',
 };
 
-const placeholder: SortablePlaceholder = {
+const placeholder: OuiSortablePlaceholder = {
 	drag: {
 		custom: undefined,
 		default: undefined,