@oscarpalmer/oui 0.16.0 → 0.18.0

package/dist/js/splitter.js

@@ -1,211 +1,290 @@
-import { clamp } from "@oscarpalmer/atoms/number";
-import { on, getPosition } from "@oscarpalmer/toretto/event";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-class OuiSplitterElement extends HTMLElement {
-  #splitter;
-  constructor() {
-    super();
-    const panels = [...this.children].filter(
-      (child) => child instanceof HTMLElement
-    );
-    if (panels.length !== 2) {
-      throw new Error("oui-splitter must have exactly two panels.");
-    }
-    this.#splitter = new Splitter(this, panels);
-  }
-  connectedCallback() {
-    if (this.#splitter.types.auto) {
-      observer.observe(this);
-    }
-  }
-  disconnectedCallback() {
-    if (this.#splitter.types.auto) {
-      observer.unobserve(this);
-    }
-  }
-}
-class Splitter {
-  constructor(element, panels) {
-    this.element = element;
-    this.panels = panels;
-    this.handle = createHandle();
-    this.rectangle = element.getBoundingClientRect();
-    this.separator = createSeparator();
-    this.separator.append(this.handle);
-    panels[0].insertAdjacentElement("afterend", this.separator);
-    mapped.set(element, this);
-    mapped.set(this.handle, this);
-    setSize(this, this.flex.value);
-    this.types = getTypes(this);
-    if (this.types.horizontal) {
-      this.element.setAttribute("oui-splitter-horizontal", "");
-    }
-  }
-  flex = {
-    previous: 0.5,
-    value: 0.5
-  };
-  handle;
-  rectangle;
-  separator;
-  types;
-}
+import { round } from "@oscarpalmer/atoms/math";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+import supportsTouch from "@oscarpalmer/toretto/touch";
+var OuiSplitterElement = class extends HTMLElement {
+	static observedAttributes = [
+		"max",
+		"min",
+		"size",
+		"type"
+	];
+	#splitter;
+	get max() {
+		return this.#splitter.values.max;
+	}
+	set max(value) {
+		this.setAttribute("max", String(value));
+	}
+	get min() {
+		return this.#splitter.values.min;
+	}
+	set min(value) {
+		this.setAttribute("min", String(value));
+	}
+	get size() {
+		return this.#splitter.values.now.current;
+	}
+	set size(value) {
+		this.setAttribute("size", String(value));
+	}
+	get type() {
+		return this.getAttribute("type") ?? "vertical";
+	}
+	set type(value) {
+		this.setAttribute("type", value);
+	}
+	constructor() {
+		super();
+		const panels = [...this.children].filter((child) => child instanceof HTMLElement);
+		if (panels.length !== 2) throw new Error(`${SELECTOR} must have exactly two panels.`);
+		this.#splitter = new Splitter(this, panels);
+	}
+	connectedCallback() {
+		this.#splitter.updateConnections(1);
+	}
+	disconnectedCallback() {
+		this.#splitter.updateConnections(0);
+	}
+	attributeChangedCallback(name) {
+		switch (name) {
+			case "max":
+			case "min":
+			case "size":
+				this.#splitter.updateValues();
+				break;
+			case "type":
+				this.#splitter.updateOrientation();
+				break;
+			default: break;
+		}
+	}
+};
+var index = 0;
+var Splitter = class {
+	element;
+	handle;
+	panels;
+	rectangle;
+	separator;
+	types;
+	values;
+	constructor(element, panels) {
+		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) {
+		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() {
+		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() {
+		this.values = getValues(this.element);
+		requestAnimationFrame(() => {
+			setSize(this, this.values.now.current);
+			setAriaValue(this);
+		});
+	}
+};
 function createHandle() {
-  const handle = document.createElement("span");
-  handle.tabIndex = 0;
-  handle.setAttribute("aria-label", "Resize panels");
-  handle.setAttribute("oui-splitter-handle", "");
-  return handle;
-}
-function createSeparator() {
-  const separator = document.createElement("div");
-  separator.setAttribute("oui-splitter-separator", "");
-  return separator;
-}
-function getFlex(splitter2, value) {
-  const { height, left, top, width } = splitter2.rectangle;
-  const offset = value - (splitter2.types.horizontal ? top : left);
-  const fraction = offset / (splitter2.types.horizontal ? height : width);
-  return clamp(fraction, 0.1, 0.9);
-}
-function getTypes(splitter2, width, height) {
-  const type = splitter2.element.getAttribute("type")?.trim() ?? "";
-  if (type === "horizontal") {
-    return {
-      auto: false,
-      horizontal: true
-    };
-  }
-  if (type === "auto") {
-    return {
-      auto: true,
-      horizontal: (height ?? splitter2.rectangle.height) > (width ?? splitter2.rectangle.width)
-    };
-  }
-  return {
-    auto: false,
-    horizontal: false
-  };
+	const handle = document.createElement("span");
+	handle.setAttribute("aria-hidden", "true");
+	handle.setAttribute(ATTRIBUTE_HANDLE, "");
+	return handle;
+}
+function createSeparator(splitter$1) {
+	const separator = document.createElement("div");
+	separator.role = "separator";
+	separator.tabIndex = 0;
+	separator.setAttribute("aria-controls", splitter$1.element.id);
+	separator.setAttribute("aria-label", "Resize panels");
+	separator.setAttribute(ATTRIBUTE_SEPARATOR, "");
+	return separator;
+}
+function getContained(min, value, max) {
+	return round(clamp(value, min, max), VALUE_DECIMALS);
+}
+function getSize(splitter$1, value) {
+	const { height, left, top, width } = splitter$1.rectangle;
+	const fraction = (value - (splitter$1.types.horizontal ? top : left)) / (splitter$1.types.horizontal ? height : width);
+	return getContained(splitter$1.values.min, fraction, splitter$1.values.max);
+}
+function getTypes(splitter$1, width, height) {
+	const type = splitter$1.element.getAttribute("type")?.trim() ?? "";
+	if (type === "horizontal") return {
+		auto: false,
+		horizontal: true
+	};
+	if (type === "auto") return {
+		auto: true,
+		horizontal: (height ?? splitter$1.rectangle.height) > (width ?? splitter$1.rectangle.width)
+	};
+	return {
+		auto: false,
+		horizontal: false
+	};
+}
+function getValue(element, name, defaultValue) {
+	const value = element.getAttribute(name);
+	if (isNullableOrWhitespace(value)) return defaultValue;
+	const parsed = Number.parseFloat(value);
+	if (Number.isNaN(parsed)) return defaultValue;
+	if (parsed < 0) return defaultValue;
+	return parsed > 1 ? parsed / NAVIGATION_MAXIMUM_TOTAL : parsed;
+}
+function getValues(element) {
+	const values = {
+		max: getValue(element, "max", NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, "min", NAVIGATION_MINIMUM_PERCENTAGE),
+		now: {
+			current: .5,
+			previous: .5
+		}
+	};
+	const value = getContained(values.min, getValue(element, "size", values.now.current), values.max);
+	values.now.current = value;
+	values.now.previous = value;
+	return values;
 }
 function onEnd(reset) {
-  if (splitter != null) {
-    splitter.handle.removeAttribute("oui-splitter-active");
-    splitter.separator.removeAttribute("oui-splitter-active");
-    if (reset) {
-      setSize(splitter, splitter.flex.previous);
-    } else {
-      splitter.flex.previous = splitter.flex.value;
-    }
-  }
-  splitter = void 0;
+	if (splitter == null) return;
+	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 = void 0;
+	STYLING_TOGGLER.remove();
 }
 function onKeydown(event) {
-  switch (true) {
-    case allKeys.has(event.key):
-      onNavigate(event);
-      break;
-    case event.key === "Escape":
-      onEnd(true);
-      break;
-  }
-}
-function onMousedown(event) {
-  splitter = mapped.get(
-    findAncestor(
-      event.target,
-      "[oui-splitter-handle]"
-    )
-  );
-  if (splitter == null) {
-    return;
-  }
-  splitter.handle.setAttribute("oui-splitter-active", "");
-  splitter.separator.setAttribute("oui-splitter-active", "");
-  splitter.rectangle = splitter.element.getBoundingClientRect();
-}
-function onMousemove(event) {
-  if (splitter == null) {
-    return;
-  }
-  const position = getPosition(event);
-  if (position != null) {
-    splitter.flex.value = getFlex(
-      splitter,
-      splitter.types.horizontal ? position.y : position.x
-    );
-    setSize(splitter, splitter.flex.value);
-  }
-}
-function onMouseup() {
-  if (splitter != null) {
-    onEnd(false);
-  }
+	switch (true) {
+		case KEYS_ALL.has(event.key):
+			onNavigate(event);
+			break;
+		case event.key === "Escape":
+			onEnd(true);
+			break;
+		default: break;
+	}
 }
 function onNavigate(event) {
-  const splitter2 = mapped.get(
-    findAncestor(
-      event.target,
-      "[oui-splitter-handle]"
-    )
-  );
-  if (splitter2 == null) {
-    return;
-  }
-  if (absoluteKeys.has(event.key)) {
-    setSize(splitter2, event.key === "End" ? 0.9 : 0.1, true);
-    return;
-  }
-  if (splitter2.types.horizontal && !horizontalKeys.has(event.key) || !splitter2.types.horizontal && !verticalKeys.has(event.key)) {
-    return;
-  }
-  const modifier = negativeKeys.has(event.key) ? -1 : 1;
-  setSize(splitter2, splitter2.flex.value + modifier * 0.05, true);
+	const splitter$1 = MAPPED_ELEMENTS.get(findAncestor(event.target, "[oui-splitter-separator]"));
+	if (splitter$1 == null) return;
+	const { types, values } = splitter$1;
+	if (KEYS_ABSOLUTE.has(event.key)) {
+		setSize(splitter$1, event.key === "End" ? values.max : values.min, true);
+		return;
+	}
+	if (types.horizontal && !KEYS_HORIZONTAL.has(event.key) || !(types.horizontal || KEYS_VERTICAL.has(event.key))) return;
+	const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
+	setSize(splitter$1, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
 }
 function onObservation(entries) {
-  if (frame != null) {
-    cancelAnimationFrame(frame);
-  }
-  frame = requestAnimationFrame(() => {
-    for (const entry of entries) {
-      const splitter2 = mapped.get(entry.target);
-      if (splitter2 == null) {
-        return;
-      }
-      splitter2.types = getTypes(
-        splitter2,
-        entry.contentRect.width,
-        entry.contentRect.height
-      );
-      if (splitter2.types.horizontal) {
-        splitter2.element.setAttribute("oui-splitter-horizontal", "");
-      } else {
-        splitter2.element.removeAttribute("oui-splitter-horizontal");
-      }
-    }
-    frame = void 0;
-  });
-}
-function setSize(splitter2, size, previous) {
-  splitter2.flex.value = size;
-  if (previous) {
-    splitter2.flex.previous = size;
-  }
-  splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
-}
-const absoluteKeys = /* @__PURE__ */ new Set(["End", "Home"]);
-const horizontalKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
-const mapped = /* @__PURE__ */ new WeakMap();
-const observer = new ResizeObserver(onObservation);
-const negativeKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
-const verticalKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
-const allKeys = /* @__PURE__ */ new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
-let frame;
-let splitter;
-customElements.define("oui-splitter", OuiSplitterElement);
+	if (frame != null) cancelAnimationFrame(frame);
+	frame = requestAnimationFrame(() => {
+		for (const entry of entries) {
+			const splitter$1 = MAPPED_ELEMENTS.get(entry.target);
+			if (splitter$1 == null) return;
+			splitter$1.types = getTypes(splitter$1, entry.contentRect.width, entry.contentRect.height);
+			if (splitter$1.types.horizontal) splitter$1.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
+			else splitter$1.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+			setAriaOrientation(splitter$1);
+		}
+		frame = void 0;
+	});
+}
+function onPointerdown(event) {
+	if (event.type === "mousedown" && supportsTouch.value || event.type === "touchstart" && !supportsTouch.value) return;
+	splitter = MAPPED_ELEMENTS.get(findAncestor(event.target, SELECTOR_HANDLE));
+	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) {
+	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() {
+	if (splitter != null) onEnd(false);
+}
+function setAriaOrientation(splitter$1) {
+	splitter$1.separator.setAttribute("aria-orientation", splitter$1.types.horizontal ? "horizontal" : "vertical");
+}
+function setAriaValue(splitter$1) {
+	splitter$1.separator.setAttribute("aria-valuemax", String(splitter$1.values.max));
+	splitter$1.separator.setAttribute("aria-valuemin", String(splitter$1.values.min));
+	splitter$1.separator.setAttribute("aria-valuenow", String(splitter$1.values.now.current));
+}
+function setSize(splitter$1, size, previous) {
+	splitter$1.values.now.current = size;
+	if (previous) splitter$1.values.now.previous = size;
+	splitter$1.element.style.setProperty("--oui-splitter-size", `${size}`);
+	setAriaValue(splitter$1);
+}
+var SELECTOR = "oui-splitter";
+var ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
+var ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
+var ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
+var ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
+var KEYS_ABSOLUTE = new Set(["End", "Home"]);
+var KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
+var KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
+var KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
+var KEYS_ALL = new Set([
+	...KEYS_ABSOLUTE,
+	...KEYS_HORIZONTAL,
+	...KEYS_VERTICAL
+]);
+var MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
+var METHODS_CONNECT = ["delete", "set"];
+var METHODS_OBSERVE = ["unobserve", "observe"];
+var NAVIGATION_MAXIMUM_PERCENTAGE = .9;
+var NAVIGATION_MAXIMUM_TOTAL = 100;
+var NAVIGATION_MINIMUM_PERCENTAGE = .1;
+var NAVIGATION_MODIFIER = .05;
+var RESIZE_OBSERVER = new ResizeObserver(onObservation);
+var SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
+var STYLING_TOGGLER = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+var VALUE_DECIMALS = 6;
+var frame;
+var splitter;
+customElements.define(SELECTOR, OuiSplitterElement);
 on(document, "keydown", onKeydown);
-on(document, "mousedown", onMousedown);
-on(document, "mousemove", onMousemove);
-on(document, "mouseup", onMouseup);
-export {
-  OuiSplitterElement
-};
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchstart", onPointerdown, { passive: false });
+export { OuiSplitterElement };