gg-wf-scripts 2.5.0 → 3.0.0

package/src/bridges.js

@@ -1,31 +0,0 @@
-import { setSwitchState } from "./helpers/dom.js";
-import { onQueryChanged } from "./query-params.js";
-
-export function initBridges() {
-  // ---- gg-switch-query: URL params → gg-switch-state ----
-  // On any URL param change, mirror its value onto matching
-  // [gg-switch-query="<key>"] elements' gg-switch-state.
-  onQueryChanged((key, value) => {
-    document
-      .querySelectorAll(`[gg-switch-query="${CSS.escape(key)}"]`)
-      .forEach((el) => setSwitchState(el, value));
-  });
-
-  // Initial-load pass: read current URL params and set state for every
-  // [gg-switch-query] on the page, so we don't flash before the first change.
-  const params = new URLSearchParams(window.location.search);
-  document.querySelectorAll("[gg-switch-query]").forEach((el) => {
-    const key = el.getAttribute("gg-switch-query");
-    setSwitchState(el, params.get(key));
-  });
-
-  // ---- webflow:emit → Webflow IX ----
-  window.addEventListener("load", () => {
-    Webflow.push(() => {
-      const wfIx = Webflow.require("ix3");
-      document.addEventListener("webflow:emit", (e) => {
-        wfIx.emit(e.detail.event);
-      });
-    });
-  });
-}

package/src/data-engine.js

@@ -1,165 +0,0 @@
-import { getPath } from "./helpers/path.js";
-import {
-  populateFields,
-  setSwitchState,
-  applySwitchState,
-} from "./helpers/dom.js";
-import { withDebugLog } from "./helpers/log.js";
-import { queryRegistry } from "./queries.js";
-import { onQueryChanged, getParams } from "./query-params.js";
-
-function applySwitchFields(root, record) {
-  root.querySelectorAll("[gg-switch-field]").forEach((el) => {
-    const path = el.getAttribute("gg-switch-field");
-    const value = getPath(record, path);
-    setSwitchState(el, value);
-    applySwitchState(el);
-  });
-}
-
-function queryDeep(root, selector) {
-  const results = [...root.querySelectorAll(selector)];
-  root.querySelectorAll("*").forEach((el) => {
-    if (el.shadowRoot) results.push(...queryDeep(el.shadowRoot, selector));
-  });
-  return results;
-}
-
-function applyDataValues(root, record) {
-  queryDeep(root, "[gg-data-key]").forEach((el) => {
-    const path = el.getAttribute("gg-data-key");
-    const value = path ? getPath(record, path) : record;
-    if (value === undefined) return;
-    el.setAttribute("gg-data-value", JSON.stringify(value));
-  });
-}
-
-function populateFormFields(root, record) {
-  root.querySelectorAll(
-    "input[name], select[name], textarea[name]",
-  ).forEach((el) => {
-    const name = el.getAttribute("name");
-    const value = getPath(record, name);
-    if (value == null) return;
-
-    if (el instanceof HTMLInputElement) {
-      if (el.type === "checkbox") {
-        el.checked = Boolean(value);
-      } else if (el.type === "radio") {
-        el.checked = String(el.value) === String(value);
-      } else {
-        el.value = String(value);
-      }
-    } else {
-      el.value = String(value);
-    }
-
-    el.dispatchEvent(new Event("input", { bubbles: true }));
-    el.dispatchEvent(new Event("change", { bubbles: true }));
-  });
-}
-
-export function initDataEngine(context, { debug = false } = {}) {
-  async function runQuery(container) {
-    const isList = container.hasAttribute("gg-data-list");
-    const isForm = container.hasAttribute("gg-data-form");
-    const id = container.getAttribute(
-      isList ? "gg-data-list" : isForm ? "gg-data-form" : "gg-data",
-    );
-    const query = queryRegistry[id];
-    if (!query) {
-      console.warn(`[gg-data] no query registered for "${id}"`);
-      return;
-    }
-
-    const params = getParams();
-    const result = await withDebugLog(
-      "[gg-data]",
-      id,
-      { container, params: Object.fromEntries(params) },
-      debug,
-      () => query(context, params),
-    );
-    if (result === undefined) return;
-
-    if (isList) {
-      if (!Array.isArray(result)) {
-        console.warn(
-          `[gg-data-list] query "${id}" did not return an array`,
-        );
-        return;
-      }
-
-      const template = container.querySelector("[gg-list-template]");
-      if (!template) {
-        console.warn(
-          `[gg-data-list] no [gg-list-template] inside "${id}"`,
-        );
-        return;
-      }
-
-      Array.from(container.children).forEach((child) => {
-        if (child !== template) child.remove();
-      });
-
-      result.forEach((record) => {
-        const clone = template.cloneNode(true);
-        clone.removeAttribute("gg-list-template");
-        clone.setAttribute(
-          "gg-query-set",
-          `modal:view,id:${record.id}`,
-        );
-        clone.style.display = "flex";
-        if (record?.id != null) clone.id = String(record.id);
-        clone.__ggRecord = record;
-        populateFields(clone, record);
-        applySwitchFields(clone, record);
-        applyDataValues(clone, record);
-        container.appendChild(clone);
-      });
-    } else if (isForm) {
-      if (Array.isArray(result)) {
-        console.warn(
-          `[gg-data-form] query "${id}" returned an array; expected a single record`,
-        );
-        return;
-      }
-      if (!result) return;
-      container.__ggRecord = result;
-      populateFormFields(container, result);
-      applyDataValues(container, result);
-    } else {
-      if (Array.isArray(result)) {
-        console.warn(
-          `[gg-data] query "${id}" returned an array; use gg-data-list instead`,
-        );
-        return;
-      }
-      if (!result) return;
-      container.__ggRecord = result;
-      populateFields(container, result);
-      applySwitchFields(container, result);
-      applyDataValues(container, result);
-    }
-  }
-
-  // Run all data containers on load
-  document
-    .querySelectorAll("[gg-data], [gg-data-list], [gg-data-form]")
-    .forEach(runQuery);
-
-  // Re-run queries when matching URL params change
-  onQueryChanged((key) => {
-    document
-      .querySelectorAll(
-        "[gg-data][gg-data-on], [gg-data-list][gg-data-on], [gg-data-form][gg-data-on]",
-      )
-      .forEach((c) => {
-        const keys = c
-          .getAttribute("gg-data-on")
-          .split(",")
-          .map((s) => s.trim());
-        if (keys.includes(key)) runQuery(c);
-      });
-  });
-}

