@oscarpalmer/oui 0.20.0 → 0.21.0

package/src/js/movable.ts

@@ -0,0 +1,260 @@
+import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
+import {getPosition, on} from '@oscarpalmer/toretto/event';
+import {attributable} from './internal/attributable';
+import {
+	addDraggable,
+	Draggable,
+	removeDraggable,
+	type DraggableBound,
+	type DraggableState,
+	type DragMovePosition,
+} from './internal/draggable';
+
+// #region Types
+
+export class Movable extends Draggable {
+	inset: string;
+
+	moved = false;
+
+	offset: Partial<EventPosition> | undefined;
+
+	position: string;
+
+	get dragged(): HTMLElement {
+		return this.element;
+	}
+
+	get origin(): HTMLElement | undefined {
+		return this.element;
+	}
+
+	constructor(element: HTMLElement) {
+		super('move', element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS,
+				onDestroy: destroyContainer,
+				onInitialize: initializeContainer,
+			},
+			direction: {
+				attribute: ATTRIBUTE_DIRECTION,
+				onAfter: afterDirection,
+			},
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd,
+				onMove,
+			},
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition,
+			},
+		});
+
+		this.hasHandles = element.querySelector(SELECTOR_HANDLE) != null;
+
+		this.inset = element.style.inset;
+		this.position = element.style.position;
+	}
+
+	override destroy(): void {
+		super.destroy();
+
+		MOVED.delete(this);
+
+		this.element.style.inset = this.inset;
+		this.element.style.position = this.position;
+	}
+}
+
+// #endregion
+
+// #region Functions
+
+function afterDirection(draggable: Draggable): void {
+	const container = draggable.container?.getBoundingClientRect();
+
+	if (container != null) {
+		setOffset(draggable as Movable, container);
+	}
+}
+
+function destroyContainer(_: Draggable, container: HTMLElement, empty: boolean): void {
+	if (empty) {
+		resizer.unobserve(container);
+	}
+}
+
+function getOffsetPosition(
+	state: DraggableState,
+	_: Draggable,
+	__: HTMLElement,
+	position: EventPosition,
+): EventPosition {
+	return {
+		x: position.x - (state.element?.rectangle.left ?? 0),
+		y: position.y - (state.element?.rectangle.top ?? 0),
+	};
+}
+
+function getOriginalPosition(state: DraggableState): EventPosition {
+	return {
+		x: state.element?.rectangle.left ?? 0,
+		y: state.element?.rectangle.top ?? 0,
+	};
+}
+
+function initializeContainer(draggable: Draggable): void {
+	resizer.observe(draggable.container!);
+}
+
+function onBegin(): void {}
+
+function onCancel(state: DraggableState, draggable: Draggable): void {
+	const movable = draggable as Movable;
+
+	const {element, inset, moved, position} = movable;
+	const {x, y} = state.original ?? {x: 0, y: 0};
+
+	if (moved) {
+		element.style.inset = `${y}px auto auto ${x}px`;
+	} else {
+		element.style.position = position;
+		element.style.inset = inset;
+	}
+}
+
+function onEnd(
+	event: MouseEvent | TouchEvent,
+	state: DraggableState,
+	draggable: Draggable,
+	reset: () => void,
+): void {
+	const movable = draggable as Movable;
+
+	if (!movable.moved) {
+		movable.moved = true;
+
+		if (movable.container != null) {
+			MOVED.add(movable);
+		}
+	}
+
+	const container = movable.container?.getBoundingClientRect();
+
+	if (container != null) {
+		setOffset(movable, container);
+	}
+
+	const end = new CustomEvent(EVENT_END, {
+		detail: {
+			from: {...state.original},
+			to: getPosition(event),
+		},
+		cancelable: true,
+	});
+
+	movable.element.dispatchEvent(end);
+
+	setTimeout(() => {
+		if (end.defaultPrevented) {
+			onCancel(state, draggable);
+		}
+
+		reset();
+	});
+}
+
+function onMove(
+	_: MouseEvent | TouchEvent,
+	state: DraggableState,
+	__: Draggable,
+	position: DragMovePosition,
+): PlainObject | undefined {
+	return {
+		from: {...state.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: Movable): void {
+	if (!movable.moved || movable.container == null) {
+		return;
+	}
+
+	const container = movable.container.getBoundingClientRect();
+
+	const x = container.left + (movable.offset?.x ?? 0);
+	const y = container.top + (movable.offset?.y ?? 0);
+
+	movable.element.style.inset = `${y}px auto auto ${x}px`;
+}
+
+function setOffset(movable: Movable, container: DOMRect): void {
+	movable.offset = {};
+
+	const element = movable.element.getBoundingClientRect();
+
+	movable.offset.y = element.top - container.top;
+	movable.offset.x = element.left - container.left;
+}
+
+// #endregion
+
+// #region Variables
+
+const ATTRIBUTE = 'oui-movable';
+
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
+
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
+
+const CONTAINERS = new Map<HTMLElement, Set<Movable>>();
+
+const EVENT_END = 'move:end';
+
+const MOVED = new Set<Movable>();
+
+const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
+
+const bound: DraggableBound = {
+	constructor: Movable,
+	property: 'movable',
+};
+
+const resizer = new ResizeObserver(onResize);
+
+// #endregion
+
+// #region Initialization
+
+attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
+
+on(document, 'scroll', onScroll);
+
+// #endregion

package/src/js/popover.ts

@@ -1,6 +1,6 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
-import {Floatable} from './floatable';
+import {Floatable} from './internal/floatable';
 import {createFocusTrap, type FocusTrap} from './focus-trap/embedded';
 
 declare global {

package/src/js/sortable.ts

@@ -0,0 +1,467 @@
+import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
+import {createElement} from '@oscarpalmer/toretto/create';
+import {getPosition} from '@oscarpalmer/toretto/event';
+import {findAncestor, getElementFromPosition} from '@oscarpalmer/toretto/find';
+import {attributable} from './internal/attributable';
+import {
+	addDraggable,
+	Draggable,
+	removeDraggable,
+	type DraggableBound,
+	type DraggableState,
+	type DragMovePosition,
+} from './internal/draggable';
+
+// #region Types
+
+export class Sortable extends Draggable {
+	connections: string | null;
+
+	origin: HTMLElement | undefined;
+
+	get dragged(): HTMLElement {
+		return getDragPlaceholder();
+	}
+
+	constructor(element: HTMLElement) {
+		super('sort', element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS,
+			},
+			direction: {
+				attribute: ATTRIBUTE_DIRECTION,
+			},
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd,
+				onMove,
+			},
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition,
+			},
+		});
+
+		this.connections = this.element.getAttribute(ATTRIBUTE_CONNECTIONS);
+	}
+}
+
+type SortablePlaceholder = {
+	drag: SortablePlaceholderDrag;
+	position: HTMLElement | undefined;
+};
+
+type SortablePlaceholderDrag = {
+	custom: HTMLElement | undefined;
+	default: HTMLElement | undefined;
+};
+
+// #endregion
+
+// #region Functions
+
+function afterEnd(
+	insert: 'append' | 'insert' | 'prepend' | undefined,
+	from: Sortable,
+	events: CustomEvent[],
+	elements: {origin?: HTMLElement; target: HTMLElement},
+	position: EventPosition | undefined,
+	valid: boolean,
+): void {
+	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+
+	from.origin = undefined;
+
+	resetPlaceholders();
+
+	if (!valid || events.some(event => event.defaultPrevented)) {
+		return;
+	}
+
+	if (insert !== 'insert') {
+		elements.target.append(elements.origin!);
+
+		return;
+	}
+
+	if (position == null) {
+		return;
+	}
+
+	const {height, top} = elements.target.getBoundingClientRect();
+
+	let insertion: 'afterend' | 'beforebegin';
+
+	if (position.y < top + height / 2) {
+		insertion = INSERT_BEFORE;
+	} else {
+		insertion = INSERT_AFTER;
+	}
+
+	elements.target?.insertAdjacentElement(insertion, elements.origin!);
+
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+}
+
+function getDragPlaceholder(): HTMLElement {
+	placeholder.drag.default ??= createElement('div');
+
+	return placeholder.drag.custom ?? placeholder.drag.default;
+}
+
+function getOffsetPosition(
+	_: DraggableState,
+	draggable: Draggable,
+	element: HTMLElement,
+	position: EventPosition,
+): EventPosition {
+	const rectangle = element.getBoundingClientRect();
+
+	return {
+		x: draggable.horizontal ? 0 : position.x - rectangle.left,
+		y: draggable.vertical ? 0 : position.y - rectangle.top,
+	};
+}
+
+function getOriginalPosition(
+	_: DraggableState,
+	__: Draggable,
+	position: EventPosition,
+): EventPosition {
+	return position;
+}
+
+function getPositionPlaceholder(sortable: Sortable): HTMLElement {
+	placeholder.position ??= createElement('div');
+
+	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, '');
+
+	if (sortable.origin != null) {
+		placeholder.position.style.setProperty(
+			'--placeholder-height',
+			`${sortable.origin.getBoundingClientRect().height}px`,
+		);
+	}
+
+	return placeholder.position;
+}
+
+function onBegin(
+	_: MouseEvent | TouchEvent,
+	state: DraggableState,
+	draggable: Draggable,
+	element: HTMLElement,
+): void {
+	const sortable = draggable as Sortable;
+
+	sortable.origin = element;
+
+	setPlaceholder(state, sortable, element);
+
+	element.setAttribute(ATTRIBUTE_ORIGIN, '');
+
+	document.body.setAttribute(ATTRIBUTE_ACTIVE, '');
+}
+
+function onCancel(_: DraggableState, draggable: Draggable): void {
+	const sortable = draggable as Sortable;
+
+	const {origin} = sortable;
+
+	origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+
+	resetPlaceholders();
+
+	sortable.origin = undefined;
+}
+
+function onEnd(
+	event: MouseEvent | TouchEvent,
+	state: DraggableState,
+	draggable: Draggable,
+	reset: () => void,
+): void {
+	const from = draggable as Sortable;
+	const {origin} = from;
+
+	const position = getPosition(event) ?? {x: 0, y: 0};
+
+	const target = getElementFromPosition(position)[0];
+
+	let element = findAncestor(target, SELECTOR_ITEM) as HTMLElement;
+
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
+		const position = element.getAttribute(ATTRIBUTE_PLACEHOLDER_POSITION);
+
+		if (position === 'after') {
+			element = element.previousElementSibling as HTMLElement;
+		} else {
+			element = element.nextElementSibling as HTMLElement;
+		}
+	}
+
+	let insert: 'append' | 'insert' | 'prepend' | undefined = 'insert';
+	let to: Sortable | undefined;
+
+	if (element == null) {
+		element = findAncestor(target, SELECTOR) as HTMLElement;
+
+		to = state.instances.get(element)?.sortable;
+
+		insert = element == null ? undefined : element.children.length === 0 ? 'append' : 'prepend';
+	} else {
+		to = state.instances.get(element.parentElement!)?.sortable;
+	}
+
+	const valid = insert != null && validatePosition(state, from, to, position);
+
+	const detail = valid
+		? {
+				from: {
+					element: origin,
+					position: {...state.original},
+				},
+				to: {
+					element: element,
+					position: {...position},
+				},
+			}
+		: undefined;
+
+	const options = {
+		detail,
+		bubbles: false,
+		cancelable: true,
+	};
+
+	const fromEvent = new CustomEvent(EVENT_END, options);
+	const toEvent = new CustomEvent(EVENT_END, options);
+
+	from.element.dispatchEvent(fromEvent);
+
+	if (from !== to) {
+		to?.element.dispatchEvent(toEvent);
+	}
+
+	setTimeout(() => {
+		afterEnd(insert, from, [fromEvent, toEvent], {origin, target: element}, position, valid);
+
+		reset();
+	});
+}
+
+function onMove(
+	event: MouseEvent | TouchEvent,
+	state: DraggableState,
+	draggable: Draggable,
+	position: DragMovePosition,
+): PlainObject | undefined {
+	const from = draggable as Sortable;
+
+	const fromElement = from.origin;
+	const toElement = findAncestor(event, SELECTOR_ITEM) as HTMLElement;
+
+	let to: Sortable | undefined;
+
+	if (toElement == null) {
+		to = state.instances.get(findAncestor(event, SELECTOR) as HTMLElement)?.sortable;
+	} else {
+		to = state.instances.get(toElement.parentElement!)?.sortable;
+	}
+
+	if (!validatePosition(state, from, to, position.original)) {
+		return;
+	}
+
+	const placeholder = getPositionPlaceholder(from);
+
+	if (toElement != null && toElement !== fromElement) {
+		const {height, top} = toElement.getBoundingClientRect();
+
+		let place: 'after' | 'before';
+
+		if (position.calculated.y < top + height / 2) {
+			place = 'before';
+
+			toElement.insertAdjacentElement(INSERT_BEFORE, placeholder);
+		} else {
+			place = 'after';
+
+			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
+		}
+
+		placeholder.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, place);
+	} else {
+		placeholder.remove();
+	}
+
+	return {
+		from: {
+			element: fromElement,
+			position: {...state.original},
+		},
+		to: {
+			element: toElement,
+			position: {...position.calculated},
+		},
+	};
+}
+
+function resetPlaceholders(): void {
+	placeholder.drag.custom?.remove();
+	placeholder.drag.default?.remove();
+	placeholder.position?.remove();
+
+	placeholder.drag.custom = undefined;
+}
+
+function setPlaceholder(state: DraggableState, sortable: Sortable, origin: HTMLElement): void {
+	const element = getDragPlaceholder();
+
+	placeholder.drag.default!.innerHTML = '';
+
+	updatePlaceholder(sortable, element);
+
+	const event = new CustomEvent(EVENT_PLACEHOLDER, {
+		cancelable: true,
+		detail: {
+			origin,
+			parent: sortable.element,
+			placeholder: element,
+			create: (value: unknown) => {
+				if (!(value instanceof HTMLElement)) {
+					return;
+				}
+
+				placeholder.drag.custom = value;
+
+				updatePlaceholder(sortable, value);
+
+				state.element = {
+					rectangle: value.getBoundingClientRect(),
+					node: value,
+				};
+			},
+		},
+	});
+
+	sortable.element.dispatchEvent(event);
+
+	setTimeout(() => {
+		if (!event.defaultPrevented && placeholder.drag.custom == null) {
+			placeholder.drag.default?.append(element.cloneNode(true));
+		}
+
+		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? '');
+	});
+}
+
+function updatePlaceholder(sortable: Sortable, element: HTMLElement): void {
+	element.style.position = 'fixed';
+
+	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, '');
+
+	if (sortable.horizontal) {
+		element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
+	} else {
+		element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+	}
+
+	if (sortable.vertical) {
+		element.setAttribute(ATTRIBUTE_VERTICAL, '');
+	} else {
+		element.removeAttribute(ATTRIBUTE_VERTICAL);
+	}
+}
+
+function validatePosition(
+	_: DraggableState,
+	from: Sortable,
+	to: Sortable | undefined,
+	position: EventPosition,
+): boolean {
+	let valid = true;
+
+	const rectangle = from.origin?.getBoundingClientRect();
+
+	if (rectangle != null && !from.horizontal) {
+		valid = position.x >= rectangle.left && position.x <= rectangle.right;
+	}
+
+	if (valid && rectangle != null && !from.vertical) {
+		valid = position.y >= rectangle.top && position.y <= rectangle.bottom;
+	}
+
+	if (valid && from.connections != null) {
+		valid = to?.element.matches(from.connections) ?? true;
+	}
+
+	if (valid && to?.connections != null) {
+		valid = from.element.matches(to.connections);
+	}
+
+	return valid;
+}
+
+// #endregion
+
+// #region Variables
+
+const ATTRIBUTE = 'oui-sortable';
+
+const ATTRIBUTE_ACTIVE = `${ATTRIBUTE}-active`;
+
+const ATTRIBUTE_CONNECTIONS = `${ATTRIBUTE}-connections`;
+
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
+
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
+
+const ATTRIBUTE_HORIZONTAL = `${ATTRIBUTE}-horizontal`;
+
+const ATTRIBUTE_ORIGIN = `${ATTRIBUTE}-origin`;
+
+const ATTRIBUTE_PLACEHOLDER_DRAG = `${ATTRIBUTE}-placeholder-drag`;
+
+const ATTRIBUTE_PLACEHOLDER_POSITION = `${ATTRIBUTE}-placeholder-position`;
+
+const ATTRIBUTE_VERTICAL = `${ATTRIBUTE}-vertical`;
+
+const CONTAINERS = new Map<HTMLElement, Set<Sortable>>();
+
+const EVENT_END = 'sort:end';
+
+const EVENT_PLACEHOLDER = 'sort:placeholder';
+
+const INSERT_AFTER = 'afterend';
+
+const INSERT_BEFORE = 'beforebegin';
+
+const SELECTOR = `[${ATTRIBUTE}]`;
+
+const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
+
+const bound: DraggableBound = {
+	constructor: Sortable,
+	property: 'sortable',
+};
+
+const placeholder: SortablePlaceholder = {
+	drag: {
+		custom: undefined,
+		default: undefined,
+	},
+	position: undefined,
+};
+
+// #endregion
+
+// #region Initialization
+
+attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
+
+// #endregion