@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/js/menu.ts

@@ -1,348 +0,0 @@
-import {setAria, setRole} from '@oscarpalmer/toretto/aria';
-import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
-import {on} from '@oscarpalmer/toretto/event';
-import {findAncestor} from '@oscarpalmer/toretto/find';
-import {createEmbeddedFloatable, getOnBeforeToggleListener} from './floatable/floatable.embedded';
-import type {OuiFloatable} from './floatable/floatable.standalone';
-import {attributable} from './internal/attributable';
-import {
-	NAVIGABLE_KEYS_HORIZONTAL,
-	NAVIGABLE_KEYS_VERTICAL,
-	type OuiNavigable,
-	type OuiNavigableOptions,
-	getNavigable,
-	updateNavigableFocus,
-} from './internal/navigable';
-
-// #region Types
-
-type OuiBasicMenu = {
-	destroy(): void;
-};
-
-type OuiBasicMenuOptions = Pick<OuiNavigableOptions, 'role' | 'selector' | 'vertical'>;
-
-class OuiMenu {
-	content: HTMLElement;
-
-	element: HTMLElement;
-
-	floatable: OuiFloatable;
-
-	navigable: OuiNavigable;
-
-	toggle: HTMLElement;
-
-	get open(): boolean {
-		return this.floatable.open;
-	}
-
-	constructor(element: HTMLElement, navigable: OuiNavigable) {
-		this.element = element;
-		this.navigable = navigable;
-
-		this.content = navigable.element;
-
-		this.toggle = element.querySelector(SELECTOR_MENU_TOGGLE)!;
-
-		this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
-			attribute: ATTRIBUTE_MENU_POSITION,
-			position:
-				findAncestor(element.parentElement!, SELECTOR_MENU_CONTENT) == null
-					? 'below-start'
-					: 'end-top',
-			reusable: false,
-		});
-
-		this.navigable.listeners.push(
-			getOnBeforeToggleListener(this.content),
-			on(this.content, 'click', event => {
-				event.stopPropagation();
-
-				const toggle = findAncestor(event, SELECTOR_MENU_TOGGLE);
-
-				if (toggle != null) {
-					return;
-				}
-
-				const elements = document.querySelectorAll(SELECTOR_MENU_CONTENT);
-
-				for (const element of elements) {
-					menus.get(element as HTMLElement)?.floatable.hide();
-				}
-
-				const menu = menus.get(elements[0] as HTMLElement);
-
-				if (menu != null && event.pointerId === -1) {
-					updateNavigableFocus(menu.navigable, true);
-				}
-			}),
-			on(this.content, 'toggle', event => {
-				const expanded = event.newState === 'open';
-
-				if (expanded) {
-					this.floatable?.update();
-
-					updateNavigableFocus(this.navigable, true);
-				} else {
-				}
-
-				setAria(this.toggle, 'expanded', expanded);
-			}),
-		);
-
-		this.floatable.update();
-
-		initializeMenu(this);
-
-		updateNavigableFocus(this.navigable, false);
-	}
-
-	destroy(): void {
-		this.floatable.destroy();
-		this.navigable.destroy();
-
-		this.floatable = undefined as never;
-		this.navigable = undefined as never;
-	}
-}
-
-class OuiMenubar {
-	element: HTMLElement;
-
-	navigable: OuiNavigable;
-
-	constructor(element: HTMLElement, navigable: OuiNavigable) {
-		this.element = element;
-		this.navigable = navigable;
-
-		updateNavigableFocus(this.navigable, false);
-	}
-
-	destroy(): void {
-		this.navigable.destroy();
-
-		this.navigable = undefined as never;
-	}
-}
-
-// #endregion
-
-// #region Functions
-
-function addInstance<Instance>(
-	instances: WeakMap<HTMLElement, Instance>,
-	ctor: new (element: HTMLElement, navigable: OuiNavigable) => Instance,
-	element: HTMLElement,
-	content: HTMLElement,
-	options: OuiBasicMenuOptions,
-): void {
-	if (!instances.has(content)) {
-		instances.set(
-			content,
-			new ctor(
-				element,
-				getNavigable(content, {
-					...options,
-					onDeactivate,
-					onPreventNavigation,
-					onShouldActivate,
-					onShouldDeactivate,
-				}),
-			),
-		);
-	}
-}
-
-function addMenu(element: HTMLElement): void {
-	const content = element.querySelector(SELECTOR_MENU_CONTENT);
-	const toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
-
-	if (content != null && toggle != null) {
-		addInstance(menus, OuiMenu, element, content as never, {
-			selector: SELECTOR_MENU_ITEM,
-			vertical: true,
-		});
-	}
-}
-
-function addMenubar(element: HTMLElement): void {
-	addInstance(menubars, OuiMenubar, element, element, {
-		role: 'menubar',
-		selector: SELECTOR_MENUBAR_ITEM,
-		vertical: false,
-	});
-}
-
-function getId(element: HTMLElement, value?: string): string {
-	let {id} = element;
-
-	if (id == null || id.trim().length === 0) {
-		id = value == null ? `oui_menu_${++index}` : `${value}_toggle`;
-
-		element.id = id;
-	}
-
-	return id;
-}
-
-function initializeMenu(menu: OuiMenu): void {
-	const id = getId(menu.content);
-
-	setAttribute(menu.toggle, 'popovertarget', id);
-
-	setAria(menu.toggle, {
-		controls: id,
-		expanded: 'false',
-		haspopup: 'menu',
-	});
-
-	setAttributes(menu.content, {
-		popover: '',
-		tabindex: '-1',
-	});
-
-	setRole(menu.content, 'menu');
-}
-
-function onDeactivate(_: KeyboardEvent, navigable: OuiNavigable): void {
-	const menu = menus.get(navigable.element);
-
-	if (menu == null) {
-		return;
-	}
-
-	menu.floatable.hide();
-
-	const element = findAncestor(menu.element.parentElement!, SELECTORS) as HTMLElement | null;
-
-	if (element == null) {
-		return;
-	}
-
-	const instance = menubars.get(element) ?? menus.get(element);
-
-	if (instance != null) {
-		updateNavigableFocus(instance.navigable, true);
-	}
-}
-
-function onPreventNavigation(_: KeyboardEvent, navigable: OuiNavigable): boolean {
-	const instance = menubars.get(navigable.element) ?? menus.get(navigable.element);
-
-	return findAncestor(instance?.element.parentElement!, SELECTORS) != null;
-}
-
-function onShouldActivate(event: KeyboardEvent, navigable: OuiNavigable): boolean {
-	let activate = false;
-
-	if (menubars.has(navigable.element)) {
-		activate =
-			navigable.orientation === 'horizontal'
-				? NAVIGABLE_KEYS_VERTICAL.has(event.key)
-				: NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
-	} else if (menus.has(navigable.element)) {
-		activate =
-			navigable.orientation === 'horizontal'
-				? NAVIGABLE_KEYS_VERTICAL.has(event.key)
-				: event.key === 'ArrowRight';
-	}
-
-	if (activate) {
-		const target =
-			event.target instanceof HTMLElement && event.target.matches(SELECTOR_MENU_TOGGLE)
-				? event.target
-				: undefined;
-
-		if (target == null) {
-			activate = false;
-		} else {
-			target.click();
-		}
-	}
-
-	return activate;
-}
-
-function onShouldDeactivate(event: KeyboardEvent, navigable: OuiNavigable): boolean | undefined {
-	if (menubars.has(navigable.element)) {
-		return;
-	}
-
-	const menu = menus.get(navigable.element);
-
-	if (menu == null) {
-		return;
-	}
-
-	const horizontal = navigable.orientation === 'horizontal';
-
-	const altKey = horizontal ? 'ArrowDown' : 'ArrowRight';
-	const baseKey = horizontal ? 'ArrowUp' : 'ArrowLeft';
-
-	if (event.key === baseKey) {
-		return findAncestor(menu.element.parentElement!, SELECTOR_MENU_CONTENT) != null;
-	}
-
-	if (
-		event.key === altKey &&
-		event.target instanceof HTMLElement &&
-		!event.target.hasAttribute('popovertarget')
-	) {
-		return false;
-	}
-}
-
-function removeInstance<Instance extends OuiBasicMenu>(
-	instances: WeakMap<HTMLElement, Instance>,
-	element: HTMLElement,
-): void {
-	instances.get(element)?.destroy();
-
-	instances.delete(element);
-}
-
-function removeMenu(element: HTMLElement): void {
-	removeInstance(menus, element);
-}
-
-function removeMenubar(element: HTMLElement): void {
-	removeInstance(menubars, element);
-}
-
-// #endregion
-
-// #region Variables
-
-const ATTRIBUTE_MENU = 'oui-menu';
-
-const ATTRIBUTE_MENU_POSITION = 'oui-menu-position';
-
-const ATTRIBUTE_MENUBAR = 'oui-menubar';
-
-const SELECTOR_MENUBAR = `[${ATTRIBUTE_MENUBAR}]`;
-
-const SELECTOR_MENUBAR_ITEM = `:scope > [${ATTRIBUTE_MENUBAR}-item], :scope > * > [${ATTRIBUTE_MENUBAR}-item]`;
-
-const SELECTOR_MENU_CONTENT = `[${ATTRIBUTE_MENU}-content]`;
-
-const SELECTOR_MENU_ITEM = `:scope > [${ATTRIBUTE_MENU}-item], :scope > * > [${ATTRIBUTE_MENU}-item]`;
-
-const SELECTOR_MENU_TOGGLE = `[${ATTRIBUTE_MENU}-toggle]`;
-
-const SELECTORS = `${SELECTOR_MENUBAR}, ${SELECTOR_MENU_CONTENT}`;
-
-const menubars = new WeakMap<HTMLElement, OuiMenubar>();
-
-const menus = new WeakMap<HTMLElement, OuiMenu>();
-
-let index = 0;
-
-// #endregion
-
-// #region Initialization
-
-attributable(ATTRIBUTE_MENU, addMenu, removeMenu);
-attributable(ATTRIBUTE_MENUBAR, addMenubar, removeMenubar);
-
-// #endregion

