@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/marquee/index.js

@@ -0,0 +1,382 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/marquee/anatomy.ts
+const anatomy = createAnatomy("marquee").parts("root", "viewport", "content", "edge", "item");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/marquee/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `marquee:${ctx.id}`;
+const getViewportId = (ctx) => ctx.ids?.viewport ?? `marquee:${ctx.id}:viewport`;
+const getContentId = (ctx, index) => ctx.ids?.content?.(index) ?? `marquee:${ctx.id}:content:${index}`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getViewportEl = (ctx) => ctx.getById(getViewportId(ctx));
+const getContentEl = (ctx, index) => ctx.getById(getContentId(ctx, index));
+//#endregion
+//#region src/machines/marquee/utils.ts
+const getEdgePositionStyles = (options) => {
+	const { side } = options;
+	switch (side) {
+		case "start": return {
+			top: 0,
+			insetInlineStart: 0,
+			height: "100%"
+		};
+		case "end": return {
+			top: 0,
+			insetInlineEnd: 0,
+			height: "100%"
+		};
+		case "top": return {
+			top: 0,
+			insetInline: 0,
+			width: "100%"
+		};
+		case "bottom": return {
+			bottom: 0,
+			insetInline: 0,
+			width: "100%"
+		};
+	}
+};
+const getMarqueeTranslate = (options) => {
+	const { side, dir } = options;
+	if (side === "top") return "-100%";
+	if (side === "bottom") return "100%";
+	return side === "start" && dir === "ltr" || side === "end" && dir === "rtl" ? "-100%" : "100%";
+};
+//#endregion
+//#region src/machines/marquee/connect.ts
+function connect(service, normalize) {
+	const { scope, send, context, computed, prop } = service;
+	const side = prop("side");
+	const paused = context.get("paused");
+	const duration = context.get("duration");
+	const orientation = computed("orientation");
+	const multiplier = computed("multiplier");
+	const isVertical = computed("isVertical");
+	return {
+		paused,
+		orientation,
+		side,
+		multiplier,
+		contentCount: multiplier + 1,
+		pause() {
+			send({ type: "PAUSE" });
+		},
+		resume() {
+			send({ type: "RESUME" });
+		},
+		togglePause() {
+			send({ type: "TOGGLE_PAUSE" });
+		},
+		restart() {
+			send({ type: "RESTART" });
+		},
+		getRootProps() {
+			const dir = prop("dir");
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir,
+				role: "region",
+				"aria-roledescription": "marquee",
+				"aria-live": "off",
+				"aria-label": prop("translations").root,
+				"data-state": paused ? "paused" : "idle",
+				"data-orientation": orientation,
+				"data-paused": dataAttr(paused),
+				onMouseEnter: prop("pauseOnInteraction") ? () => send({ type: "PAUSE" }) : void 0,
+				onMouseLeave: prop("pauseOnInteraction") ? () => send({ type: "RESUME" }) : void 0,
+				onFocusCapture: prop("pauseOnInteraction") ? (event) => {
+					if (event.target !== event.currentTarget) send({ type: "PAUSE" });
+				} : void 0,
+				onBlurCapture: prop("pauseOnInteraction") ? (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) send({ type: "RESUME" });
+				} : void 0,
+				style: {
+					display: "flex",
+					flexDirection: orientation === "vertical" ? "column" : "row",
+					position: "relative",
+					overflow: "hidden",
+					contain: "layout style paint",
+					"--marquee-duration": `${duration}s`,
+					"--marquee-spacing": prop("spacing"),
+					"--marquee-delay": `${prop("delay")}s`,
+					"--marquee-loop-count": prop("loopCount") === 0 ? "infinite" : prop("loopCount").toString(),
+					"--marquee-translate": getMarqueeTranslate({
+						side,
+						dir
+					})
+				}
+			});
+		},
+		getViewportProps() {
+			return normalize.element({
+				...parts.viewport.attrs,
+				id: getViewportId(scope),
+				"data-part": "viewport",
+				"data-orientation": orientation,
+				"data-side": side,
+				onAnimationIteration(event) {
+					if (event.target === getContentEl(scope, 0)) prop("onLoopComplete")?.();
+				},
+				onAnimationEnd(event) {
+					if (event.target === getContentEl(scope, 0)) prop("onComplete")?.();
+				},
+				style: {
+					display: "flex",
+					[isVertical ? "height" : "width"]: "100%",
+					flexDirection: orientation === "vertical" ? side === "bottom" ? "column-reverse" : "column" : side === "end" ? "row-reverse" : "row"
+				}
+			});
+		},
+		getContentProps(props) {
+			const { index } = props;
+			const clone = index > 0;
+			return normalize.element({
+				...parts.content.attrs,
+				id: getContentId(scope, index),
+				dir: prop("dir"),
+				"data-part": "content",
+				"data-index": index,
+				"data-orientation": orientation,
+				"data-side": side,
+				"data-reverse": prop("reverse") ? "" : void 0,
+				"data-clone": dataAttr(clone),
+				role: clone ? "presentation" : void 0,
+				"aria-hidden": clone ? true : void 0,
+				style: {
+					display: "flex",
+					flexDirection: orientation === "vertical" ? "column" : "row",
+					flexShrink: 0,
+					backfaceVisibility: "hidden",
+					WebkitBackfaceVisibility: "hidden",
+					willChange: paused ? "auto" : "transform",
+					transform: "translateZ(0)",
+					[isVertical ? "minWidth" : "minHeight"]: "auto",
+					contain: "paint"
+				}
+			});
+		},
+		getEdgeProps(props) {
+			const { side } = props;
+			const dir = prop("dir");
+			return normalize.element({
+				...parts.edge.attrs,
+				dir,
+				"data-part": "edge",
+				"data-side": side,
+				"data-orientation": orientation,
+				style: {
+					pointerEvents: "none",
+					position: "absolute",
+					...getEdgePositionStyles({
+						side,
+						dir
+					})
+				}
+			});
+		},
+		getItemProps() {
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				style: { [isVertical ? "marginBlock" : "marginInline"]: "calc(var(--marquee-spacing) / 2)" }
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/marquee/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			dir: "ltr",
+			side: "start",
+			speed: 50,
+			delay: 0,
+			loopCount: 0,
+			spacing: "1rem",
+			autoFill: false,
+			pauseOnInteraction: false,
+			reverse: false,
+			defaultPaused: false,
+			translations: { root: "Marquee content" },
+			...props
+		};
+	},
+	refs() {
+		return {
+			dimensions: void 0,
+			initialDurationSet: false
+		};
+	},
+	context({ prop, bindable }) {
+		return {
+			paused: bindable(() => ({
+				value: prop("paused"),
+				defaultValue: prop("defaultPaused"),
+				onChange(value) {
+					prop("onPauseChange")?.({ paused: value });
+				}
+			})),
+			duration: bindable(() => ({ defaultValue: 2e3 / Math.max(.001, prop("speed")) }))
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	computed: {
+		orientation: ({ prop }) => {
+			const side = prop("side");
+			return side === "top" || side === "bottom" ? "vertical" : "horizontal";
+		},
+		isVertical: ({ prop }) => {
+			const side = prop("side");
+			return side === "top" || side === "bottom";
+		},
+		multiplier: ({ refs, prop }) => {
+			if (!prop("autoFill")) return 1;
+			const dimensions = refs.get("dimensions");
+			if (!dimensions) return 1;
+			const { rootSize, contentSize } = dimensions;
+			if (contentSize === 0) return 1;
+			return contentSize < rootSize ? Math.ceil(rootSize / contentSize) : 1;
+		}
+	},
+	watch({ track, action, prop }) {
+		track([() => prop("speed")], () => {
+			action(["recalculateDuration", "restartAnimation"]);
+		});
+		track([() => prop("spacing"), () => prop("side")], () => {
+			action(["recalculateDuration"]);
+		});
+	},
+	on: {
+		PAUSE: { actions: ["setPaused"] },
+		RESUME: { actions: ["setResumed"] },
+		TOGGLE_PAUSE: { actions: ["togglePaused"] },
+		RESTART: { actions: ["restartAnimation"] }
+	},
+	effects: ["trackDimensions"],
+	states: { idle: {} },
+	implementations: {
+		actions: {
+			setPaused({ context }) {
+				context.set("paused", true);
+			},
+			setResumed({ context }) {
+				context.set("paused", false);
+			},
+			togglePaused({ context }) {
+				context.set("paused", (prev) => !prev);
+			},
+			restartAnimation({ scope }) {
+				const viewportEl = getViewportEl(scope);
+				if (!viewportEl) return;
+				viewportEl.querySelectorAll("[data-part=\"content\"]").forEach((el) => {
+					el.style.animation = "none";
+					el.offsetHeight;
+					el.style.animation = "";
+				});
+			},
+			recalculateDuration({ refs, computed, context, prop }) {
+				const dimensions = refs.get("dimensions");
+				if (!dimensions) return;
+				const { rootSize, contentSize } = dimensions;
+				const duration = calculateDuration({
+					rootSize,
+					contentSize,
+					speed: Math.max(.001, prop("speed")),
+					multiplier: computed("multiplier"),
+					autoFill: prop("autoFill")
+				});
+				context.set("duration", duration);
+			}
+		},
+		effects: { trackDimensions({ scope, refs, computed, context, prop }) {
+			const rootEl = getRootEl(scope);
+			const contentEl = getContentEl(scope, 0);
+			if (!rootEl || !contentEl) return;
+			const win = scope.getWin();
+			const measureDimensions = () => {
+				return {
+					rootSize: computed("isVertical") ? rootEl.clientHeight : rootEl.clientWidth,
+					contentSize: computed("isVertical") ? contentEl.clientHeight : contentEl.clientWidth
+				};
+			};
+			const exec = () => {
+				const { rootSize, contentSize } = measureDimensions();
+				if (rootSize > 0 && contentSize > 0) {
+					refs.set("dimensions", {
+						rootSize,
+						contentSize
+					});
+					if (!refs.get("initialDurationSet")) {
+						const duration = calculateDuration({
+							rootSize,
+							contentSize,
+							speed: Math.max(.001, prop("speed")),
+							multiplier: computed("multiplier"),
+							autoFill: prop("autoFill")
+						});
+						context.set("duration", duration);
+						refs.set("initialDurationSet", true);
+					}
+				}
+			};
+			let rafId = null;
+			const observer = new win.ResizeObserver(() => {
+				if (rafId !== null) return;
+				rafId = win.requestAnimationFrame(() => {
+					const { rootSize, contentSize } = measureDimensions();
+					refs.set("dimensions", {
+						rootSize,
+						contentSize
+					});
+					rafId = null;
+				});
+			});
+			observer.observe(rootEl);
+			observer.observe(contentEl);
+			exec();
+			return () => {
+				observer.disconnect();
+				if (rafId !== null) win.cancelAnimationFrame(rafId);
+			};
+		} }
+	}
+});
+function calculateDuration(options) {
+	const { rootSize, contentSize, speed, multiplier, autoFill } = options;
+	if (autoFill) return contentSize * multiplier / speed;
+	return contentSize < rootSize ? rootSize / speed : contentSize / speed;
+}
+//#endregion
+//#region src/machines/marquee/props.ts
+const props = createProps()([
+	"autoFill",
+	"defaultPaused",
+	"delay",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopCount",
+	"onComplete",
+	"onLoopComplete",
+	"onPauseChange",
+	"paused",
+	"pauseOnInteraction",
+	"reverse",
+	"side",
+	"spacing",
+	"speed",
+	"translations"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };