@oscarpalmer/oui 0.24.0 → 0.26.0

package/src/js/splitter.ts

@@ -20,6 +20,83 @@ const ATTRIBUTE_SIZE = 'size';
 
 const ATTRIBUTE_TYPE = 'type';
 
+class OuiSplitter {
+	element: OuiSplitterElement;
+
+	handle: HTMLSpanElement;
+
+	panels: HTMLElement[];
+
+	rectangle: DOMRect;
+
+	separator: HTMLDivElement;
+
+	types!: OuiSplitterTypes;
+
+	values: OuiSplitterValues;
+
+	constructor(element: OuiSplitterElement, panels: HTMLElement[]) {
+		this.element = element;
+		this.panels = panels;
+
+		if (isNullableOrWhitespace(element.id)) {
+			element.id = `oui_splitter_${++index}`;
+		}
+
+		this.values = getValues(element);
+
+		this.handle = createHandle();
+		this.rectangle = element.getBoundingClientRect();
+		this.separator = createSeparator(this);
+
+		this.separator.append(this.handle);
+
+		panels[0].insertAdjacentElement('afterend', this.separator);
+
+		this.updateOrientation();
+		this.updateValues();
+	}
+
+	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(ATTRIBUTE_HORIZONTAL, '');
+		} else {
+			this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+		}
+
+		setAriaOrientation(this);
+	}
+
+	updateValues(): void {
+		this.values = getValues(this.element);
+
+		requestAnimationFrame(() => {
+			setSize(this, this.values.now.current);
+			setAriaValue(this);
+		});
+	}
+}
+
 export class OuiSplitterElement extends HTMLElement {
 	static readonly observedAttributes = [
 		ATTRIBUTE_MAX,
@@ -28,7 +105,7 @@ export class OuiSplitterElement extends HTMLElement {
 		ATTRIBUTE_TYPE,
 	];
 
-	readonly #splitter: Splitter;
+	readonly #splitter: OuiSplitter;
 
 	// Getters and setters
 
@@ -72,10 +149,10 @@ export class OuiSplitterElement extends HTMLElement {
 		const panels = [...this.children].filter(child => child instanceof HTMLElement);
 
 		if (panels.length !== 2) {
-			throw new Error(`${SELECTOR} must have exactly two panels.`);
+			throw new Error(MESSAGE);
 		}
 
-		this.#splitter = new Splitter(this, panels);
+		this.#splitter = new OuiSplitter(this, panels);
 	}
 
 	// Methods
@@ -106,97 +183,18 @@ export class OuiSplitterElement extends HTMLElement {
 	}
 }
 
-let index = 0;
-
-class Splitter {
-	element: OuiSplitterElement;
-
-	handle: HTMLSpanElement;
-
-	panels: HTMLElement[];
-
-	rectangle: DOMRect;
-
-	separator: HTMLDivElement;
-
-	types!: Types;
-
-	values: Values;
-
-	constructor(element: OuiSplitterElement, panels: HTMLElement[]) {
-		this.element = element;
-		this.panels = panels;
-
-		if (isNullableOrWhitespace(element.id)) {
-			element.id = `oui_splitter_${++index}`;
-		}
-
-		this.values = getValues(element);
-
-		this.handle = createHandle();
-		this.rectangle = element.getBoundingClientRect();
-		this.separator = createSeparator(this);
-
-		this.separator.append(this.handle);
-
-		panels[0].insertAdjacentElement('afterend', this.separator);
-
-		this.updateOrientation();
-		this.updateValues();
-	}
-
-	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(ATTRIBUTE_HORIZONTAL, '');
-		} else {
-			this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-		}
-
-		setAriaOrientation(this);
-	}
-
-	updateValues(): void {
-		this.values = getValues(this.element);
-
-		requestAnimationFrame(() => {
-			setSize(this, this.values.now.current);
-			setAriaValue(this);
-		});
-	}
-}
-
-type Types = {
+type OuiSplitterTypes = {
 	auto: boolean;
 	horizontal: boolean;
 };
 
-type Values = {
+type OuiSplitterValues = {
 	max: number;
 	min: number;
-	now: ValuesNow;
+	now: OuiSplitterValuesNow;
 };
 
-type ValuesNow = {
+type OuiSplitterValuesNow = {
 	current: number;
 	previous: number;
 };
@@ -212,7 +210,7 @@ function createHandle(): HTMLSpanElement {
 	return handle;
 }
 
-function createSeparator(splitter: Splitter): HTMLDivElement {
+function createSeparator(splitter: OuiSplitter): HTMLDivElement {
 	const separator = document.createElement('div');
 
 	separator.role = 'separator';
@@ -229,7 +227,7 @@ function getContained(min: number, value: number, max: number): number {
 	return round(clamp(value, min, max), VALUE_DECIMALS);
 }
 
-function getSize(splitter: Splitter, value: number): number {
+function getSize(splitter: OuiSplitter, value: number): number {
 	const {height, left, top, width} = splitter.rectangle;
 
 	const offset = value - (splitter.types.horizontal ? top : left);
@@ -239,7 +237,7 @@ function getSize(splitter: Splitter, value: number): number {
 	return getContained(splitter.values.min, fraction, splitter.values.max);
 }
 
-function getTypes(splitter: Splitter, width?: number, height?: number): Types {
+function getTypes(splitter: OuiSplitter, width?: number, height?: number): OuiSplitterTypes {
 	const type = splitter.element.getAttribute('type')?.trim() ?? '';
 
 	if (type === 'horizontal') {
@@ -282,8 +280,8 @@ function getValue(element: HTMLElement, name: string, defaultValue: number): num
 	return parsed > 1 ? parsed / NAVIGATION_MAXIMUM_TOTAL : parsed;
 }
 
-function getValues(element: OuiSplitterElement): Values {
-	const values: Values = {
+function getValues(element: OuiSplitterElement): OuiSplitterValues {
+	const values: OuiSplitterValues = {
 		max: getValue(element, ATTRIBUTE_MAX, NAVIGATION_MAXIMUM_PERCENTAGE),
 		min: getValue(element, ATTRIBUTE_MIN, NAVIGATION_MINIMUM_PERCENTAGE),
 		now: {
@@ -445,21 +443,21 @@ function onPointerup(): void {
 	}
 }
 
-function setAriaOrientation(splitter: Splitter): void {
+function setAriaOrientation(splitter: OuiSplitter): void {
 	splitter.separator.setAttribute(
 		'aria-orientation',
 		splitter.types.horizontal ? 'horizontal' : 'vertical',
 	);
 }
 
-function setAriaValue(splitter: Splitter): void {
+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));
 }
 
-function setSize(splitter: Splitter, size: number, previous?: boolean): void {
+function setSize(splitter: OuiSplitter, size: number, previous?: boolean): void {
 	splitter.values.now.current = size;
 
 	if (previous) {
@@ -493,7 +491,9 @@ const KEYS_VERTICAL: Set<string> = new Set(['ArrowLeft', 'ArrowRight']);
 
 const KEYS_ALL: Set<string> = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
 
-const MAPPED_ELEMENTS: WeakMap<HTMLElement, Splitter> = new WeakMap();
+const MAPPED_ELEMENTS: WeakMap<HTMLElement, OuiSplitter> = new WeakMap();
+
+const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
 
 const METHODS_CONNECT = ['delete', 'set'] as const;
 
@@ -519,9 +519,11 @@ const STYLING_TOGGLER: StyleToggler = toggleStyles(document.body, {
 
 const VALUE_DECIMALS = 6;
 
+let index = 0;
+
 let frame: DOMHighResTimeStamp | undefined;
 
-let splitter: Splitter | undefined;
+let splitter: OuiSplitter | undefined;
 
 //
 

package/src/js/toolbar.ts

@@ -0,0 +1,214 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {attributable} from './internal/attributable';
+
+class OuiToolbar {
+	readonly #state: OuiToolbarState;
+
+	constructor(state: OuiToolbarState) {
+		this.#state = state;
+
+		updateFocus(this.#state, false);
+	}
+
+	destroy(): void {
+		for (const listener of this.#state.listeners) {
+			listener();
+		}
+
+		this.#state.active = undefined as never;
+		this.#state.element = undefined as never;
+		this.#state.listeners = undefined as never;
+	}
+}
+
+type OuiToolbarOrientation = 'horizontal' | 'vertical';
+
+type OuiToolbarState = {
+	active: OuiToolbarStateActive;
+	element: HTMLElement;
+	listeners: RemovableEventListener[];
+	orientation: OuiToolbarOrientation;
+};
+
+type OuiToolbarStateActive = {
+	element?: HTMLElement;
+	index: number;
+};
+
+function addToolbar(element: HTMLElement): void {
+	if (!instances.has(element)) {
+		instances.set(element, new OuiToolbar(getState(element)));
+	}
+}
+
+function getItems(element: HTMLElement): HTMLElement[] {
+	return [...element.querySelectorAll<HTMLElement>(SELECTOR)].filter(isValidItem);
+}
+
+function getOrientation(element: HTMLElement): OuiToolbarOrientation {
+	const attribute = element.getAttribute(ARIA_ORIENTATION);
+
+	return ORIENTATIONS.has(attribute as OuiToolbarOrientation)
+		? (attribute as OuiToolbarOrientation)
+		: ORIENTATION_HORIZONTAL;
+}
+
+function getState(element: HTMLElement): OuiToolbarState {
+	const state: OuiToolbarState = {
+		element,
+		active: {
+			index: 0,
+		},
+		listeners: [
+			on(element, EVENT_FOCUSIN, event => {
+				onFocusin(state, event);
+			}),
+			on(
+				element,
+				EVENT_KEYDOWN,
+				event => {
+					onKeydown(state, event);
+				},
+				{
+					passive: false,
+				},
+			),
+		],
+		orientation: getOrientation(element),
+	};
+
+	return state;
+}
+
+function isValidItem(element: HTMLElement): boolean {
+	return PROPERTY_DISABLED in element ? element.disabled !== true : true;
+}
+
+function onKeydown(state: OuiToolbarState, event: KeyboardEvent): void {
+	if (!KEYS_ALL.has(event.key)) {
+		return;
+	}
+
+	const items = getItems(state.element);
+
+	if (items.length === 0) {
+		return;
+	}
+
+	let index: number | undefined;
+
+	if (KEYS_ABSOLUTE.has(event.key)) {
+		index = event.key === KEY_HOME ? 0 : items.length - 1;
+	} else if (
+		state.orientation === ORIENTATION_HORIZONTAL
+			? KEYS_HORIZONTAL.has(event.key)
+			: KEYS_VERTICAL.has(event.key)
+	) {
+		if (state.active.element instanceof HTMLSelectElement) {
+			event.preventDefault();
+		}
+
+		index = clamp(
+			state.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1),
+			0,
+			items.length - 1,
+			true,
+		);
+	}
+
+	if (index == null || index === state.active.index) {
+		return;
+	}
+
+	state.active.element = items[index];
+	state.active.index = index;
+
+	updateFocus(state, true, items);
+}
+
+function onFocusin(state: OuiToolbarState, event: FocusEvent): void {
+	const item = findAncestor(event, SELECTOR);
+
+	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) {
+		return;
+	}
+
+	const items = getItems(state.element);
+	const index = items.indexOf(item);
+
+	if (index === -1) {
+		return;
+	}
+
+	state.active.element = item;
+	state.active.index = index;
+
+	updateFocus(state, false, items);
+}
+
+function removeToolbar(element: HTMLElement): void {
+	instances.get(element)?.destroy();
+
+	instances.delete(element);
+}
+
+function updateFocus(state: OuiToolbarState, focus: boolean, items?: HTMLElement[]): void {
+	const updated = items ?? getItems(state.element);
+	const {length} = updated;
+
+	if (length === 0) {
+		return;
+	}
+
+	for (let index = 0; index < length; index += 1) {
+		updated[index].tabIndex = index === state.active.index ? 0 : -1;
+	}
+
+	state.active.element ??= updated[state.active.index];
+
+	if (focus) {
+		state.active.element?.focus();
+	}
+}
+
+const ARIA_ORIENTATION = 'aria-orientation';
+
+const ATTRIBUTE = 'oui-toolbar';
+
+const EVENT_KEYDOWN = 'keydown';
+
+const EVENT_FOCUSIN = 'focusin';
+
+const KEY_ARROW_DOWN = 'ArrowDown';
+
+const KEY_ARROW_RIGHT = 'ArrowRight';
+
+const KEY_END = 'End';
+
+const KEY_HOME = 'Home';
+
+const KEYS_ABSOLUTE = new Set([KEY_END, KEY_HOME]);
+
+const KEYS_HORIZONTAL = new Set([KEY_ARROW_RIGHT, 'ArrowLeft']);
+
+const KEYS_VERTICAL = new Set([KEY_ARROW_DOWN, 'ArrowUp']);
+
+const KEYS_ALL = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
+
+const KEYS_NEXT = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
+
+const ORIENTATION_HORIZONTAL: OuiToolbarOrientation = 'horizontal';
+
+const ORIENTATIONS = new Set<OuiToolbarOrientation>([ORIENTATION_HORIZONTAL, 'vertical']);
+
+const PROPERTY_DISABLED = 'disabled';
+
+const SELECTOR = `[${ATTRIBUTE}-item]`;
+
+const instances = new WeakMap<HTMLElement, OuiToolbar>();
+
+attributable(ATTRIBUTE, addToolbar, removeToolbar);