@oscarpalmer/oui 0.24.0 → 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.ts → floatable/embedded.ts}

@@ -1,22 +1,27 @@
 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';
 
-export class Floatable {
+// #region Types
+
+export class OuiFloatable {
 	#destroyed = false;
 
+	readonly #state: OuiFloatableState;
+
 	/**
 	 * Is the _Floatable_ open?
 	 */
 	get open(): boolean {
-		return this.content.checkVisibility();
+		return this.#state.content.checkVisibility();
 	}
 
-	constructor(
-		public anchor: HTMLElement,
-		public content: HTMLElement,
-		public options: FloatableOptions,
-		standalone: boolean,
-	) {
+	constructor(state: OuiFloatableState, standalone: boolean) {
+		this.#state = state;
+
+		const {anchor, content} = state;
+
 		if (standalone) {
 			content.setAttribute(ATTRIBUTE_FLOATABLE, '');
 
@@ -30,7 +35,7 @@ export class Floatable {
 	}
 
 	/**
-	 * Destroy the floatable, removing it from the DOM and cleaning up references
+	 * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
 	 */
 	destroy(): void {
 		if (this.#destroyed) {
@@ -39,48 +44,48 @@ export class Floatable {
 
 		this.#destroyed = true;
 
-		removeFloatable(this.content);
+		removeFloatable(this.#state.content);
 
-		this.anchor = null as never;
-		this.content = null as never;
+		this.#state.anchor = null as never;
+		this.#state.content = null as never;
 	}
 
 	/**
-	 * Hide the floatable
+	 * Closes the _OuiFloatable_
 	 */
 	hide(): void {
-		if (!this.#destroyed) {
-			this.content.hidePopover();
+		if (!this.#destroyed && this.open) {
+			this.#state.content.hidePopover();
 		}
 	}
 
 	/**
-	 * Show the floatable
+	 * Opens the _OuiFloatable_
 	 */
 	show(): void {
-		if (!this.#destroyed) {
-			this.content.showPopover();
+		if (!this.#destroyed && !this.open) {
+			this.#state.content.showPopover();
 		}
 	}
 
 	/**
-	 * Update the position of the floatable, with an optional new position
+	 * Update the position of the _OuiFloatable_, with an optional new position
 	 *
 	 * @param position Optional new position
 	 */
-	update(position?: FloatablePosition): void {
+	update(position?: OuiFloatablePosition): void {
 		if (!this.#destroyed) {
-			setPosition(this, position);
+			setPosition(this.#state, position);
 		}
 	}
 }
 
-export type FloatableOptions = {
+export type OuiFloatableOptions = {
 	attribute?: string;
-	position: FloatablePosition;
+	position: OuiFloatablePosition;
 };
 
-export type FloatablePosition =
+export type OuiFloatablePosition =
 	| 'above'
 	| 'above-end'
 	| 'above-start'
@@ -94,23 +99,33 @@ export type FloatablePosition =
 	| 'start-bottom'
 	| 'start-top';
 
-type GetFloatableOptions = {
+type OuiFloatableState = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	options: OuiFloatableOptions;
+};
+
+type GetOuiFloatableOptions = {
 	/**
-	 * Open the _Floatable_ when created? _(defaults to `true`)_
+	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
 	 */
 	open?: boolean;
 	/**
-	 * Position of the _Floatable_ _(defaults to `below`)_
+	 * Position of the _OuiFloatable_ _(defaults to `below`)_
 	 */
-	position?: FloatablePosition;
+	position?: OuiFloatablePosition;
 };
 
+// #endregion
+
+// #region Functions
+
 export function createFloatable(
 	anchor: HTMLElement,
 	content: HTMLElement,
-	options: FloatableOptions,
+	options: OuiFloatableOptions,
 	standalone: boolean,
-): Floatable {
+): OuiFloatable {
 	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
 		throw new TypeError('Anchor and content must be an HTMLElement or SVGElement.');
 	}
@@ -118,7 +133,7 @@ export function createFloatable(
 	let floatable = instances.get(content);
 
 	if (floatable == null) {
-		floatable = new Floatable(anchor, content, options, standalone);
+		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
 
 		instances.set(content, floatable);
 	}
@@ -149,8 +164,8 @@ function getAnchorName(anchor: HTMLElement): string {
 export function getFloatable(
 	anchor: HTMLElement | SVGElement,
 	content: HTMLElement | SVGElement,
-	options?: GetFloatableOptions,
-): Floatable {
+	options?: GetOuiFloatableOptions,
+): OuiFloatable {
 	const {open, position} = getOptions(options);
 
 	const floatable = createFloatable(
@@ -171,7 +186,24 @@ export function getFloatable(
 	return floatable;
 }
 
-function getOptions(input?: GetFloatableOptions): Required<GetFloatableOptions> {
+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 {
@@ -180,18 +212,37 @@ function getOptions(input?: GetFloatableOptions): Required<GetFloatableOptions>
 	};
 }
 
-function getPosition(floatable: Floatable, override?: FloatablePosition): FloatablePosition {
+function getPosition(
+	state: OuiFloatableState,
+	override?: OuiFloatablePosition,
+): OuiFloatablePosition {
 	if (override != null && override in AREAS) {
 		return override;
 	}
 
-	if (floatable.options.attribute == null) {
-		return floatable.options.position;
+	const {anchor, options} = state;
+
+	if (options.attribute == null) {
+		return options.position;
 	}
 
-	const attribute = floatable.anchor.getAttribute(floatable.options.attribute) ?? '';
+	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 attribute in AREAS ? (attribute as FloatablePosition) : floatable.options.position;
+	return state;
 }
 
 export function removeFloatable(content: HTMLElement): void {
@@ -199,17 +250,21 @@ export function removeFloatable(content: HTMLElement): void {
 	instances.delete(content);
 }
 
-function setPosition(floatable: Floatable, override?: FloatablePosition): void {
-	const position = getPosition(floatable, override);
+function setPosition(state: OuiFloatableState, override?: OuiFloatablePosition): void {
+	const position = getPosition(state, override);
 
 	const area = AREAS[position];
 
-	floatable.content.style.positionArea = area;
+	state.content.style.positionArea = area;
 
-	floatable.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
 }
 
-const AREAS: Record<FloatablePosition, string> = {
+// #endregion
+
+// #region Variables
+
+const AREAS: Record<OuiFloatablePosition, string> = {
 	above: 'block-start',
 	'above-end': 'start span-start',
 	'above-start': 'start span-end',
@@ -224,14 +279,24 @@ const AREAS: Record<FloatablePosition, string> = {
 	'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, FloatablePosition>;
+) as Record<string, OuiFloatablePosition>;
 
-const instances = new WeakMap<HTMLElement, Floatable>();
+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,8 +1,9 @@
-import './focus-trap/standalone';
 import './movable';
-import './popover';
 import './sortable';
 
-export {getFloatable} from './floatable'
+export * from './dialog';
+export * from './floatable/standalone';
+export * from './focus-trap/standalone';
+export * from './popover';
 export * from './splitter';
-export {setTooltipDelay} from './tooltip';
+export * from './tooltip';