@oscarpalmer/oui 0.23.1 → 0.25.0

package/src/js/dialog.ts

@@ -0,0 +1,188 @@
+import {on} from '@oscarpalmer/toretto/event';
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {getOnBeforeToggleListener} from './floatable/embedded';
+import {attributable} from './internal/attributable';
+
+// #region Types
+
+class OuiDialog {
+	readonly #state: OuiDialogState;
+
+	/**
+	 * Is the dialog open?
+	 */
+	get open(): boolean {
+		return this.#state.element.open;
+	}
+
+	constructor(state: OuiDialogState) {
+		this.#state = state;
+	}
+
+	/**
+	 * Closes the dialog by request
+	 */
+	hide(request: true, value?: string): void;
+
+	/**
+	 * Closes the dialog
+	 */
+	hide(value?: string): void;
+
+	hide(first?: string | boolean, second?: string): void {
+		if (!this.#state.element.open) {
+			return;
+		}
+
+		if (first === true) {
+			this.#state.element.requestClose(typeof second === 'string' ? second : undefined);
+		} else {
+			this.#state.element.close(typeof first === 'string' ? first : undefined);
+		}
+	}
+
+	/**
+	 * Opens the dialog
+	 */
+	show(modal?: boolean): void {
+		const {element} = this.#state;
+
+		if (element == null || element.open) {
+			return;
+		}
+
+		const isModal = modal !== false;
+
+		element.setAttribute(ARIA_MODAL, String(isModal));
+
+		if (isModal) {
+			element.showModal();
+		} else {
+			element.show();
+		}
+	}
+}
+
+type OuiDialogState = {
+	dialog: OuiDialog;
+	element: HTMLDialogElement;
+	listeners: RemovableEventListener[];
+	modal: boolean;
+};
+
+// #endregion
+
+// #region Functions
+
+function addDialog(element: HTMLElement): void {
+	if (!(element instanceof HTMLDialogElement)) {
+		throw new TypeError(MESSAGE);
+	}
+
+	if (!states.has(element)) {
+		states.set(element, getState(element));
+	}
+}
+
+function destroyDialog(state: OuiDialogState): void {
+	state.element.close();
+
+	state.element.setAttribute(ARIA_MODAL, String(state.modal));
+	state.element.removeAttribute(ATTRIBUTE_OPEN);
+
+	for (const listener of state.listeners) {
+		listener();
+	}
+
+	state.dialog = undefined as never;
+	state.element = undefined as never;
+	state.listeners = undefined as never;
+}
+
+/**
+ * Get the _OuiDialog_ for an element
+ *
+ * @param element Element to get _OuiDialog_ for
+ * @returns _OuiDialog_ instance
+ */
+function getDialog(element: HTMLDialogElement): OuiDialog | undefined {
+	return states.get(element)?.dialog;
+}
+
+function getState(element: HTMLDialogElement): OuiDialogState {
+	const state: OuiDialogState = {
+		element,
+		dialog: undefined as never,
+		listeners: [
+			getOnBeforeToggleListener(element),
+			on(element, EVENT_TOGGLE, event => {
+				const {source} = event;
+
+				if (element.open) {
+					const modal =
+						(source instanceof HTMLButtonElement && source.command === COMMAND_SHOW_MODAL) ||
+						element.matches(SELECTOR_MODAL);
+
+					element.setAttribute(ARIA_MODAL, String(modal));
+					element.setAttribute(ATTRIBUTE_OPEN, '');
+				} else {
+					element.removeAttribute(ATTRIBUTE_OPEN);
+					element.setAttribute(ARIA_MODAL, String(state.modal));
+				}
+			}),
+		],
+		modal: element.getAttribute(ARIA_MODAL) === TRUE,
+	};
+
+	state.dialog = new OuiDialog(state);
+
+	return state;
+}
+
+function removeDialog(element: HTMLElement): void {
+	const state = states.get(element);
+
+	if (state == null) {
+		return;
+	}
+
+	destroyDialog(state);
+
+	states.delete(element);
+}
+
+// #endregion
+
+// #region Variables
+
+const ARIA_MODAL = 'aria-modal';
+
+const ATTRIBUTE = 'oui-dialog';
+
+const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
+
+const COMMAND_SHOW_MODAL = 'show-modal';
+
+const EVENT_TOGGLE = 'toggle';
+
+const MESSAGE = 'The element must be an instance of HTMLDialogElement';
+
+const SELECTOR_MODAL = ':modal';
+
+const TRUE = 'true';
+
+const states = new WeakMap<HTMLElement, OuiDialogState>();
+
+// #endregion
+
+// #region Initialization
+
+attributable(ATTRIBUTE, addDialog, removeDialog);
+
+// #endregion
+
+// #region Exports
+
+export {getDialog, type OuiDialog};
+
+// #endregion