package/src/dialog.js

@@ -1,86 +0,0 @@
-import { removeQueryParams, onQueryChanged } from "./query-params.js";
-
-function stopLenis() {
-  if (typeof lenis !== "undefined") lenis.stop();
-}
-
-function startLenis() {
-  if (typeof lenis !== "undefined") lenis.start();
-}
-
-function openDialog() {
-  const dialog = document.querySelector("dialog");
-  if (!dialog) return;
-  dialog.removeAttribute("aria-hidden");
-  dialog.removeAttribute("inert");
-  dialog.showModal();
-  stopLenis();
-}
-
-function closeDialog() {
-  const dialog = document.querySelector("dialog");
-  if (!dialog) return;
-  dialog.setAttribute("aria-hidden", "true");
-  dialog.setAttribute("inert", "");
-  dialog.close();
-  startLenis();
-}
-
-function dismissViaUrlOrDirect() {
-  const modalParam = new URLSearchParams(window.location.search).get("modal");
-  if (modalParam) {
-    removeQueryParams(["modal", "id"]);
-  } else {
-    closeDialog();
-  }
-}
-
-function syncDialogToUrl() {
-  const modalParam = new URLSearchParams(window.location.search).get("modal");
-  if (modalParam) {
-    openDialog();
-  } else {
-    closeDialog();
-  }
-}
-
-export function initDialog() {
-  // Subscribe to query param changes — open/close when "modal" changes
-  onQueryChanged((key, value) => {
-    if (key !== "modal") return;
-    if (value) {
-      openDialog();
-    } else {
-      closeDialog();
-    }
-  });
-
-  // Inbound events from external code
-  document.addEventListener("gg:dialog:open", openDialog);
-  document.addEventListener("gg:dialog:close", closeDialog);
-
-  // Backdrop click
-  document.addEventListener("click", (e) => {
-    if (!e.target.matches("dialog[open]")) return;
-    const rect = e.target.getBoundingClientRect();
-    const outside =
-      e.clientX < rect.left ||
-      e.clientX > rect.right ||
-      e.clientY < rect.top ||
-      e.clientY > rect.bottom;
-    if (outside) dismissViaUrlOrDirect();
-  });
-
-  // Escape key — preempt the default close so the URL stays source of truth
-  document.addEventListener("cancel", (e) => {
-    if (!e.target.matches("dialog")) return;
-    e.preventDefault();
-    dismissViaUrlOrDirect();
-  });
-
-  // Back button
-  window.addEventListener("popstate", syncDialogToUrl);
-
-  // Initial load
-  syncDialogToUrl();
-}

