1// @generated-source wix-headless-replatform
2// Framework-neutral state mechanics for cloned interaction primitives.
3
4export function bindActiveItemRail(root, { activateOnHover = false, alignActive = false } = {}) {
5  requireRoot(root, "active-card-rail");
6  const items = Array.from(root.querySelectorAll("[data-rp-item]"));

interaction-runtime.mjs on GitHub

const

controls

=

Array.

from

(root.

querySelectorAll

(

"[data-rp-direction]"

));

const track = root.querySelector("[data-rp-track]");

const viewport = root.querySelector("[data-rp-viewport]") || track?.parentElement || null;

const listeners = [];

const activate = (item) => {

if (!item || !items.includes(item)) return;

for (const candidate of items) {

const active = candidate === item;

candidate.setAttribute("data-rp-active", String(active));

candidate.setAttribute("aria-selected", String(active));

}

if (alignActive) alignItemInViewport(item, viewport);

root.dispatchEvent(new CustomEvent("rp:statechange", { detail: { index: items.indexOf(item) } }));

};

for (const item of items) {

const target = item.querySelector("[data-rp-activate]") || item;

listen(listeners, item, "click", (event) => {

const interactive = event.target?.closest?.("a,button,input,select,textarea,[role='button']");

if (interactive && interactive !== item && interactive !== target && !target.contains(interactive)) return;

activate(item);

});

listen(listeners, target, "keydown", (event) => {

if (event.key === "Enter" || event.key === " ") {

event.preventDefault();

activate(item);

}

});

if (activateOnHover) listen(listeners, item, "pointerenter", () => activate(item));

}

for (const control of controls) {

listen(listeners, control, "click", () => {

const direction = Number(control.getAttribute("data-rp-direction")) || 0;

const activeIndex = Math.max(0, items.findIndex((item) => item.getAttribute("data-rp-active") === "true"));

activate(items[wrapIndex(activeIndex + direction, items.length)]);

});

}

const initialState = root.getAttribute("data-rp-initial-state") || "single-active";

if (initialState !== "all-collapsed" && !items.some((item) => item.getAttribute("data-rp-active") === "true") && items[0]) activate(items[0]);

markInitialized(root, "active-card-rail");

return { activate, destroy: () => removeListeners(listeners) };

}

export function bindContentSwitcher(root) {

requireRoot(root, "content-switcher");

const items = Array.from(root.querySelectorAll("[data-rp-item][data-rp-state]"));

const panels = Array.from(root.querySelectorAll("[data-rp-panel][data-rp-state]"));

const listeners = [];

const activate = (state) => {

for (const item of items) {

const active = item.getAttribute("data-rp-state") === state;

item.setAttribute("data-rp-active", String(active));

item.setAttribute("aria-selected", String(active));

}

for (const panel of panels) {

const active = panel.getAttribute("data-rp-state") === state;

panel.hidden = !active;

panel.setAttribute("aria-hidden", String(!active));

}

root.dispatchEvent(new CustomEvent("rp:statechange", { detail: { state } }));

};

for (const item of items) {

const target = item.querySelector("[data-rp-activate]") || item;

listen(listeners, item, "click", () => activate(item.getAttribute("data-rp-state")));

}

const initial = items.find((item) => item.getAttribute("data-rp-active") === "true")?.getAttribute("data-rp-state") || items[0]?.getAttribute("data-rp-state");

if (initial) activate(initial);

markInitialized(root, "content-switcher");

return { activate, destroy: () => removeListeners(listeners) };

}

