https://www.portifylead.com/assets/js/demo.js?v=69c95d4783

1// The hero demo. Self-running, as §9 asks; a click on a step jumps there and
2// holds before the loop resumes; hovering or focusing the mockup pauses it.
3//
4// All the visual state is CSS keyed off data-step on #demo — this file only
5// decides which step is current and when. With JavaScript unavailable the
6// markup's data-step="1" is a complete, static step one.
7(() => {
8  // Found by class, not by id. The id is the section anchor and §9 has already
9  // renamed it once — from #demo to #how-it-works — which silently froze this
10  // script on step one, because a getElementById that matches nothing returns
11  // early and looks exactly like a page with no demo on it. The class is what
12  // the styling keys off, so it cannot drift from the markup unnoticed.
13  const mock = document.querySelector(".mock");
14  if (!mock) return;
15
16  const steps = [...mock.querySelectorAll("[data-step-to]")];
17  const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
18  const DWELL = 3400; // per step, on the loop
19  const HOLD = 7000;  // after a click, before the loop resumes
20
21  let current = 1;
22  let timer = null;
23  let paused = false;
24
25  function show(n) {
26    current = n;
27    mock.dataset.step = String(n);
28    for (const b of steps) b.setAttribute("aria-current", Number(b.dataset.stepTo) === n ? "step" : "false");
29  }
30
31  function schedule(delay) {
32    clearTimeout(timer);
33    // A reader who asked for reduced motion still gets the steps, by clicking.
34    if (reduced) return;
35    timer = setTimeout(() => {
36      if (!paused) show((current % 3) + 1);
37      schedule(DWELL);
38    }, delay);
39  }
40
41  for (const b of steps) {
42    b.addEventListener("click", () => {
43      show(Number(b.dataset.stepTo));
44      schedule(HOLD);
45    });
46  }
47
48  mock.addEventListener("mouseenter", () => { paused = true; });
49  mock.addEventListener("mouseleave", () => { paused = false; });
50  mock.addEventListener("focusin", () => { paused = true; });
51  mock.addEventListener("focusout", () => { paused = false; });
52
53  // "See it in action" scrolls here and runs the demo from the top.
54  for (const a of document.querySelectorAll("[data-demo-restart]")) {
55    a.addEventListener("click", () => { show(1); schedule(DWELL); });
56  }
57
58  show(1);
59  schedule(DWELL);
60})();