package/src/js/movable/movable.embedded.ts

@@ -1,318 +0,0 @@
-import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
-import {setAttribute} from '@oscarpalmer/toretto/attribute';
-import {dispatch, getEventPosition, on} from '@oscarpalmer/toretto/event';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {getStyles, setStyle, setStyles} from '@oscarpalmer/toretto/style';
-import {attributable} from '../internal/attributable';
-import {
-	addDraggable,
-	getDraggableStates,
-	OuiDraggable,
-	removeDraggable,
-	type CreateOuiDraggableOptions,
-	type OuiDraggableBound,
-	type OuiDraggableGlobals,
-	type OuiDraggableItem,
-	type OuiDraggableState,
-	type OuiDragMovePosition,
-} from '../internal/draggable';
-
-// #region Types
-
-export class OuiMovable extends OuiDraggable<OuiMovableState> {
-	#element: HTMLElement;
-
-	#style: OuiMovableStyle;
-
-	constructor(element: HTMLElement, options?: CreateOuiDraggableOptions) {
-		const style = getStyles(element, ['inset', 'position']);
-
-		super(
-			'movable',
-			'move',
-			ATTRIBUTE_MOVABLE,
-			element,
-			{
-				container: {
-					attribute: ATTRIBUTE_CONTAINER,
-					map: CONTAINERS,
-					onDestroy: destroyContainer,
-					onInitialize: initializeContainer,
-				},
-				direction: {
-					attribute: ATTRIBUTE_DIRECTION,
-					onAfter: afterDirection,
-				},
-				drag: {
-					onBegin,
-					onCancel,
-					onEnd,
-					onMove,
-				},
-				input: options,
-				position: {
-					getOffset: getOffsetPosition,
-					getOriginal: getOriginalPosition,
-				},
-				getDragged() {
-					return element;
-				},
-				getOrigin() {
-					return element;
-				},
-			},
-			{
-				style,
-				hasHandles: element.querySelector(SELECTOR_HANDLE) != null,
-				moved: false,
-			},
-		);
-
-		this.#element = element;
-
-		this.#style = style;
-	}
-
-	/**
-	 * Destroys the _Movable_
-	 */
-	override destroy(): void {
-		MOVED.delete(this);
-
-		setStyles(this.#element, this.#style);
-
-		this.#element = undefined as never;
-		this.#style = undefined as never;
-
-		super.destroy();
-	}
-}
-
-type OuiMovableState = {
-	hasHandles?: boolean;
-	moved: boolean;
-	offset?: Partial<EventPosition>;
-	style: OuiMovableStyle;
-};
-
-type OuiMovableStyle = {
-	inset: string | undefined;
-	position: string | undefined;
-};
-
-// #endregion
-
-// #region Functions
-
-function afterDirection(item: OuiDraggableItem): void {
-	const container = item.state.container?.getBoundingClientRect();
-
-	if (container != null) {
-		setOffset(item.state as OuiDraggableState & OuiMovableState, container);
-	}
-}
-
-/**
- * Creates _(or retrieves)_ a _OuiMovable_ instance for an element
- *
- * @param element Element to make movable
- * @returns _OuiMovable_ instance
- */
-export function createMovable(
-	element: HTMLElement,
-	options?: CreateOuiDraggableOptions,
-): OuiMovable {
-	if (!isHTMLOrSVGElement(element)) {
-		throw new TypeError(MESSAGE);
-	}
-
-	return addMovable(element, options) as OuiMovable;
-}
-
-function destroyContainer(_: unknown, container: HTMLElement, empty: boolean): void {
-	if (empty) {
-		resizer.unobserve(container);
-	}
-}
-
-function getOffsetPosition(
-	globals: OuiDraggableGlobals,
-	_: OuiDraggableItem,
-	__: HTMLElement,
-	position: EventPosition,
-): EventPosition {
-	return {
-		x: position.x - (globals.element?.rectangle.left ?? 0),
-		y: position.y - (globals.element?.rectangle.top ?? 0),
-	};
-}
-
-function getOriginalPosition(globals: OuiDraggableGlobals): EventPosition {
-	return {
-		x: globals.element?.rectangle.left ?? 0,
-		y: globals.element?.rectangle.top ?? 0,
-	};
-}
-
-function initializeContainer(item: OuiDraggableItem): void {
-	resizer.observe(item.state.container!);
-}
-
-function onBegin(): void {}
-
-function onCancel(globals: OuiDraggableGlobals, item: OuiDraggableItem): void {
-	const {element, moved, style} = item.state as OuiDraggableState & OuiMovableState;
-
-	const {x, y} = globals.original ?? {x: 0, y: 0};
-
-	if (moved) {
-		setStyle(element, 'inset', `${y}px auto auto ${x}px`);
-	} else {
-		setStyles(element, style);
-	}
-
-	element.removeAttribute(ATTRIBUTE_MOVING);
-}
-
-function onEnd(
-	event: MouseEvent | TouchEvent,
-	globals: OuiDraggableGlobals,
-	item: OuiDraggableItem,
-	reset: () => void,
-): void {
-	const movable = item.instance as OuiMovable;
-	const state = item.state as OuiDraggableState & OuiMovableState;
-
-	state.element.removeAttribute(ATTRIBUTE_MOVING);
-
-	if (!state.moved) {
-		state.moved = true;
-
-		if (state.container != null) {
-			MOVED.add(movable);
-		}
-	}
-
-	const container = state.container?.getBoundingClientRect();
-
-	if (container != null) {
-		setOffset(state, container);
-	}
-
-	if (
-		dispatch(state.element, 'oui:movable:end', {
-			detail: {
-				from: {...globals.original},
-				to: getEventPosition(event),
-			},
-		}).defaultPrevented
-	) {
-		onCancel(globals, item);
-	}
-
-	reset();
-}
-
-function onMove(
-	_: MouseEvent | TouchEvent,
-	globals: OuiDraggableGlobals,
-	__: OuiDraggableItem,
-	position: OuiDragMovePosition,
-): PlainObject | undefined {
-	setAttribute(globals.element?.node as never, ATTRIBUTE_MOVING, '');
-
-	return {
-		from: {...globals.original},
-		to: {...position.calculated},
-	};
-}
-
-function onResize(entries: ResizeObserverEntry[]): void {
-	const {length} = entries;
-
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
-		const set = CONTAINERS.get(entry.target as HTMLElement);
-
-		if (set == null) {
-			continue;
-		}
-
-		for (const movable of set) {
-			reposition(movable);
-		}
-	}
-}
-
-function onScroll(): void {
-	for (const moved of MOVED) {
-		reposition(moved);
-	}
-}
-
-function reposition(movable: OuiMovable): void {
-	const state = getDraggableStates(movable.element)?.movable as OuiDraggableState & OuiMovableState;
-
-	if (state == null || !state.moved || state.container == null) {
-		return;
-	}
-
-	const container = state.container.getBoundingClientRect();
-
-	const x = container.left + (state.offset?.x ?? 0);
-	const y = container.top + (state.offset?.y ?? 0);
-
-	setStyle(state.element, 'inset', `${y}px auto auto ${x}px`);
-}
-
-function setOffset(state: OuiDraggableState & OuiMovableState, container: DOMRect): void {
-	state.offset = {};
-
-	const element = state.element.getBoundingClientRect();
-
-	state.offset.y = element.top - container.top;
-	state.offset.x = element.left - container.left;
-}
-
-// #endregion
-
-// #region Variables
-
-export const ATTRIBUTE_MOVABLE = 'oui-movable';
-
-const ATTRIBUTE_CONTAINER = `${ATTRIBUTE_MOVABLE}-container`;
-
-const ATTRIBUTE_DIRECTION = `${ATTRIBUTE_MOVABLE}-direction`;
-
-export const ATTRIBUTE_MOVABLE_HANDLE = `${ATTRIBUTE_MOVABLE}-handle`;
-
-const ATTRIBUTE_MOVING = `${ATTRIBUTE_MOVABLE}-moving`;
-
-const CONTAINERS = new Map<HTMLElement, Set<OuiMovable>>();
-
-const MESSAGE = 'The element must be an instance of HTMLElement or SVGElement';
-
-const MOVED = new Set<OuiMovable>();
-
-const SELECTOR_HANDLE = `[${ATTRIBUTE_MOVABLE_HANDLE}]`;
-
-const bound: OuiDraggableBound = {
-	constructor: OuiMovable,
-	property: 'movable',
-};
-
-const resizer = new ResizeObserver(onResize);
-
-const addMovable = addDraggable.bind(bound);
-
-const removeMovable = removeDraggable.bind(bound);
-
-// #endregion
-
-// #region Initialization
-
-on(document, 'scroll', onScroll);
-
-attributable(ATTRIBUTE_MOVABLE, addMovable, removeMovable);
-
-// #endregion

package/src/js/movable/movable.standalone.ts

@@ -1,2 +0,0 @@
-export type {CreateOuiDraggableOptions as CreateOuiMovableOptions} from '../internal/draggable';
-export {createMovable, type OuiMovable} from './movable.embedded';