package/src/form-action-engine.js

@@ -1,149 +0,0 @@
-import { formActionRegistry } from "./form-actions.js";
-import { populateFields } from "./helpers/dom.js";
-import { withDebugLog } from "./helpers/log.js";
-import { getParams } from "./query-params.js";
-
-function findInputs(form, name) {
-  const escaped = CSS.escape(name);
-  return form.querySelectorAll(
-    `input[name="${escaped}"], select[name="${escaped}"], textarea[name="${escaped}"]`,
-  );
-}
-
-function clearFieldError(form, name) {
-  findInputs(form, name).forEach((el) => {
-    el.removeAttribute("gg-form-field-invalid");
-  });
-  const escaped = CSS.escape(name);
-  form
-    .querySelectorAll(`[gg-form-field-error="${escaped}"]`)
-    .forEach((el) => {
-      el.textContent = "";
-    });
-}
-
-function clearFormErrors(form) {
-  form.querySelectorAll("[gg-form-field-invalid]").forEach((el) => {
-    el.removeAttribute("gg-form-field-invalid");
-  });
-  form.querySelectorAll("[gg-form-field-error]").forEach((el) => {
-    el.textContent = "";
-  });
-  form.querySelectorAll("[gg-form-error]").forEach((el) => {
-    el.textContent = "";
-  });
-  form.querySelectorAll("[gg-form-error-list]").forEach((list) => {
-    const template = list.querySelector("[gg-list-template]");
-    Array.from(list.children).forEach((child) => {
-      if (child !== template) child.remove();
-    });
-  });
-}
-
-function applyFieldErrors(form, fieldErrors) {
-  fieldErrors.forEach(({ name, message }) => {
-    if (!name) return;
-    findInputs(form, name).forEach((el) => {
-      el.setAttribute("gg-form-field-invalid", "true");
-    });
-    const escaped = CSS.escape(name);
-    form
-      .querySelectorAll(`[gg-form-field-error="${escaped}"]`)
-      .forEach((el) => {
-        el.textContent = message ?? "";
-      });
-  });
-}
-
-function applyErrorList(form, fieldErrors) {
-  form.querySelectorAll("[gg-form-error-list]").forEach((list) => {
-    const template = list.querySelector("[gg-list-template]");
-    if (!template) {
-      console.warn(
-        "[gg-form-error-list] no [gg-list-template] inside list:",
-        list,
-      );
-      return;
-    }
-    fieldErrors.forEach((record) => {
-      const clone = template.cloneNode(true);
-      clone.removeAttribute("gg-list-template");
-      clone.style.display = "";
-      populateFields(clone, record);
-      list.appendChild(clone);
-    });
-  });
-}
-
-function applyFormError(form, error) {
-  if (error == null) return;
-  const message = typeof error === "string" ? error : String(error);
-  form.querySelectorAll("[gg-form-error]").forEach((el) => {
-    el.textContent = message;
-  });
-}
-
-function bindFieldClearOnInput(form) {
-  if (form.__ggFormErrorBound) return;
-  form.__ggFormErrorBound = true;
-  form.addEventListener("input", (e) => {
-    const name = e.target?.getAttribute?.("name");
-    if (!name) return;
-    if (e.target.hasAttribute("gg-form-field-invalid")) {
-      clearFieldError(form, name);
-    }
-  });
-}
-
-export function initFormActionEngine(context, { debug = false } = {}) {
-  async function handleSubmit(form, event) {
-    const id = form.getAttribute("gg-form-action");
-    const action = formActionRegistry[id];
-    if (!action) {
-      console.warn(`[gg-form-action] no form action registered for "${id}"`);
-      return;
-    }
-
-    event.preventDefault();
-    clearFormErrors(form);
-
-    const formData = new FormData(form);
-    const params = getParams();
-
-    const result = await withDebugLog(
-      "[gg-form-action]",
-      id,
-      {
-        form,
-        formData: Object.fromEntries(formData),
-        params: Object.fromEntries(params),
-      },
-      debug,
-      () => action(context, formData, params),
-    );
-
-    if (result?.ok === false) {
-      const fieldErrors = Array.isArray(result.field_errors)
-        ? result.field_errors
-        : [];
-      applyFieldErrors(form, fieldErrors);
-      applyErrorList(form, fieldErrors);
-      applyFormError(form, result.error);
-      if (!fieldErrors.length && result.error == null) {
-        console.warn(
-          `[gg-form-action] "${id}" returned ok:false with no error or field_errors`,
-        );
-      }
-    }
-  }
-
-  document.querySelectorAll("form[gg-form-action]").forEach(bindFieldClearOnInput);
-
-  document.addEventListener("submit", (e) => {
-    const form = e.target;
-    if (form?.tagName === "FORM" && form.hasAttribute("gg-form-action")) {
-      bindFieldClearOnInput(form);
-      handleSubmit(form, e);
-    }
-  });
-}

