Function setupTimelineSlider

assets/main.js:934–1043

(timelineSnapshots, options = {})

}

function setupTimelineSlider(timelineSnapshots, options = {}) {
  const overlay = document.getElementById("timelineOverlay");
  const slider = document.getElementById("timelineSlider");
  const summary = document.getElementById("timelineSummary");
  const label = document.getElementById("timelineLabel");
  const metricsElement = document.getElementById("timelineMetrics");

  if (
    !overlay ||
    !slider ||
    !summary ||
    !label ||
    !metricsElement ||
    !Array.isArray(timelineSnapshots) ||
    timelineSnapshots.length === 0
  ) {
    overlay?.classList.add("hidden");
    if (slider) {
      slider.disabled = true;
      slider.value = "0";
    }
    if (summary) summary.textContent = "";
    if (label) label.textContent = "";
    if (metricsElement) metricsElement.textContent = "";
    return null;
  }

  overlay.classList.remove("hidden");
  slider.min = "0";
  slider.max = String(Math.max(timelineSnapshots.length - 1, 0));
  slider.step = "1";
  slider.disabled = timelineSnapshots.length <= 1;

  const state = {
    activeIndex: null,
    loading: false,
  };

  const setLoading = (value) => {
    state.loading = Boolean(value);
    if (state.loading) {
      slider.disabled = true;
      overlay.classList.add("timeline-overlay--loading");
    } else {
      slider.disabled = timelineSnapshots.length <= 1;
      overlay.classList.remove("timeline-overlay--loading");
    }
  };

  const applySnapshotChange = async (snapshot, safeIndex) => {
    if (typeof options.onSnapshotChange !== "function") return;
    setLoading(true);
    try {
      await options.onSnapshotChange(snapshot, safeIndex);
    } finally {
      setLoading(false);
    }
  };