@oscarpalmer/oui 0.17.0 → 0.19.0

package/src/js/splitter.ts

@@ -3,39 +3,93 @@ import {round} from '@oscarpalmer/atoms/math';
 import {clamp} from '@oscarpalmer/atoms/number';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
+import {type StyleToggler, toggleStyles} from '@oscarpalmer/toretto/style';
+import supportsTouch from '@oscarpalmer/toretto/touch';
 
 declare global {
+	// biome-ignore lint/nursery/useConsistentTypeDefinitions: Extending builtins to allow custom element type help
 	interface HTMLElementTagNameMap {
-		'oui-splitter': OuiSplitterElement;
+		[SELECTOR]: OuiSplitterElement;
 	}
 }
 
 export class OuiSplitterElement extends HTMLElement {
-	#splitter: Splitter;
+	static readonly observedAttributes = ['max', 'min', 'size', 'type'];
+
+	readonly #splitter: Splitter;
+
+	// Getters and setters
+
+	get max(): number {
+		return this.#splitter.values.max;
+	}
+
+	set max(value: number) {
+		this.setAttribute('max', String(value));
+	}
+
+	get min(): number {
+		return this.#splitter.values.min;
+	}
+
+	set min(value: number) {
+		this.setAttribute('min', String(value));
+	}
+
+	get size(): number {
+		return this.#splitter.values.now.current;
+	}
+
+	set size(value: number) {
+		this.setAttribute('size', String(value));
+	}
+
+	get type(): string {
+		return this.getAttribute('type') ?? 'vertical';
+	}
+
+	set type(value: string) {
+		this.setAttribute('type', value);
+	}
+
+	// Constructor
 
 	constructor() {
 		super();
 
-		const panels = [...this.children].filter(
-			child => child instanceof HTMLElement,
-		);
+		const panels = [...this.children].filter(child => child instanceof HTMLElement);
 
 		if (panels.length !== 2) {
-			throw new Error('oui-splitter must have exactly two panels.');
+			throw new Error(`${SELECTOR} must have exactly two panels.`);
 		}
 
 		this.#splitter = new Splitter(this, panels);
 	}
 
+	// Methods
+
 	connectedCallback(): void {
-		if (this.#splitter.types.auto) {
-			observer.observe(this);
-		}
+		this.#splitter.updateConnections(1);
 	}
 
 	disconnectedCallback(): void {
-		if (this.#splitter.types.auto) {
-			observer.unobserve(this);
+		this.#splitter.updateConnections(0);
+	}
+
+	attributeChangedCallback(name: string): void {
+		switch (name) {
+			case 'max':
+			case 'min':
+			case 'size':
+				this.#splitter.updateValues();
+				break;
+
+			case 'type':
+				this.#splitter.updateOrientation();
+				break;
+
+			default:
+				break;
 		}
 	}
 }
@@ -43,20 +97,24 @@ export class OuiSplitterElement extends HTMLElement {
 let index = 0;
 
 class Splitter {
+	element: OuiSplitterElement;
+
 	handle: HTMLSpanElement;
 
+	panels: HTMLElement[];
+
 	rectangle: DOMRect;
 
 	separator: HTMLDivElement;
 
-	types: Types;
+	types!: Types;
 
 	values: Values;
 
-	constructor(
-		public element: OuiSplitterElement,
-		public panels: HTMLElement[],
-	) {
+	constructor(element: OuiSplitterElement, panels: HTMLElement[]) {
+		this.element = element;
+		this.panels = panels;
+
 		if (isNullableOrWhitespace(element.id)) {
 			element.id = `oui_splitter_${++index}`;
 		}
@@ -71,19 +129,47 @@ class Splitter {
 
 		panels[0].insertAdjacentElement('afterend', this.separator);
 
-		mapped.set(element, this);
-		mapped.set(this.handle, this);
+		this.updateOrientation();
+		this.updateValues();
+	}
 
-		setSize(this, this.values.now.current);
+	updateConnections(add: 0 | 1): void {
+		const method = METHODS_CONNECT[add];
 
+		MAPPED_ELEMENTS[method](this.element, this);
+		MAPPED_ELEMENTS[method](this.handle, this);
+		MAPPED_ELEMENTS[method](this.separator, this);
+
+		if (this.types.auto) {
+			RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
+		}
+	}
+
+	updateOrientation(): void {
 		this.types = getTypes(this);
 
+		if (this.types.auto) {
+			RESIZE_OBSERVER.observe(this.element);
+		} else {
+			RESIZE_OBSERVER.unobserve(this.element);
+		}
+
 		if (this.types.horizontal) {
-			this.element.setAttribute('oui-splitter-horizontal', '');
+			this.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
+		} else {
+			this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
 		}
 
 		setAriaOrientation(this);
-		setAriaValue(this);
+	}
+
+	updateValues(): void {
+		this.values = getValues(this.element);
+
+		requestAnimationFrame(() => {
+			setSize(this, this.values.now.current);
+			setAriaValue(this);
+		});
 	}
 }
 
@@ -109,7 +195,7 @@ function createHandle(): HTMLSpanElement {
 	const handle = document.createElement('span');
 
 	handle.setAttribute('aria-hidden', 'true');
-	handle.setAttribute('oui-splitter-handle', '');
+	handle.setAttribute(ATTRIBUTE_HANDLE, '');
 
 	return handle;
 }
@@ -122,13 +208,13 @@ function createSeparator(splitter: Splitter): HTMLDivElement {
 
 	separator.setAttribute('aria-controls', splitter.element.id);
 	separator.setAttribute('aria-label', 'Resize panels');
-	separator.setAttribute('oui-splitter-separator', '');
+	separator.setAttribute(ATTRIBUTE_SEPARATOR, '');
 
 	return separator;
 }
 
 function getContained(min: number, value: number, max: number): number {
-	return round(clamp(value, min, max), 6);
+	return round(clamp(value, min, max), VALUE_DECIMALS);
 }
 
 function getSize(splitter: Splitter, value: number): number {
@@ -154,9 +240,7 @@ function getTypes(splitter: Splitter, width?: number, height?: number): Types {
 	if (type === 'auto') {
 		return {
 			auto: true,
-			horizontal:
-				(height ?? splitter.rectangle.height) >
-				(width ?? splitter.rectangle.width),
+			horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width),
 		};
 	}
 
@@ -166,11 +250,7 @@ function getTypes(splitter: Splitter, width?: number, height?: number): Types {
 	};
 }
 
-function getValue(
-	element: HTMLElement,
-	name: string,
-	defaultValue: number,
-): number {
+function getValue(element: HTMLElement, name: string, defaultValue: number): number {
 	const value = element.getAttribute(name);
 
 	if (isNullableOrWhitespace(value)) {
@@ -183,24 +263,24 @@ function getValue(
 		return defaultValue;
 	}
 
-	return parsed < 0 ? defaultValue : parsed > 1 ? parsed / 100 : parsed;
+	if (parsed < 0) {
+		return defaultValue;
+	}
+
+	return parsed > 1 ? parsed / NAVIGATION_MAXIMUM_TOTAL : parsed;
 }
 
 function getValues(element: OuiSplitterElement): Values {
 	const values: Values = {
-		max: getValue(element, 'max', 0.9),
-		min: getValue(element, 'min', 0.1),
+		max: getValue(element, 'max', NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, 'min', NAVIGATION_MINIMUM_PERCENTAGE),
 		now: {
 			current: 0.5,
 			previous: 0.5,
 		},
 	};
 
-	const value = getContained(
-		values.min,
-		getValue(element, 'size', values.now.current),
-		values.max,
-	);
+	const value = getContained(values.min, getValue(element, 'size', values.now.current), values.max);
 
 	values.now.current = value;
 	values.now.previous = value;
@@ -209,23 +289,27 @@ function getValues(element: OuiSplitterElement): Values {
 }
 
 function onEnd(reset: boolean): void {
-	if (splitter != null) {
-		splitter.handle.removeAttribute('oui-splitter-active');
-		splitter.separator.removeAttribute('oui-splitter-active');
+	if (splitter == null) {
+		return;
+	}
 
-		if (reset) {
-			setSize(splitter, splitter.values.now.previous);
-		} else {
-			splitter.values.now.previous = splitter.values.now.current;
-		}
+	splitter.handle.removeAttribute(ATTRIBUTE_ACTIVE);
+	splitter.separator.removeAttribute(ATTRIBUTE_ACTIVE);
+
+	if (reset) {
+		setSize(splitter, splitter.values.now.previous);
+	} else {
+		splitter.values.now.previous = splitter.values.now.current;
 	}
 
 	splitter = undefined;
+
+	STYLING_TOGGLER.remove();
 }
 
 function onKeydown(event: KeyboardEvent): void {
 	switch (true) {
-		case allKeys.has(event.key):
+		case KEYS_ALL.has(event.key):
 			onNavigate(event);
 			break;
 
@@ -238,79 +322,37 @@ function onKeydown(event: KeyboardEvent): void {
 	}
 }
 
-function onMousedown(event: Event): void {
-	splitter = mapped.get(
-		findAncestor(
-			event.target as never,
-			'[oui-splitter-handle]',
-		) as HTMLSpanElement,
-	);
-
-	if (splitter == null) {
-		return;
-	}
-
-	splitter.handle.setAttribute('oui-splitter-active', '');
-	splitter.separator.setAttribute('oui-splitter-active', '');
-
-	splitter.rectangle = splitter.element.getBoundingClientRect();
-}
-
-function onMousemove(event: MouseEvent): void {
-	if (splitter == null) {
-		return;
-	}
-
-	const position = getPosition(event);
-
-	if (position != null) {
-		splitter.values.now.current = getSize(
-			splitter,
-			splitter.types.horizontal ? position.y : position.x,
-		);
-
-		setSize(splitter, splitter.values.now.current);
-	}
-}
-
-function onMouseup(): void {
-	if (splitter != null) {
-		onEnd(false);
-	}
-}
-
 function onNavigate(event: KeyboardEvent): void {
-	const splitter = mapped.get(
-		findAncestor(
-			event.target as never,
-			'[oui-splitter-handle]',
-		) as HTMLSpanElement,
+	const splitter = MAPPED_ELEMENTS.get(
+		findAncestor(event.target as never, '[oui-splitter-separator]') as HTMLSpanElement,
 	);
 
 	if (splitter == null) {
 		return;
 	}
 
-	if (absoluteKeys.has(event.key)) {
-		setSize(
-			splitter,
-			event.key === 'End' ? splitter.values.max : splitter.values.min,
-			true,
-		);
+	const {types, values} = splitter;
+
+	if (KEYS_ABSOLUTE.has(event.key)) {
+		setSize(splitter, event.key === 'End' ? values.max : values.min, true);
 
 		return;
 	}
 
 	if (
-		(splitter.types.horizontal && !horizontalKeys.has(event.key)) ||
-		(!splitter.types.horizontal && !verticalKeys.has(event.key))
+		(types.horizontal && !KEYS_HORIZONTAL.has(event.key)) ||
+		!(types.horizontal || KEYS_VERTICAL.has(event.key))
 	) {
 		return;
 	}
 
-	const modifier = negativeKeys.has(event.key) ? -1 : 1;
+	const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
 
-	setSize(splitter, splitter.values.now.current + modifier * 0.05, true);
+	setSize(
+		splitter,
+		getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max),
+		true,
+	);
 }
 
 function onObservation(entries: ResizeObserverEntry[]): void {
@@ -320,22 +362,18 @@ function onObservation(entries: ResizeObserverEntry[]): void {
 
 	frame = requestAnimationFrame(() => {
 		for (const entry of entries) {
-			const splitter = mapped.get(entry.target as HTMLElement);
+			const splitter = MAPPED_ELEMENTS.get(entry.target as HTMLElement);
 
 			if (splitter == null) {
 				return;
 			}
 
-			splitter.types = getTypes(
-				splitter,
-				entry.contentRect.width,
-				entry.contentRect.height,
-			);
+			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
 
 			if (splitter.types.horizontal) {
-				splitter.element.setAttribute('oui-splitter-horizontal', '');
+				splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
 			} else {
-				splitter.element.removeAttribute('oui-splitter-horizontal');
+				splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
 			}
 
 			setAriaOrientation(splitter);
@@ -345,6 +383,57 @@ function onObservation(entries: ResizeObserverEntry[]): void {
 	});
 }
 
+function onPointerdown(event: Event): void {
+	if (
+		(event.type === 'mousedown' && supportsTouch.value) ||
+		(event.type === 'touchstart' && !supportsTouch.value)
+	) {
+		return;
+	}
+
+	splitter = MAPPED_ELEMENTS.get(
+		findAncestor(event.target as never, SELECTOR_HANDLE) as HTMLSpanElement,
+	);
+
+	if (splitter == null) {
+		return;
+	}
+
+	if (supportsTouch.value) {
+		event.preventDefault();
+	}
+
+	splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, '');
+	splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, '');
+
+	splitter.rectangle = splitter.element.getBoundingClientRect();
+
+	STYLING_TOGGLER.set();
+}
+
+function onPointermove(event: MouseEvent): void {
+	if (splitter == null) {
+		return;
+	}
+
+	const position = getPosition(event);
+
+	if (position != null) {
+		splitter.values.now.current = getSize(
+			splitter,
+			splitter.types.horizontal ? position.y : position.x,
+		);
+
+		setSize(splitter, splitter.values.now.current);
+	}
+}
+
+function onPointerup(): void {
+	if (splitter != null) {
+		onEnd(false);
+	}
+}
+
 function setAriaOrientation(splitter: Splitter): void {
 	splitter.separator.setAttribute(
 		'aria-orientation',
@@ -356,10 +445,7 @@ function setAriaValue(splitter: Splitter): 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),
-	);
+	splitter.separator.setAttribute('aria-valuenow', String(splitter.values.now.current));
 }
 
 function setSize(splitter: Splitter, size: number, previous?: boolean): void {
@@ -376,19 +462,51 @@ function setSize(splitter: Splitter, size: number, previous?: boolean): void {
 
 //
 
-const absoluteKeys = new Set(['End', 'Home']);
+const SELECTOR = 'oui-splitter';
+
+const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
+
+const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
+
+const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
+
+const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
+
+const KEYS_ABSOLUTE: Set<string> = new Set(['End', 'Home']);
+
+const KEYS_HORIZONTAL: Set<string> = new Set(['ArrowDown', 'ArrowUp']);
+
+const KEYS_NEGATIVE: Set<string> = new Set(['ArrowLeft', 'ArrowUp']);
+
+const KEYS_VERTICAL: Set<string> = new Set(['ArrowLeft', 'ArrowRight']);
 
-const horizontalKeys = new Set(['ArrowDown', 'ArrowUp']);
+const KEYS_ALL: Set<string> = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
 
-const mapped = new WeakMap<HTMLElement, Splitter>();
+const MAPPED_ELEMENTS: WeakMap<HTMLElement, Splitter> = new WeakMap();
 
-const observer = new ResizeObserver(onObservation);
+const METHODS_CONNECT = ['delete', 'set'] as const;
 
-const negativeKeys = new Set(['ArrowLeft', 'ArrowUp']);
+const METHODS_OBSERVE = ['unobserve', 'observe'] as const;
 
-const verticalKeys = new Set(['ArrowLeft', 'ArrowRight']);
+const NAVIGATION_MAXIMUM_PERCENTAGE = 0.9;
 
-const allKeys = new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
+const NAVIGATION_MAXIMUM_TOTAL = 100;
+
+const NAVIGATION_MINIMUM_PERCENTAGE = 0.1;
+
+const NAVIGATION_MODIFIER = 0.05;
+
+const RESIZE_OBSERVER: ResizeObserver = new ResizeObserver(onObservation);
+
+const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
+
+const STYLING_TOGGLER: StyleToggler = toggleStyles(document.body, {
+	touchAction: 'none',
+	userSelect: 'none',
+	webkitUserSelect: 'none',
+});
+
+const VALUE_DECIMALS = 6;
 
 let frame: DOMHighResTimeStamp | undefined;
 
@@ -396,12 +514,11 @@ let splitter: Splitter | undefined;
 
 //
 
-customElements.define('oui-splitter', OuiSplitterElement);
+customElements.define(SELECTOR, OuiSplitterElement);
 
 on(document, 'keydown', onKeydown);
-
-on(document, 'mousedown', onMousedown);
-
-on(document, 'mousemove', onMousemove);
-
-on(document, 'mouseup', onMouseup);
+on(document, 'mousedown', onPointerdown);
+on(document, 'pointermove', onPointermove);
+on(document, 'pointerup', onPointerup);
+on(document, 'touchcancel', onPointerup, {passive: false});
+on(document, 'touchstart', onPointerdown, {passive: false});