package/src/js/floatable/embedded.ts

@@ -0,0 +1,302 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
+import {on} from '@oscarpalmer/toretto/event';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+
+// #region Types
+
+export class OuiFloatable {
+	#destroyed = false;
+
+	readonly #state: OuiFloatableState;
+
+	/**
+	 * Is the _Floatable_ open?
+	 */
+	get open(): boolean {
+		return this.#state.content.checkVisibility();
+	}
+
+	constructor(state: OuiFloatableState, standalone: boolean) {
+		this.#state = state;
+
+		const {anchor, content} = state;
+
+		if (standalone) {
+			content.setAttribute(ATTRIBUTE_FLOATABLE, '');
+
+			content.popover = 'manual';
+		}
+
+		const anchorName = getAnchorName(anchor);
+
+		anchor.style.anchorName = anchorName;
+		content.style.positionAnchor = anchorName;
+	}
+
+	/**
+	 * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+	 */
+	destroy(): void {
+		if (this.#destroyed) {
+			return;
+		}
+
+		this.#destroyed = true;
+
+		removeFloatable(this.#state.content);
+
+		this.#state.anchor = null as never;
+		this.#state.content = null as never;
+	}
+
+	/**
+	 * Closes the _OuiFloatable_
+	 */
+	hide(): void {
+		if (!this.#destroyed && this.open) {
+			this.#state.content.hidePopover();
+		}
+	}
+
+	/**
+	 * Opens the _OuiFloatable_
+	 */
+	show(): void {
+		if (!this.#destroyed && !this.open) {
+			this.#state.content.showPopover();
+		}
+	}
+
+	/**
+	 * Update the position of the _OuiFloatable_, with an optional new position
+	 *
+	 * @param position Optional new position
+	 */
+	update(position?: OuiFloatablePosition): void {
+		if (!this.#destroyed) {
+			setPosition(this.#state, position);
+		}
+	}
+}
+
+export type OuiFloatableOptions = {
+	attribute?: string;
+	position: OuiFloatablePosition;
+};
+
+export type OuiFloatablePosition =
+	| 'above'
+	| 'above-end'
+	| 'above-start'
+	| 'below'
+	| 'below-end'
+	| 'below-start'
+	| 'end'
+	| 'end-bottom'
+	| 'end-top'
+	| 'start'
+	| 'start-bottom'
+	| 'start-top';
+
+type OuiFloatableState = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	options: OuiFloatableOptions;
+};
+
+type GetOuiFloatableOptions = {
+	/**
+	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+	 */
+	open?: boolean;
+	/**
+	 * Position of the _OuiFloatable_ _(defaults to `below`)_
+	 */
+	position?: OuiFloatablePosition;
+};
+
+// #endregion
+
+// #region Functions
+
+export function createFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+	standalone: boolean,
+): OuiFloatable {
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
+		throw new TypeError('Anchor and content must be an HTMLElement or SVGElement.');
+	}
+
+	let floatable = instances.get(content);
+
+	if (floatable == null) {
+		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
+
+		instances.set(content, floatable);
+	}
+
+	return floatable;
+}
+
+function getAnchorName(anchor: HTMLElement): string {
+	let {anchorName} = anchor.style;
+
+	if (anchorName.length > 0) {
+		return anchorName;
+	}
+
+	index += 1;
+
+	return `--oui-floatable-anchor-${index}`;
+}
+
+/**
+ * Create a _Floatable_ for an anchor and content element
+ *
+ * @param anchor Anchor element
+ * @param content Content element
+ * @param options _Floatable_ options
+ * @returns _Floatable_ instance
+ */
+export function getFloatable(
+	anchor: HTMLElement | SVGElement,
+	content: HTMLElement | SVGElement,
+	options?: GetOuiFloatableOptions,
+): OuiFloatable {
+	const {open, position} = getOptions(options);
+
+	const floatable = createFloatable(
+		anchor as HTMLElement,
+		content as HTMLElement,
+		{
+			position,
+		},
+		true,
+	);
+
+	floatable?.update(position);
+
+	if (open) {
+		floatable?.show();
+	}
+
+	return floatable;
+}
+
+export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener {
+	return on(
+		element,
+		EVENT_BEFORE,
+		event => {
+			const {newState, source} = event;
+
+			if (newState === STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
+				event.preventDefault();
+			}
+		},
+		{
+			passive: false,
+		},
+	);
+}
+
+function getOptions(input?: GetOuiFloatableOptions): Required<GetOuiFloatableOptions> {
+	const object = isPlainObject(input) ? input : {};
+
+	return {
+		open: typeof object.open === 'boolean' ? object.open : true,
+		position: object.position != null && object.position in AREAS ? object.position : 'below',
+	};
+}
+
+function getPosition(
+	state: OuiFloatableState,
+	override?: OuiFloatablePosition,
+): OuiFloatablePosition {
+	if (override != null && override in AREAS) {
+		return override;
+	}
+
+	const {anchor, options} = state;
+
+	if (options.attribute == null) {
+		return options.position;
+	}
+
+	const attribute = anchor.getAttribute(options.attribute) ?? '';
+
+	return attribute in AREAS ? (attribute as OuiFloatablePosition) : options.position;
+}
+
+function getState(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+): OuiFloatableState {
+	const state: OuiFloatableState = {
+		anchor,
+		content,
+		options,
+	};
+
+	return state;
+}
+
+export function removeFloatable(content: HTMLElement): void {
+	instances.get(content)?.destroy();
+	instances.delete(content);
+}
+
+function setPosition(state: OuiFloatableState, override?: OuiFloatablePosition): void {
+	const position = getPosition(state, override);
+
+	const area = AREAS[position];
+
+	state.content.style.positionArea = area;
+
+	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+}
+
+// #endregion
+
+// #region Variables
+
+const AREAS: Record<OuiFloatablePosition, string> = {
+	above: 'block-start',
+	'above-end': 'start span-start',
+	'above-start': 'start span-end',
+	below: 'block-end',
+	'below-end': 'end span-start',
+	'below-start': 'end span-end',
+	end: 'center end',
+	'end-bottom': 'span-start end',
+	'end-top': 'span-end end',
+	start: 'center start',
+	'start-bottom': 'span-start start',
+	'start-top': 'span-end start',
+};
+
+const ARIA_DISABLED = 'aria-disabled';
+
+export const ATTRIBUTE_FLOATABLE = 'oui-floatable';
+
+const ATTRIBUTE_POSITION = 'oui-position';
+
+const EVENT_BEFORE = 'beforetoggle';
+
+const POSITIONS = Object.fromEntries(
+	Object.entries(AREAS).map(([position, area]) => [area, position]),
+) as Record<string, OuiFloatablePosition>;
+
+const STATE_OPEN = 'open';
+
+const TRUE = 'true';
+
+const instances = new WeakMap<HTMLElement, OuiFloatable>();
+
+let index = 0;
+
+// #endregion

