@oscarpalmer/oui 0.27.0 → 0.29.0

package/src/js/resizable/resizable.embedded.ts

@@ -0,0 +1,390 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
+import type {EventPosition} from '@oscarpalmer/atoms/models';
+import {getNumber} from '@oscarpalmer/atoms/number';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {getPosition, on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {setStyles, toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
+import supportsTouch from '@oscarpalmer/toretto/touch';
+import {attributable} from '../internal/attributable';
+
+// #region Types
+
+export type CreateOuiResizableOptions = {
+	maximumHeight?: number;
+	maximumWidth?: number;
+	minimumHeight?: number;
+	minimumWidth?: number;
+};
+
+export class OuiResizable {
+	readonly #state: OuiResizableState;
+
+	constructor(state: OuiResizableState) {
+		this.#state = state;
+	}
+
+	destroy(): void {
+		destroyResizable(this.#state);
+	}
+
+	set(): void {
+		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
+
+		console.log('set', width, height);
+
+		this.#state.width = width;
+		this.#state.height = height;
+	}
+
+	reset(): void {
+		setStyles(this.#state.element, {
+			height: '',
+			width: '',
+		});
+	}
+}
+
+type OuiResizableItem = {
+	instance: OuiResizable;
+	state: OuiResizableState;
+};
+
+type OuiResizableState = {
+	element: HTMLElement;
+	handle: HTMLElement;
+	height: number;
+	options: Required<CreateOuiResizableOptions>;
+	styles: StyleToggler;
+	width: number;
+};
+
+// #endregion
+
+// #region Functions
+
+function addResizable(
+	element: HTMLElement,
+	options?: CreateOuiResizableOptions,
+): OuiResizable | undefined {
+	let item = items.get(element);
+
+	if (item == null) {
+		const handle = element.querySelector(SELECTOR_HANDLE_SCOPED);
+
+		if (!isHTMLOrSVGElement(handle)) {
+			return;
+		}
+
+		const state = getState(element, handle, options);
+		const instance = new OuiResizable(state);
+
+		item = {
+			instance,
+			state,
+		};
+
+		items.set(element, item);
+	}
+
+	return item?.instance;
+}
+
+/**
+ * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
+ *
+ * @param element Element to make resizable
+ * @returns _OuiResizable_ instance
+ */
+export function createResizable(
+	element: HTMLElement,
+	options?: CreateOuiResizableOptions,
+): OuiResizable {
+	if (!isHTMLOrSVGElement(element)) {
+		throw new TypeError(MESSAGE_ELEMENT);
+	}
+
+	if (!isHTMLOrSVGElement(element.querySelector(SELECTOR_HANDLE_SCOPED))) {
+		throw new Error(MESSAGE_HANDLE);
+	}
+
+	return addResizable(element, options ?? {})!;
+}
+
+function destroyResizable(state: OuiResizableState): void {
+	state.element = undefined as never;
+	state.handle = undefined as never;
+}
+
+function getAndSetDimensions(
+	element: HTMLElement,
+	options: Required<CreateOuiResizableOptions>,
+	input?: Pick<DOMRect, 'height' | 'width'>,
+): [number, number] {
+	let {height, width} = input ?? element.getBoundingClientRect();
+
+	if (options.maximumWidth > -1 && width > options.maximumWidth) {
+		width = options.maximumWidth;
+	} else if (options.minimumWidth > -1 && width < options.minimumWidth) {
+		width = options.minimumWidth;
+	}
+
+	if (options.maximumHeight > -1 && height > options.maximumHeight) {
+		height = options.maximumHeight;
+	} else if (options.minimumHeight > -1 && height < options.minimumHeight) {
+		height = options.minimumHeight;
+	}
+
+	if (element.checkVisibility()) {
+		setStyles(element, {
+			height: `${height}px`,
+			width: `${width}px`,
+		});
+	}
+
+	return [width, height];
+}
+
+function getProperties(
+	element: HTMLElement,
+	widthProperty: 'maxWidth' | 'minWidth',
+	heightProperty: 'maxHeight' | 'minHeight',
+): [string, string] {
+	const computed = getComputedStyle(element);
+
+	return [computed[widthProperty], computed[heightProperty]];
+}
+
+function getRestrictions(
+	maximum: string | [unknown, unknown],
+	minimum: string | [unknown, unknown],
+): Required<CreateOuiResizableOptions> {
+	const [maximumWidth, maximumHeight] = getXAndY.apply(
+		null,
+		typeof maximum === 'string' ? [maximum] : maximum,
+	);
+
+	const [minimumWidth, minimumHeight] = getXAndY.apply(
+		null,
+		typeof minimum === 'string' ? [minimum] : minimum,
+	);
+
+	if (maximumWidth > -1 && minimumWidth > -1 && maximumWidth <= minimumWidth) {
+		throw new Error(MESSAGE_WIDTH);
+	}
+
+	if (maximumHeight > -1 && minimumHeight > -1 && maximumHeight <= minimumHeight) {
+		throw new Error(MESSAGE_HEIGHT);
+	}
+
+	return {
+		maximumHeight,
+		maximumWidth,
+		minimumHeight,
+		minimumWidth,
+	};
+}
+
+function getState(
+	element: HTMLElement,
+	handle: HTMLElement,
+	input?: CreateOuiResizableOptions,
+): OuiResizableState {
+	setAttribute(element, RESIZABLE_ATTRIBUTE, '');
+
+	const options = getValidOptions(element, input);
+
+	const [width, height] = getAndSetDimensions(element, options);
+
+	return {
+		element,
+		handle,
+		height,
+		options,
+		width,
+		styles: toggleStyles(element, styles),
+	};
+}
+
+function getValidOptions(
+	element: HTMLElement,
+	input?: CreateOuiResizableOptions,
+): Required<CreateOuiResizableOptions> {
+	const original = isPlainObject(input) ? input : {};
+
+	return {
+		...getRestrictions(
+			input == null
+				? (getAttribute(element, ATTRIBUTE_MAXIMUM) ??
+						getProperties(element, 'maxWidth', 'maxHeight'))
+				: [original.maximumWidth, original.maximumHeight],
+			input == null
+				? (getAttribute(element, ATTRIBUTE_MINIMUM) ??
+						getProperties(element, 'minWidth', 'minHeight'))
+				: [original.minimumWidth, original.minimumHeight],
+		),
+	};
+}
+
+function getXAndY(first: unknown, second?: unknown): [number, number] {
+	const [x, y] = typeof first === 'string' && second == null ? first.split(',') : [first, second];
+
+	let xAsNumber = typeof x === 'string' ? Number.parseFloat(x) : getNumber(x);
+	let yAsNumber = typeof y === 'string' ? Number.parseFloat(y) : getNumber(y);
+
+	if (Number.isNaN(xAsNumber) || xAsNumber <= 0) {
+		xAsNumber = -1;
+	}
+
+	if (Number.isNaN(yAsNumber) || yAsNumber <= 0) {
+		yAsNumber = -1;
+	}
+
+	return [xAsNumber, yAsNumber];
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	if (current == null || event.key !== 'Escape') {
+		return;
+	}
+
+	setStyles(current.state.element, {
+		height: `${current.state.height}px`,
+		width: `${current.state.width}px`,
+	});
+
+	resetResizable();
+}
+
+function onPointerdown(event: MouseEvent | TouchEvent): void {
+	if (
+		event.altKey ||
+		event.ctrlKey ||
+		event.metaKey ||
+		event.shiftKey ||
+		(supportsTouch.value
+			? event.type === 'mousedown'
+			: event.type === 'touchstart' || (event as MouseEvent).button !== 0)
+	) {
+		return;
+	}
+
+	const handle = findAncestor(event, SELECTOR_HANDLE);
+	const element = handle && findAncestor(handle, SELECTOR);
+	const stored = element && items.get(element as HTMLElement);
+	const position = getPosition(event);
+
+	if (stored == null || position == null) {
+		return;
+	}
+
+	if (supportsTouch.value) {
+		event.preventDefault();
+	}
+
+	current = stored;
+	start = position;
+
+	current.state.styles.set();
+	styleToggler.set();
+}
+
+function onPointermove(event: MouseEvent | TouchEvent): void {
+	if (current == null) {
+		return;
+	}
+
+	const {x, y} = getPosition(event) ?? {};
+
+	if (x == null || y == null) {
+		return;
+	}
+
+	const width = current.state.width + (x - (start?.x ?? 0));
+	const height = current.state.height + (y - (start?.y ?? 0));
+
+	getAndSetDimensions(current.state.element, current.state.options, {height, width});
+}
+
+function onPointerup(): void {
+	if (current == null) {
+		return;
+	}
+
+	const {height, width} = current.state.element.getBoundingClientRect();
+
+	current.state.height = height;
+	current.state.width = width;
+
+	resetResizable();
+}
+
+function removeResizable(element: HTMLElement): void {
+	items.get(element)?.instance.destroy();
+
+	items.delete(element);
+}
+
+function resetResizable(): void {
+	current?.state.styles.remove();
+	styleToggler.remove();
+
+	current = undefined;
+	start = undefined;
+}
+
+// #endregion
+
+// #region Variables
+
+export const RESIZABLE_ATTRIBUTE = 'oui-resizable';
+
+export const RESIZABLE_ATTRIBUTE_HANDLE = `${RESIZABLE_ATTRIBUTE}-handle`;
+
+const ATTRIBUTE_MAXIMUM = `${RESIZABLE_ATTRIBUTE}-maximum`;
+
+const ATTRIBUTE_MINIMUM = `${RESIZABLE_ATTRIBUTE}-minimum`;
+
+const MESSAGE_ELEMENT = 'The element must be an instance of HTMLElement or SVGElement';
+
+const MESSAGE_HEIGHT = 'The maximum height must be greater than the minimum height';
+
+const MESSAGE_HANDLE = `The element must contain a child with the attribute "${RESIZABLE_ATTRIBUTE_HANDLE}"`;
+
+const MESSAGE_WIDTH = 'The maximum width must be greater than the minimum width';
+
+const SELECTOR = `[${RESIZABLE_ATTRIBUTE}]`;
+
+const SELECTOR_HANDLE = `[${RESIZABLE_ATTRIBUTE_HANDLE}]`;
+
+const SELECTOR_HANDLE_SCOPED = `:scope > ${SELECTOR_HANDLE}`;
+
+const items = new WeakMap<HTMLElement, OuiResizableItem>();
+
+const styles = {
+	touchAction: 'none',
+	userSelect: 'none',
+	webkitUserSelect: 'none',
+};
+
+const styleToggler = toggleStyles(document.body, styles);
+
+let current: OuiResizableItem | undefined;
+
+let start: EventPosition | undefined;
+
+// #endregion
+
+// #region Initialization
+
+on(document, 'keydown', onKeydown);
+on(document, 'mousedown', onPointerdown);
+on(document, 'pointermove', onPointermove);
+on(document, 'pointerup', onPointerup);
+on(document, 'touchcancel', onPointerup);
+on(document, 'touchstart', onPointerdown, {passive: false});
+
+attributable(RESIZABLE_ATTRIBUTE, addResizable, removeResizable);
+
+// #endregion

package/src/js/resizable/resizable.standalone.ts

@@ -0,0 +1,5 @@
+export {
+	createResizable as createOuiResizable,
+	type CreateOuiResizableOptions,
+	type OuiResizable,
+} from './resizable.embedded';

package/src/js/sortable/sortable.embedded.ts

@@ -1,8 +1,10 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
+import {getAttribute, setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {getPosition} from '@oscarpalmer/toretto/event';
 import {findAncestor, getElementFromPosition} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {setStyle} from '@oscarpalmer/toretto/style';
 import {attributable} from '../internal/attributable';
 import {
 	addDraggable,
@@ -50,7 +52,7 @@ export class OuiSortable extends OuiDraggable<OuiSortableState> {
 					(getDraggableStates(element)?.sortable as OuiDraggableState & OuiSortableState)?.origin,
 			},
 			{
-				connections: element.getAttribute(ATTRIBUTE_CONNECTIONS),
+				connections: getAttribute(element, ATTRIBUTE_CONNECTIONS),
 			},
 		);
 	}
@@ -67,7 +69,7 @@ type OuiSortablePlaceholderDrag = {
 };
 
 type OuiSortableState = {
-	connections: string | null;
+	connections: string | null | undefined;
 	origin?: HTMLElement;
 };
 
@@ -166,10 +168,11 @@ function getOriginalPosition(
 function getPositionPlaceholder(item: OuiDraggableItem<OuiSortableState>): HTMLElement {
 	placeholder.position ??= createElement('div');
 
-	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, '');
+	setAttribute(placeholder.position, ATTRIBUTE_PLACEHOLDER_POSITION, '');
 
 	if (item.state.origin != null) {
-		placeholder.position.style.setProperty(
+		setStyle(
+			placeholder.position,
 			'--placeholder-height',
 			`${item.state.origin.getBoundingClientRect().height}px`,
 		);
@@ -188,9 +191,9 @@ function onBegin(
 
 	setPlaceholder(globals, item, element);
 
-	element.setAttribute(ATTRIBUTE_ORIGIN, '');
+	setAttribute(element, ATTRIBUTE_ORIGIN, '');
 
-	document.body.setAttribute(ATTRIBUTE_ACTIVE, '');
+	setAttribute(document.body, ATTRIBUTE_ACTIVE, '');
 }
 
 function onCancel(_: OuiDraggableGlobals, item: OuiDraggableItem<OuiSortableState>): void {
@@ -218,7 +221,7 @@ function onEnd(
 	let element = findAncestor(target, SELECTOR_ITEM) as HTMLElement;
 
 	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
-		const position = element.getAttribute(ATTRIBUTE_PLACEHOLDER_POSITION);
+		const position = getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION);
 
 		if (position === 'after') {
 			element = element.previousElementSibling as HTMLElement;
@@ -344,7 +347,7 @@ function onMove(
 			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
 		}
 
-		placeholder.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, place);
+		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
 	} else {
 		placeholder.remove();
 	}
@@ -417,9 +420,8 @@ function setPlaceholder(
 }
 
 function updatePlaceholder(item: OuiDraggableItem<OuiSortableState>, element: HTMLElement): void {
-	element.style.position = 'fixed';
-
-	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, '');
+	setAttribute(element, ATTRIBUTE_PLACEHOLDER_DRAG, '');
+	setStyle(element, 'position', 'fixed');
 
 	const state = getDraggableStates(item.state.element)?.sortable;
 
@@ -427,17 +429,10 @@ function updatePlaceholder(item: OuiDraggableItem<OuiSortableState>, element: HT
 		return;
 	}
 
-	if (state.horizontal) {
-		element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-	} else {
-		element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-	}
-
-	if (state.vertical) {
-		element.setAttribute(ATTRIBUTE_VERTICAL, '');
-	} else {
-		element.removeAttribute(ATTRIBUTE_VERTICAL);
-	}
+	setAttributes(element, {
+		[ATTRIBUTE_HORIZONTAL]: state.horizontal ? '' : undefined,
+		[ATTRIBUTE_VERTICAL]: state.vertical ? '' : undefined,
+	});
 }
 
 function validatePosition(

package/src/js/splitter.ts

@@ -1,9 +1,11 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {round} from '@oscarpalmer/atoms/math';
 import {clamp} from '@oscarpalmer/atoms/number';
+import {setAria} from '@oscarpalmer/toretto/aria';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import {type StyleToggler, toggleStyles} from '@oscarpalmer/toretto/style';
+import {setStyle, type StyleToggler, toggleStyles} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
 
 declare global {
@@ -78,11 +80,7 @@ class OuiSplitter {
 			RESIZE_OBSERVER.unobserve(this.element);
 		}
 
-		if (this.types.horizontal) {
-			this.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-		} else {
-			this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-		}
+		setAttribute(this.element, ATTRIBUTE_HORIZONTAL, this.types.horizontal ? '' : undefined);
 
 		setAriaOrientation(this);
 	}
@@ -120,7 +118,9 @@ export class OuiSplitterElement extends HTMLElement {
 	 * Maximum size for the first panel
 	 */
 	set max(value: number) {
-		this.setAttribute(ATTRIBUTE_MAX, String(value));
+		if (typeof value === 'number') {
+			setAttribute(this, ATTRIBUTE_MAX, value.toString());
+		}
 	}
 
 	/**
@@ -134,7 +134,9 @@ export class OuiSplitterElement extends HTMLElement {
 	 * Minimum size for the first panel
 	 */
 	set min(value: number) {
-		this.setAttribute(ATTRIBUTE_MIN, String(value));
+		if (typeof value === 'number') {
+			setAttribute(this, ATTRIBUTE_MIN, value.toString());
+		}
 	}
 
 	/**
@@ -148,21 +150,23 @@ export class OuiSplitterElement extends HTMLElement {
 	 * Current size for the first panel
 	 */
 	set size(value: number) {
-		this.setAttribute(ATTRIBUTE_SIZE, String(value));
+		if (typeof value === 'number') {
+			setAttribute(this, ATTRIBUTE_SIZE, value.toString());
+		}
 	}
 
 	/**
 	 * Orientation of the splitter
 	 */
 	get type(): string {
-		return this.getAttribute(ATTRIBUTE_TYPE) ?? 'vertical';
+		return getAttribute(this, ATTRIBUTE_TYPE) ?? 'vertical';
 	}
 
 	/**
 	 * Orientation of the splitter
 	 */
 	set type(value: string) {
-		this.setAttribute(ATTRIBUTE_TYPE, value);
+		setAttribute(this, ATTRIBUTE_TYPE, value);
 	}
 
 	// Constructor
@@ -170,7 +174,7 @@ export class OuiSplitterElement extends HTMLElement {
 	constructor() {
 		super();
 
-		const panels = [...this.children].filter(child => child instanceof HTMLElement);
+		const panels = [...this.children].filter(child => child instanceof Element) as HTMLElement[];
 
 		if (panels.length !== 2) {
 			throw new Error(MESSAGE);
@@ -228,8 +232,8 @@ type OuiSplitterValuesNow = {
 function createHandle(): HTMLSpanElement {
 	const handle = document.createElement('span');
 
-	handle.setAttribute('aria-hidden', 'true');
-	handle.setAttribute(ATTRIBUTE_HANDLE, '');
+	setAria(handle, 'hidden', 'true');
+	setAttribute(handle, ATTRIBUTE_HANDLE, '');
 
 	return handle;
 }
@@ -240,9 +244,12 @@ function createSeparator(splitter: OuiSplitter): HTMLDivElement {
 	separator.role = 'separator';
 	separator.tabIndex = 0;
 
-	separator.setAttribute('aria-controls', splitter.element.id);
-	separator.setAttribute('aria-label', 'Resize panels');
-	separator.setAttribute(ATTRIBUTE_SEPARATOR, '');
+	setAria(separator, {
+		controls: splitter.element.id,
+		label: 'Resize panels',
+	});
+
+	setAttribute(separator, ATTRIBUTE_SEPARATOR, '');
 
 	return separator;
 }
@@ -262,7 +269,7 @@ function getSize(splitter: OuiSplitter, value: number): number {
 }
 
 function getTypes(splitter: OuiSplitter, width?: number, height?: number): OuiSplitterTypes {
-	const type = splitter.element.getAttribute('type')?.trim() ?? '';
+	const type = getAttribute(splitter.element, 'type');
 
 	if (type === 'horizontal') {
 		return {
@@ -285,7 +292,7 @@ function getTypes(splitter: OuiSplitter, width?: number, height?: number): OuiSp
 }
 
 function getValue(element: HTMLElement, name: string, defaultValue: number): number {
-	const value = element.getAttribute(name);
+	const value = getAttribute(element, name);
 
 	if (isNullableOrWhitespace(value)) {
 		return defaultValue;
@@ -408,11 +415,11 @@ function onObservation(entries: ResizeObserverEntry[]): void {
 
 			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
 
-			if (splitter.types.horizontal) {
-				splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-			} else {
-				splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-			}
+			setAttribute(
+				splitter.element,
+				ATTRIBUTE_HORIZONTAL,
+				splitter.types.horizontal ? '' : undefined,
+			);
 
 			setAriaOrientation(splitter);
 		}
@@ -436,8 +443,8 @@ function onPointerdown(event: Event): void {
 		event.preventDefault();
 	}
 
-	splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, '');
-	splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, '');
+	setAttribute(splitter.handle, ATTRIBUTE_ACTIVE, '');
+	setAttribute(splitter.separator, ATTRIBUTE_ACTIVE, '');
 
 	splitter.rectangle = splitter.element.getBoundingClientRect();
 
@@ -468,17 +475,15 @@ function onPointerup(): void {
 }
 
 function setAriaOrientation(splitter: OuiSplitter): void {
-	splitter.separator.setAttribute(
-		'aria-orientation',
-		splitter.types.horizontal ? 'horizontal' : 'vertical',
-	);
+	setAria(splitter.separator, 'orientation', splitter.types.horizontal ? 'horizontal' : 'vertical');
 }
 
 function setAriaValue(splitter: OuiSplitter): void {
-	splitter.separator.setAttribute('aria-valuemax', String(splitter.values.max));
-	splitter.separator.setAttribute('aria-valuemin', String(splitter.values.min));
-
-	splitter.separator.setAttribute('aria-valuenow', String(splitter.values.now.current));
+	setAria(splitter.separator, {
+		valuemax: splitter.values.max,
+		valuemin: splitter.values.min,
+		valuenow: splitter.values.now.current,
+	});
 }
 
 function setSize(splitter: OuiSplitter, size: number, previous?: boolean): void {
@@ -488,7 +493,7 @@ function setSize(splitter: OuiSplitter, size: number, previous?: boolean): void
 		splitter.values.now.previous = size;
 	}
 
-	splitter.element.style.setProperty('--oui-splitter-size', `${size}`);
+	setStyle(splitter.element, '--oui-splitter-size', `${size}`);
 
 	setAriaValue(splitter);
 }
@@ -557,5 +562,5 @@ on(document, 'keydown', onKeydown);
 on(document, 'mousedown', onPointerdown);
 on(document, 'pointermove', onPointermove);
 on(document, 'pointerup', onPointerup);
-on(document, 'touchcancel', onPointerup, {passive: false});
+on(document, 'touchcancel', onPointerup);
 on(document, 'touchstart', onPointerdown, {passive: false});