@xsynaptic/sonic-ui 0.4.0 → 0.5.0

package/dist/default/elements/switch.js

@@ -0,0 +1,279 @@
+import { clamp } from "../lib/math.js";
+import { requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { bindHold } from "../lib/hold.js";
+import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
+
+//#region src/elements/switch.ts
+const renderSwitch = template(`
+		<div class="sonic-switch">
+			<span aria-hidden="true" class="sonic-switch-bushing"></span>
+			<span aria-hidden="true" class="sonic-switch-bat"></span>
+		</div>
+	`, HTMLDivElement);
+const renderPosition = template(`
+		<button class="sonic-switch-position" role="radio" type="button">
+			<span class="sonic-switch-label"></span>
+		</button>
+	`, HTMLButtonElement);
+const renderBare = template(`<button class="sonic-switch-position" role="switch" type="button"></button>`, HTMLButtonElement);
+const pressCentreZone = .08;
+function pressedIndex(index, count, offset) {
+	if (count === 2) return index === 0 ? 1 : 0;
+	const side = Math.abs(offset) < pressCentreZone ? 1 : Math.sign(offset);
+	const next = index + side;
+	return next < 0 || next >= count ? index - side : next;
+}
+var SonicSwitch = class extends SonicRadioGroupElement {
+	static observedAttributes = [
+		...SonicRadioGroupElement.observedAttributes,
+		"checked",
+		"orientation"
+	];
+	get checked() {
+		return this.#isDirty ? this.#checked : this.defaultChecked;
+	}
+	set checked(isChecked) {
+		this.#isDirty = true;
+		this.#checked = isChecked === true;
+		this.render();
+	}
+	get defaultChecked() {
+		return this.hasAttribute("checked");
+	}
+	set defaultChecked(isChecked) {
+		this.reflect("checked", isChecked);
+	}
+	get orientation() {
+		return this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical";
+	}
+	set orientation(direction) {
+		this.reflect("orientation", direction);
+	}
+	get value() {
+		const value = super.value;
+		return value === "" && this.#isBare() ? "on" : value;
+	}
+	set value(next) {
+		super.value = next;
+	}
+	group = renderSwitch();
+	#bare = renderBare();
+	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
+	#batPress;
+	#checked = false;
+	#holding;
+	#isClickSwallowed = false;
+	#isDirty = false;
+	attributeChangedCallback(name) {
+		if (name === "checked") this.#isDirty = false;
+		if (this.isDisabled()) this.#holding?.release();
+		super.attributeChangedCallback(name);
+	}
+	formResetCallback() {
+		this.#isDirty = false;
+		super.formResetCallback();
+	}
+	activate() {
+		if (this.#isBare()) this.#bare.click();
+		else super.activate();
+	}
+	chooseByClick(option) {
+		super.chooseByClick(option);
+		if (this.#isMomentary(option)) this.#springBack();
+	}
+	chooseByKey(option, event) {
+		if (!this.#isMomentary(option)) {
+			super.chooseByKey(option, event);
+			return;
+		}
+		if (event.repeat) return;
+		this.#hold(option, event.key);
+		option.focus();
+	}
+	claimPress(option, event) {
+		if (this.#grabBat(event)) return true;
+		if (!this.#isMomentary(option)) return false;
+		this.group.setPointerCapture(event.pointerId);
+		this.#hold(option, event.pointerId);
+		return true;
+	}
+	connect(signal) {
+		const group = this.group;
+		this.upgradeProperties("defaultChecked", "checked", "orientation");
+		super.connect(signal);
+		this.checkStyles(group, "switch.css");
+		this.#bare.addEventListener("click", (event) => {
+			const isSwallowed = this.#isClickSwallowed && event instanceof PointerEvent && event.pointerType !== "";
+			this.#isClickSwallowed = false;
+			if (!isSwallowed) this.#setChecked(!this.checked);
+		}, { signal });
+		this.#bare.addEventListener("pointerdown", (event) => {
+			this.#isClickSwallowed = false;
+			if (event.button === 0 && !this.isDisabled()) this.#grabBat(event);
+		}, { signal });
+		this.#bindBat(group, signal);
+		this.#holding = bindHold(group, {
+			canHold: () => !this.isDisabled(),
+			leave: "focusout",
+			onHold: () => {
+				this.toggleState("held", true);
+			},
+			onRelease: () => {
+				this.toggleState("held", false);
+				this.#springBack();
+			}
+		}, signal);
+	}
+	focusTarget() {
+		return this.#isBare() ? this.#bare : super.focusTarget();
+	}
+	isWrapping() {
+		return false;
+	}
+	releaseTarget(option) {
+		if (this.#isMomentary(option)) return void 0;
+		const options = this.options();
+		if (options.length === 2 && optionValue(option) === this.value) return options.find((other) => other !== option);
+		return option;
+	}
+	render() {
+		const group = this.group;
+		const options = this.options();
+		if (options.length > 0) {
+			this.#bare.remove();
+			writeAttribute(group, "role", "radiogroup");
+			group.dataset.sonicPositionCount = String(options.length);
+			super.render();
+			this.#renderThrow(this.#checkedIndex(options));
+			return;
+		}
+		const bare = this.#bare;
+		const isChecked = this.checked;
+		writeAttribute(group, "role", void 0);
+		delete group.dataset.sonicPositionCount;
+		if (bare.parentElement !== group) group.append(bare);
+		bare.disabled = this.isDisabled();
+		bare.setAttribute("aria-checked", String(isChecked));
+		this.forwardNaming(group, false);
+		this.forwardNaming(bare, true);
+		const onSide = this.orientation === "horizontal" ? 1 : -1;
+		group.style.setProperty("--_sonic-switch-at", String(isChecked ? onSide : -onSide));
+		this.writeFormValue(isChecked ? this.value : null, String(isChecked));
+	}
+	renderOption() {
+		return renderPosition();
+	}
+	restoreState(state) {
+		if (this.#isBare()) this.checked = state === "true";
+		else super.restoreState(state);
+	}
+	#along(event) {
+		return this.orientation === "horizontal" ? event.clientX : event.clientY;
+	}
+	#bindBat(group, signal) {
+		const drop = (event) => {
+			if (event.pointerId === this.#batPress?.pointerId) this.#batPress = void 0;
+		};
+		group.addEventListener("pointermove", (event) => {
+			const press = this.#batPress;
+			if (press?.pointerId !== event.pointerId || this.isDisabled()) return;
+			const delta = this.#along(event) - press.last;
+			if (Math.abs(delta) < this.#bat.getBoundingClientRect().width / 4) return;
+			press.hasMoved = true;
+			press.last = this.#along(event);
+			this.#throwBy(Math.sign(delta), event.pointerId);
+		}, { signal });
+		group.addEventListener("pointerup", (event) => {
+			const press = this.#batPress;
+			if (press?.pointerId !== event.pointerId) return;
+			this.#batPress = void 0;
+			if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
+			this.#isClickSwallowed = true;
+		}, { signal });
+		group.addEventListener("pointercancel", drop, { signal });
+		group.addEventListener("lostpointercapture", drop, { signal });
+	}
+	#checkedIndex(options) {
+		return options.findIndex((option) => optionValue(option) === this.value);
+	}
+	#grabBat(event) {
+		if (!isUnder(this.#bat, event.clientX, event.clientY)) return false;
+		this.group.setPointerCapture(event.pointerId);
+		this.#batPress = {
+			hasMoved: false,
+			last: this.#along(event),
+			pointerId: event.pointerId
+		};
+		return true;
+	}
+	#hasSprungFrom(option) {
+		if (!option || !this.#isMomentary(option)) return false;
+		this.#holding?.release();
+		return this.value !== optionValue(option);
+	}
+	#hold(option, by) {
+		if (this.#holding?.hold(by) === true) this.select(option);
+	}
+	#isBare() {
+		return this.options().length === 0;
+	}
+	#isMomentary(option) {
+		const options = this.options();
+		return (option === options[0] || option === options.at(-1)) && options.length > 1 && option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-momentary") === true;
+	}
+	#pressBat(event) {
+		const options = this.options();
+		if (options.length === 0) {
+			this.#setChecked(!this.checked);
+			return;
+		}
+		const box = this.#bat.getBoundingClientRect();
+		const [start, size] = this.orientation === "horizontal" ? [box.left, box.width] : [box.top, box.height];
+		const offset = (this.#along(event) - start) / size - .5;
+		const option = options[pressedIndex(this.#checkedIndex(options), options.length, offset)];
+		if (!option) return;
+		this.chooseByClick(option);
+		this.#refocus(options);
+	}
+	#refocus(options) {
+		if (this.group.matches(":focus-within")) options[this.#checkedIndex(options)]?.focus();
+	}
+	#renderThrow(index) {
+		const count = this.options().length;
+		const at = index < 0 || count < 2 ? 0 : 2 * index / (count - 1) - 1;
+		this.group.style.setProperty("--_sonic-switch-at", String(at));
+	}
+	#setChecked(isChecked) {
+		if (isChecked === this.checked) return;
+		this.checked = isChecked;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#springBack() {
+		const options = this.options();
+		const index = this.#checkedIndex(options);
+		const held = options[index];
+		if (!held || !this.#isMomentary(held)) return;
+		const rest = options[index === 0 ? 1 : index - 1];
+		if (!rest) return;
+		const isFocused = this.group.contains(this.ownerDocument.activeElement);
+		this.select(rest);
+		if (isFocused) rest.focus();
+	}
+	#throwBy(direction, pointerId) {
+		const options = this.options();
+		if (options.length === 0) {
+			this.#setChecked(direction === (this.orientation === "horizontal" ? 1 : -1));
+			return;
+		}
+		const index = this.#checkedIndex(options);
+		const option = options[clamp(index + direction, 0, options.length - 1)];
+		if (!option || option === options[index] || this.#hasSprungFrom(options[index])) return;
+		if (this.#isMomentary(option)) this.#hold(option, pointerId);
+		else this.select(option);
+		this.#refocus(options);
+	}
+};
+
+//#endregion
+export { SonicSwitch };