package/src/form-actions.js

@@ -1,21 +0,0 @@
-export const formActionRegistry = {};
-
-/**
- * Register a form action triggered by submitting a form with gg-form-action="<id>".
- *
- * @param {string} id - The form action identifier, referenced by gg-form-action="<id>" on a form.
- * @param {(context: object, formData: FormData, params: URLSearchParams) => Promise<{
- *   ok: boolean,
- *   error?: any,
- *   field_errors?: Array<{ name: string, message: string }>,
- * }>} fn
- *   Receives the context object passed to init(), a FormData snapshot of the submitted form,
- *   and a URLSearchParams snapshot of the current URL query string. Return:
- *   - { ok: true } on success
- *   - { ok: false, field_errors: [{ name, message }, ...] } for validation errors
- *   - { ok: false, error: "..." } for a single form-level error
- *   - Both field_errors and error may be present together.
- */
-export function registerFormAction(id, fn) {
-  formActionRegistry[id] = fn;
-}

package/src/form-visibility.js

@@ -1,122 +0,0 @@
-const TRANSITION_MS = 200;
-
-function parseConditions(attr) {
-  return attr
-    .split(",")
-    .map((pair) => {
-      const [name, value] = pair.split(":");
-      return { name: name?.trim(), value: value?.trim() };
-    })
-    .filter((p) => p.name && p.value);
-}
-
-function getFieldValue(scope, name) {
-  const escaped = CSS.escape(name);
-  const inputs = scope.querySelectorAll(
-    `input[name="${escaped}"], select[name="${escaped}"], textarea[name="${escaped}"]`,
-  );
-  if (!inputs.length) return null;
-
-  const type = (inputs[0].getAttribute("type") || "").toLowerCase();
-  if (type === "radio" || type === "checkbox") {
-    for (const input of inputs) {
-      if (input.checked) return input.value;
-    }
-    return null;
-  }
-  return inputs[0].value.trim();
-}
-
-function matchesAny(scope, conditions) {
-  return conditions.some(
-    ({ name, value }) => getFieldValue(scope, name) === value,
-  );
-}
-
-export function initFormVisibility() {
-  // Group all [gg-visible-when] elements by their nearest scope —
-  // either an explicit [gg-form-scope] or a <form>.
-  const scopeTargets = new Map();
-  document.querySelectorAll("[gg-visible-when]").forEach((el) => {
-    if (!Boolean(el.getAttribute("gg-visible-when"))) {
-      return;
-    }
-    const scope = el.closest("[gg-form-scope], form");
-    if (!scope) {
-      console.warn(
-        "[gg-visible-when] element is not inside a <form> or [gg-form-scope]:",
-        el,
-      );
-      return;
-    }
-    if (!scopeTargets.has(scope)) scopeTargets.set(scope, []);
-    scopeTargets.get(scope).push(el);
-  });
-
-  scopeTargets.forEach((targets, scope) => {
-    const conditions = new WeakMap();
-    const lastState = new WeakMap();
-    const hideTimers = new WeakMap();
-
-    targets.forEach((el) => {
-      conditions.set(
-        el,
-        parseConditions(el.getAttribute("gg-visible-when")),
-      );
-      el.style.transition = "none";
-      el.style.opacity = "0";
-      el.style.display = "none";
-      el.style.pointerEvents = "none";
-      el.setAttribute("inert", "");
-      el.setAttribute("aria-hidden", "true");
-      lastState.set(el, false);
-    });
-
-    function show(el) {
-      const pending = hideTimers.get(el);
-      if (pending) {
-        clearTimeout(pending);
-        hideTimers.delete(el);
-      }
-      el.removeAttribute("inert");
-      el.removeAttribute("aria-hidden");
-      el.style.display = "";
-      el.style.pointerEvents = "";
-      requestAnimationFrame(() => {
-        el.style.opacity = "1";
-      });
-    }
-
-    function hide(el) {
-      el.style.opacity = "0";
-      el.style.pointerEvents = "none";
-      el.setAttribute("inert", "");
-      el.setAttribute("aria-hidden", "true");
-      const t = setTimeout(() => {
-        el.style.display = "none";
-        hideTimers.delete(el);
-      }, TRANSITION_MS);
-      hideTimers.set(el, t);
-    }
-
-    function evaluate() {
-      targets.forEach((el) => {
-        const shouldShow = matchesAny(scope, conditions.get(el));
-        if (shouldShow === lastState.get(el)) return;
-        lastState.set(el, shouldShow);
-        if (shouldShow) show(el);
-        else hide(el);
-      });
-    }
-
-    requestAnimationFrame(() => {
-      targets.forEach((el) => {
-        el.style.transition = `opacity ${TRANSITION_MS}ms ease`;
-      });
-      evaluate();
-    });
-
-    scope.addEventListener("change", evaluate);
-    scope.addEventListener("input", evaluate);
-  });
-}

