@oscarpalmer/oui 0.37.0 → 0.39.0

package/src/js/floatable/floatable.embedded.ts

@@ -1,332 +0,0 @@
-import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {getAria} from '@oscarpalmer/toretto/aria';
-import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
-import {on} from '@oscarpalmer/toretto/event';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {setStyle, setStyles} from '@oscarpalmer/toretto/style';
-
-// #region Types
-
-export type CreateOuiFloatableOptions = {
-	/**
-	 * Open the floatable when created? _(defaults to `true`)_
-	 */
-	open?: boolean;
-	/**
-	 * Position of the floatable _(defaults to `below`)_
-	 */
-	position?: OuiFloatablePosition;
-};
-
-export class OuiFloatable {
-	#destroyed = false;
-
-	readonly #state: OuiFloatableState;
-
-	/**
-	 * Is the floatable open?
-	 */
-	get open(): boolean {
-		return this.#state.content.checkVisibility();
-	}
-
-	/**
-	 * Open or close the floatable
-	 */
-	set open(value: boolean) {
-		if (value === true) {
-			this.show();
-		} else if (value === false) {
-			this.hide();
-		}
-	}
-
-	constructor(state: OuiFloatableState, standalone: boolean) {
-		this.#state = state;
-
-		const {anchor, content} = state;
-
-		if (standalone) {
-			setAttribute(content, ATTRIBUTE_FLOATABLE, '');
-
-			content.popover = 'manual';
-		} else {
-			content.popover ??= 'auto';
-		}
-
-		setStyle(anchor, 'anchorName', state.name);
-		setStyle(content, 'positionAnchor', state.name);
-	}
-
-	/**
-	 * Destroy the floatable, 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 floatable
-	 */
-	hide(): void {
-		if (!this.#destroyed && this.open) {
-			this.#state.content.hidePopover();
-		}
-	}
-
-	/**
-	 * Opens the floatable
-	 */
-	show(): void {
-		if (!this.#destroyed && !this.open) {
-			this.#state.content.showPopover();
-		}
-	}
-
-	/**
-	 * Update the position of the floatable, 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;
-	reusable: boolean;
-};
-
-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;
-	name: string;
-	options: OuiFloatableOptions;
-};
-
-// #endregion
-
-// #region Functions
-
-function getAnchorName(anchor: HTMLElement): string {
-	let {anchorName} = anchor.style;
-
-	if (anchorName.length > 0) {
-		return anchorName;
-	}
-
-	index += 1;
-
-	return `--oui-floatable-anchor-${index}`;
-}
-
-export function createEmbeddedFloatable(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	options: OuiFloatableOptions,
-): OuiFloatable {
-	return createInstance(anchor, content, options, false);
-}
-
-/**
- * Create a _OuiFloatable_ for an anchor and content element
- *
- * @param anchor Anchor element
- * @param content Content element
- * @param options _OuiFloatable_ options
- * @returns _OuiFloatable_ instance
- */
-export function createFloatable(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	options?: CreateOuiFloatableOptions,
-): OuiFloatable {
-	const {open, position} = getOptions(options);
-
-	const floatable = createInstance(
-		anchor,
-		content,
-		{
-			position,
-			reusable: false,
-		},
-		true,
-	);
-
-	floatable?.update(position);
-
-	if (open) {
-		floatable?.show();
-	}
-
-	return floatable;
-}
-
-function createInstance(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	options: OuiFloatableOptions,
-	standalone: boolean,
-): OuiFloatable {
-	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
-		throw new TypeError(MESSAGE);
-	}
-
-	let floatable = options.reusable ? undefined : instances.get(content);
-
-	if (floatable == null) {
-		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
-
-		if (!options.reusable) {
-			instances.set(content, floatable);
-		}
-	}
-
-	return floatable;
-}
-
-export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener {
-	return on(
-		element,
-		'beforetoggle',
-		event => {
-			const {newState, source} = event;
-
-			if (newState === 'open' && source != null && getAria(source, 'disabled') === 'true') {
-				event.preventDefault();
-			}
-		},
-		{
-			passive: false,
-		},
-	);
-}
-
-function getOptions(input?: CreateOuiFloatableOptions): Required<CreateOuiFloatableOptions> {
-	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 = getAttribute(anchor, options.attribute);
-
-	return attribute != null && attribute in AREAS
-		? (attribute as OuiFloatablePosition)
-		: options.position;
-}
-
-function getState(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	options: OuiFloatableOptions,
-): OuiFloatableState {
-	const name = getAnchorName(anchor);
-
-	const state: OuiFloatableState = {
-		anchor,
-		content,
-		name,
-		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];
-
-	setAttribute(state.content, ATTRIBUTE_POSITION, POSITIONS[area]);
-
-	setStyles(state.content, {
-		positionAnchor: state.name,
-		positionArea: 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',
-};
-
-export const ATTRIBUTE_FLOATABLE = 'oui-floatable';
-
-const ATTRIBUTE_POSITION = 'oui-position';
-
-const MESSAGE = 'Anchor and content must be an HTMLElement or SVGElement';
-
-const POSITIONS = Object.fromEntries(
-	Object.entries(AREAS).map(([position, area]) => [area, position]),
-) as Record<string, OuiFloatablePosition>;
-
-const instances = new WeakMap<HTMLElement, OuiFloatable>();
-
-let index = 0;
-
-// #endregion

package/src/js/floatable/floatable.standalone.ts

@@ -1,6 +0,0 @@
-export {
-	createFloatable,
-	type CreateOuiFloatableOptions,
-	type OuiFloatable,
-	type OuiFloatablePosition,
-} from './floatable.embedded';