export function bindScrollScene(root, { phases = defaultScrollPhases() } = {}) {

requireRoot(root, "scroll-scene");

const ordered = normalizePhases(phases);

let frame = 0;

const update = () => {

frame = 0;

const rect = root.getBoundingClientRect();

const travel = Math.max(1, rect.height - window.innerHeight);

const progress = clamp((-rect.top) / travel, 0, 1);

const entryProgress = clamp((window.innerHeight - rect.top) / Math.max(1, window.innerHeight), 0, 1);

const phase = phaseForProgress(progress, ordered);

root.setAttribute("data-rp-phase", phase.name);

root.style.setProperty("--rp-scroll-progress", String(progress));

root.style.setProperty("--rp-entry-progress", String(entryProgress));

root.dispatchEvent(new CustomEvent("rp:scrollphase", { detail: { phase: phase.name, progress, entryProgress } }));

};

const onScroll = () => {

if (!frame) frame = requestAnimationFrame(update);

};

window.addEventListener("scroll", onScroll, { passive: true });

window.addEventListener("resize", onScroll);

update();

markInitialized(root, "scroll-scene");

return {

update,

destroy: () => {

window.removeEventListener("scroll", onScroll);

window.removeEventListener("resize", onScroll);

if (frame) cancelAnimationFrame(frame);

},

};

}

export function autoBindInteractions(scope = document) {

const roots = Array.from(scope.querySelectorAll("[data-rp-scene]"));

const bindings = [];

for (const root of roots) {

if (root.querySelector("[data-rp-track]") && !isInitialized(root, "active-card-rail")) {

bindings.push(bindActiveItemRail(root, {

activateOnHover: root.getAttribute("data-rp-activate-on-hover") === "true",

alignActive: root.getAttribute("data-rp-align-active") !== "false",

}));

}

if (root.querySelector("[data-rp-item][data-rp-state]") && root.querySelector("[data-rp-panel][data-rp-state]") && !isInitialized(root, "content-switcher")) {

bindings.push(bindContentSwitcher(root));

}

if (root.querySelector("[data-rp-visual]") && !isInitialized(root, "scroll-scene")) {

bindings.push(bindScrollScene(root));

}

return { bindings, destroy: () => bindings.forEach((binding) => binding?.destroy?.()) };

}

export function phaseForProgress(progress, phases = defaultScrollPhases()) {

const ordered = normalizePhases(phases);

const value = clamp(Number(progress) || 0, 0, 1);

return [...ordered].reverse().find((phase) => value >= phase.at) || ordered[0];

}

function defaultScrollPhases() {

return [

{ name: "approach", at: 0 },

{ name: "active", at: 0.25 },

{ name: "reveal", at: 0.65 },

{ name: "release", at: 0.92 },

];

}

function normalizePhases(phases) {

const normalized = (phases || []).map((phase, index) => ({

name: String(phase.name || phase.id || `phase-${index + 1}`),

at: clamp(Number(phase.at ?? phase.progress ?? 0), 0, 1),

})).sort((left, right) => left.at - right.at);

return normalized.length ? normalized : defaultScrollPhases();

}

function requireRoot(root, primitive) {

if (!root || typeof root.querySelectorAll !== "function") throw new Error(`Missing root element for ${primitive}.`);

}

function listen(listeners, target, type, handler) {

target.addEventListener(type, handler);

listeners.push([target, type, handler]);

}

function removeListeners(listeners) {

for (const [target, type, handler] of listeners) target.removeEventListener(type, handler);

}

function alignItemInViewport(item, viewport) {

if (!viewport || typeof viewport.scrollTo !== "function") return;

const viewportRect = viewport.getBoundingClientRect();

const itemRect = item.getBoundingClientRect();

const left = viewport.scrollLeft + itemRect.left - viewportRect.left - ((viewportRect.width - itemRect.width) / 2);

viewport.scrollTo({ left: Math.max(0, left), behavior: "smooth" });

}

function initializedTokens(root) {

return new Set(String(root.getAttribute("data-rp-initialized") || "").split(/\s+/).filter(Boolean));

}

function isInitialized(root, primitive) {

return initializedTokens(root).has(primitive);

}

function markInitialized(root, primitive) {

const tokens = initializedTokens(root);

tokens.add(primitive);

root.setAttribute("data-rp-initialized", Array.from(tokens).join(" "));

}

function wrapIndex(index, length) {

return length ? (index % length + length) % length : 0;

}

function clamp(value, minimum, maximum) {

return Math.min(maximum, Math.max(minimum, value));

}