package/src/helpers/dom.js

@@ -1,35 +0,0 @@
-import { getPath } from "./path.js";
-
-/**
- * Set textContent on every [gg-field] descendant of `root` to the value
- * at that field's dot-path on `record`. Null / missing values are left
- * as-is (keeps whatever the markup's default content was).
- */
-export function populateFields(root, record) {
-  root.querySelectorAll("[gg-field]").forEach((el) => {
-    const path = el.getAttribute("gg-field");
-    const value = getPath(record, path);
-    if (value != null) el.textContent = String(value);
-  });
-}
-
-/**
- * Write a normalized switch state onto an element.
- * null / undefined become "" so gg-case="" can serve as the empty/default.
- */
-export function setSwitchState(el, value) {
-  el.setAttribute("gg-switch-state", value == null ? "" : String(value));
-}
-
-/**
- * Show the [gg-case] child whose value matches the container's current
- * gg-switch-state; hide the rest with display:none.
- */
-export function applySwitchState(container) {
-  const state = container.getAttribute("gg-switch-state") ?? "";
-  Array.from(container.children).forEach((child) => {
-    if (!child.hasAttribute("gg-case")) return;
-    const match = child.getAttribute("gg-case") === state;
-    child.style.display = match ? "" : "none";
-  });
-}

package/src/helpers/log.js

@@ -1,34 +0,0 @@
-/**
- * Wrap an async handler with optional debug logging and uniform throw handling.
- *
- * On success, returns the handler's resolved value. On throw, logs the error and
- * returns `undefined` so callers can branch on it.
- *
- * @param {string} prefix - Log prefix, e.g. "[gg-action]".
- * @param {string} id - Handler identifier shown in the log group.
- * @param {Record<string, any>} fields - Key/value pairs logged when debug is on.
- * @param {boolean} debug - Whether to emit grouped debug logs.
- * @param {() => Promise<any>} run - The handler invocation.
- */
-export async function withDebugLog(prefix, id, fields, debug, run) {
-  if (debug) {
-    console.groupCollapsed(`${prefix} "${id}"`);
-    for (const [key, value] of Object.entries(fields)) {
-      console.log(`${key}:`, value);
-    }
-  }
-  const startedAt = debug ? performance.now() : 0;
-  try {
-    const result = await run();
-    if (debug) {
-      const ms = (performance.now() - startedAt).toFixed(1);
-      console.log(`result (${ms}ms):`, result);
-    }
-    return result;
-  } catch (err) {
-    console.error(`${prefix} "${id}" threw:`, err);
-    return undefined;
-  } finally {
-    if (debug) console.groupEnd();
-  }
-}

package/src/helpers/path.js

@@ -1,4 +0,0 @@
-/** Resolve a dot-path on an object, e.g. getPath(row, "school.name"). */
-export function getPath(obj, path) {
-  return path.split(".").reduce((acc, key) => acc?.[key], obj);
-}