@oscarpalmer/oui 0.19.0 → 0.21.0

package/src/js/{floatable.ts → internal/floatable.ts}

@@ -91,7 +91,6 @@ export class Floatable {
 }
 
 type FloatableWindow = Window & {
-	// biome-ignore lint/style/useNamingConvention: Non-standard name to avoid conflicts
 	_oscarpalmer_oui_floatable: State;
 };
 
@@ -159,7 +158,7 @@ function closeAbove(element: HTMLElement): void {
 	}
 
 	while (index < state.order.length - 1) {
-		void state.order.pop()?.toggle(false, true);
+		state.order.pop()?.toggle(false, true);
 	}
 }
 
@@ -171,14 +170,14 @@ function closeAll(): void {
 	state?.active.clear();
 
 	for (const floatable of floatables) {
-		void floatable.toggle(false, true);
+		floatable.toggle(false, true);
 	}
 }
 
 function closeNonInteractive(state: State): void {
 	for (const floatable of state.active) {
 		if (!floatable.options.interactive) {
-			void floatable.toggle(false);
+			floatable.toggle(false);
 		}
 	}
 }
@@ -193,78 +192,157 @@ export function deactivate(floatable: Floatable): void {
 	floatable.options.onAfter?.(false);
 }
 
+function getAttribute(
+	position: Position,
+	anchor: DOMRect,
+	top: number,
+	left: number,
+): Position | undefined {
+	switch (position) {
+		case 'horizontal':
+		case 'horizontal-bottom':
+		case 'horizontal-top':
+			return position.replace('horizontal', left >= anchor.right ? 'right' : 'left') as Position;
+
+		case 'vertical':
+		case 'vertical-end':
+		case 'vertical-start':
+			return position.replace('vertical', top >= anchor.bottom ? 'bottom' : 'top') as Position;
+
+		default:
+			break;
+	}
+}
+
+function getMargin(): number {
+	try {
+		const fontsize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+		if (Number.isNaN(fontsize)) {
+			return 5;
+		}
+
+		const margin = fontsize / 2;
+
+		return margin < 5 ? 5 : margin;
+	} catch {
+		return 5;
+	}
+}
+
 function getState(): State {
 	return (window as unknown as FloatableWindow)._oscarpalmer_oui_floatable;
 }
 
-function getX(anchor: DOMRect, content: DOMRect, position: Position): number {
-	if (position.endsWith(POSITION_SUFFIX_END)) {
-		const end = anchor.right - content.width;
+function getX(anchor: DOMRect, content: DOMRect, position: Position, margin: number): number {
+	if (position === 'above' || position === 'below' || position === 'vertical') {
+		const center = anchor.left + anchor.width / 2;
+		const width = content.width / 2;
 
-		return end < 0 ? 0 : end;
-	}
+		if (center + width + margin >= document.body.clientWidth) {
+			return document.body.clientWidth - content.width - margin / 2;
+		}
 
-	if (position.endsWith(POSITION_SUFFIX_START)) {
-		const start = anchor.left;
+		if (center - width - margin <= 0) {
+			return margin / 2;
+		}
 
-		return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
+		return center - width;
 	}
 
-	if (position.startsWith(POSITION_END)) {
+	if (position.startsWith('end')) {
 		return anchor.right;
 	}
 
-	if (position.startsWith(POSITION_START)) {
+	if (position.startsWith('start')) {
 		return anchor.left - content.width;
 	}
 
-	if (position.startsWith(POSITION_HORIZONTAL)) {
-		if (anchor.right + content.width <= window.innerWidth) {
-			return anchor.right;
+	if (position.endsWith('end')) {
+		return anchor.right - content.width - margin <= 0 ? margin / 2 : anchor.right - content.width;
+	}
+
+	if (position.endsWith('start')) {
+		if (anchor.left + content.width + margin >= document.body.clientWidth) {
+			return document.body.clientWidth - content.width - margin / 2;
 		}
 
-		return anchor.left - content.width;
+		return anchor.left - margin <= 0 ? margin / 2 : anchor.left;
 	}
 
-	const left = anchor.left + (anchor.width - content.width) / 2;
+	if (!position.startsWith('horizontal')) {
+		return 0;
+	}
+
+	if (anchor.right + content.width + margin >= document.body.clientWidth) {
+		return anchor.left - content.width;
+	}
 
-	return left < 0 ? 0 : left;
+	return anchor.right;
 }
 
-function getY(anchor: DOMRect, content: DOMRect, position: Position, preferAbove: boolean): number {
-	if (position.startsWith(POSITION_ABOVE)) {
+function getY(
+	anchor: DOMRect,
+	content: DOMRect,
+	position: Position,
+	margin: number,
+	preferAbove: boolean,
+): number {
+	if (position === 'end' || position === 'start' || position === 'horizontal') {
+		const center = anchor.top + anchor.height / 2;
+		const height = content.height / 2;
+
+		if (center + height + margin >= document.body.clientHeight) {
+			return document.body.clientHeight - content.height - margin / 2;
+		}
+
+		if (center - height - margin <= 0) {
+			return margin / 2;
+		}
+
+		return center - height;
+	}
+
+	if (position.startsWith('above')) {
 		return anchor.top - content.height;
 	}
 
-	if (position.startsWith(POSITION_BELOW)) {
+	if (position.startsWith('below')) {
 		return anchor.bottom;
 	}
 
-	if (position.endsWith(POSITION_BOTTOM)) {
-		const bottom = anchor.bottom - content.height;
-
-		return bottom < 0 ? 0 : bottom;
+	if (position.endsWith('bottom')) {
+		return anchor.bottom - content.height - margin <= 0
+			? margin / 2
+			: anchor.bottom - content.height;
 	}
 
-	if (position.endsWith(POSITION_TOP)) {
-		const top = anchor.top;
-
-		return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
+	if (position.endsWith('top')) {
+		return anchor.top + content.height + margin >= document.body.clientHeight
+			? document.body.clientHeight - content.height - margin
+			: anchor.top;
 	}
 
-	if (position.startsWith(POSITION_VERTICAL)) {
-		if (preferAbove && anchor.top - content.height >= 0) {
-			return anchor.top - content.height;
-		}
+	if (!position.startsWith('vertical')) {
+		return 0;
+	}
 
-		if (anchor.bottom + content.height <= document.body.clientHeight) {
+	if (preferAbove) {
+		if (
+			anchor.top - content.height - margin <= 0 &&
+			anchor.bottom + content.height + margin <= document.body.clientHeight
+		) {
 			return anchor.bottom;
 		}
 
 		return anchor.top - content.height;
 	}
 
-	return anchor.top + (anchor.height - content.height) / 2;
+	if (anchor.bottom + content.height + margin >= document.body.clientHeight) {
+		return anchor.top - content.height;
+	}
+
+	return anchor.bottom;
 }
 
 function initialize(floatable: Floatable): void {
@@ -294,7 +372,7 @@ function isDisabled(element: HTMLElement): boolean {
 }
 
 function onClick(event: PointerEvent): void {
-	const related = findAncestor(event.target as never, SELECTOR_ALL);
+	const related = findAncestor(event, SELECTOR_ALL);
 
 	if (!(related instanceof HTMLElement)) {
 		closeAll();
@@ -318,7 +396,7 @@ function onKeyDown(event: KeyboardEvent): void {
 
 	closeNonInteractive(state);
 
-	const related = findAncestor(event.target as never, SELECTOR_CONTENT);
+	const related = findAncestor(event, SELECTOR_CONTENT);
 
 	if (!(related instanceof HTMLElement)) {
 		return;
@@ -329,8 +407,24 @@ function onKeyDown(event: KeyboardEvent): void {
 	const floatable = state.mapped.get(related);
 
 	if (floatable != null) {
-		void floatable.toggle(false);
+		floatable.toggle(false);
+	}
+}
+
+function setAttribute(
+	position: Position,
+	anchor: DOMRect,
+	floater: HTMLElement,
+	top: number,
+	left: number,
+): void {
+	let actual: Position | undefined;
+
+	if (/^(horizontal|vertical)/.test(position)) {
+		actual = getAttribute(position, anchor, top, left);
 	}
+
+	floater.setAttribute('position', actual ?? position);
 }
 
 function stop(floatable: Floatable): void {
@@ -359,7 +453,7 @@ function toggle(anchor: HTMLElement): void {
 		closeAbove(content as HTMLElement);
 	}
 
-	void floatable.toggle(!active);
+	floatable.toggle(!active);
 }
 
 function updatePosition(floatable: Floatable): void {
@@ -372,6 +466,8 @@ function updatePosition(floatable: Floatable): void {
 		position = floatable.options.defaultPosition;
 	}
 
+	const margin = getMargin();
+
 	let previousAnchor: DOMRect;
 	let previousContent: DOMRect;
 
@@ -404,8 +500,10 @@ function updatePosition(floatable: Floatable): void {
 		previousAnchor = anchor;
 		previousContent = content;
 
-		const left = getX(anchor, content, position);
-		const top = getY(anchor, content, position, floatable.options.preferAbove);
+		const left = getX(anchor, content, position, margin);
+		const top = getY(anchor, content, position, margin, floatable.options.preferAbove);
+
+		setAttribute(position, anchor, floatable.options.content, top, left);
 
 		if (top + content.height > window.innerHeight) {
 			floatable.options.content.style.height = `${window.innerHeight - top}px`;
@@ -442,26 +540,6 @@ const ATTRIBUTE_CONTENT = 'oui-floatable-content';
 
 const INSERT_AFTEREND = 'afterend';
 
-const POSITION_ABOVE = 'above';
-
-const POSITION_BELOW = 'below';
-
-const POSITION_BOTTOM = 'bottom';
-
-const POSITION_END = 'end';
-
-const POSITION_HORIZONTAL = 'horizontal';
-
-const POSITION_START = 'start';
-
-const POSITION_SUFFIX_END = '-end';
-
-const POSITION_SUFFIX_START = '-start';
-
-const POSITION_TOP = 'top';
-
-const POSITION_VERTICAL = 'vertical';
-
 const POSITIONS: Set<Position> = new Set([
 	'above',
 	'above-end',

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 {