package/src/js/floatable/standalone.ts

@@ -0,0 +1 @@
+export {getFloatable, type OuiFloatable, type OuiFloatablePosition} from './embedded';

package/src/js/index.ts

@@ -1,7 +1,9 @@
-import './focus-trap/standalone';
 import './movable';
-import './popover';
 import './sortable';
 
+export * from './dialog';
+export * from './floatable/standalone';
+export * from './focus-trap/standalone';
+export * from './popover';
 export * from './splitter';
 export * from './tooltip';

package/src/js/internal/attributable.ts

@@ -1,3 +1,5 @@
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+
 export function attributable(
 	attribute: string,
 	add: (element: HTMLElement) => void,
@@ -9,7 +11,7 @@ export function attributable(
 		for (let index = 0; index < length; index += 1) {
 			const entry = entries[index];
 
-			if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+			if (entry.type === 'attributes' && isHTMLOrSVGElement(entry.target)) {
 				if (entry.target.hasAttribute(attribute)) {
 					handleAdded(attribute, [entry.target], add);
 				} else {
@@ -39,7 +41,7 @@ function handleAdded(
 	nodes: Node[] | NodeList,
 	add: (element: HTMLElement) => void,
 ): void {
-	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
+	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
 
 	const {length} = elements;
 
@@ -57,7 +59,7 @@ function handleAdded(
 }
 
 function handleRemoved(nodes: Node[] | NodeList, remove: (element: HTMLElement) => void): void {
-	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
+	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
 
 	const {length} = elements;