calminer/static/js/settings.js

(function () {
  const dataScript = document.getElementById("theme-settings-data");
  const form = document.getElementById("theme-settings-form");
  const feedbackEl = document.getElementById("theme-settings-feedback");
  const resetBtn = document.getElementById("theme-settings-reset");
  const panel = document.getElementById("theme-settings");

  if (!dataScript || !form || !feedbackEl || !panel) {
    return;
  }

  const apiUrl = panel.getAttribute("data-api");
  if (!apiUrl) {
    return;
  }

  const parsed = JSON.parse(dataScript.textContent || "{}");
  const currentValues = { ...(parsed.variables || {}) };
  const defaultValues = parsed.defaults || {};
  let envOverrides = { ...(parsed.envOverrides || {}) };

  const previewElements = new Map();
  const inputs = Array.from(form.querySelectorAll(".color-value-input"));

  inputs.forEach((input) => {
    const key = input.name;
    const field = input.closest(".color-form-field");
    const preview = field ? field.querySelector(".color-preview") : null;
    if (preview) {
      previewElements.set(input, preview);
    }

    if (Object.prototype.hasOwnProperty.call(envOverrides, key)) {
      const overrideValue = envOverrides[key];
      input.value = overrideValue;
      input.disabled = true;
      input.setAttribute("aria-disabled", "true");
      input.dataset.envOverride = "true";
      if (field) {
        field.classList.add("is-env-override");
      }
      if (preview) {
        preview.style.background = overrideValue;
      }
      return;
    }

    input.addEventListener("input", () => {
      const previewEl = previewElements.get(input);
      if (previewEl) {
        previewEl.style.background = input.value || defaultValues[key] || "";
      }
    });
  });

  function setFeedback(message, type) {
    feedbackEl.textContent = message;
    feedbackEl.classList.remove("hidden", "success", "error");
    if (type) {
      feedbackEl.classList.add(type);
    }
  }

  function clearFeedback() {
    feedbackEl.textContent = "";
    feedbackEl.classList.add("hidden");
    feedbackEl.classList.remove("success", "error");
  }

  function updateRootVariables(values) {
    if (!values) {
      return;
    }
    const root = document.documentElement;
    Object.entries(values).forEach(([key, value]) => {
      if (typeof key === "string" && typeof value === "string") {
        root.style.setProperty(key, value);
      }
    });
  }

  function resetTo(source) {
    inputs.forEach((input) => {
      const key = input.name;
      if (input.disabled) {
        const previewEl = previewElements.get(input);
        const fallback = envOverrides[key] || currentValues[key];
        if (previewEl && fallback) {
          previewEl.style.background = fallback;
        }
        return;
      }
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        input.value = source[key];
        const previewEl = previewElements.get(input);
        if (previewEl) {
          previewEl.style.background = source[key];
        }
      }
    });
  }

  // Initialize previews to current values after page load.
  resetTo(currentValues);

  resetBtn?.addEventListener("click", () => {
    resetTo(defaultValues);
    clearFeedback();
    setFeedback("Reverted to default values. Submit to save.", "success");
  });

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    clearFeedback();

    const payload = {};
    inputs.forEach((input) => {
      if (input.disabled) {
        return;
      }
      payload[input.name] = input.value.trim();
    });

    try {
      const response = await fetch(apiUrl, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ variables: payload }),
      });

      if (!response.ok) {
        let detail = "Unable to save theme settings.";
        try {
          const errorData = await response.json();
          if (errorData?.detail) {
            detail = Array.isArray(errorData.detail)
              ? errorData.detail.map((item) => item.msg || item).join("; ")
              : errorData.detail;
          }
        } catch (parseError) {
          // Ignore JSON parse errors and use default detail message.
        }
        setFeedback(detail, "error");
        return;
      }

      const data = await response.json();
      const variables = data?.variables || {};
      const responseOverrides = data?.env_overrides || {};

      Object.assign(currentValues, variables);
      envOverrides = { ...responseOverrides };

      inputs.forEach((input) => {
        const key = input.name;
        const field = input.closest(".color-form-field");
        const previewEl = previewElements.get(input);
        const isOverride = Object.prototype.hasOwnProperty.call(
          envOverrides,
          key,
        );

        if (isOverride) {
          const overrideValue = envOverrides[key];
          input.value = overrideValue;
          if (!input.disabled) {
            input.disabled = true;
            input.setAttribute("aria-disabled", "true");
          }
          if (field) {
            field.classList.add("is-env-override");
          }
          if (previewEl) {
            previewEl.style.background = overrideValue;
          }
        } else if (input.disabled) {
          input.disabled = false;
          input.removeAttribute("aria-disabled");
          if (field) {
            field.classList.remove("is-env-override");
          }
          if (
            previewEl &&
            Object.prototype.hasOwnProperty.call(variables, key)
          ) {
            previewEl.style.background = variables[key];
          }
        }
      });

      updateRootVariables(variables);
      resetTo(variables);
      setFeedback("Theme colors updated successfully.", "success");
    } catch (error) {
      setFeedback("Network error: unable to save settings.", "error");
    }
  });
})();