convene-waitlist/script.js at main · u485349-coder/convene-waitlist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
const forms = document.querySelectorAll("[data-waitlist-form]");
const revealItems = document.querySelectorAll("[data-reveal]");
const showSuccessState =
  new URLSearchParams(window.location.search).get("submitted") === "1";

function getMessagePanel(form) {
  return document.querySelector(
    `[data-form-message-panel="${form.dataset.formMessage}"]`
  );
}

function showMessage(panel, message) {
  if (!panel) {
    return;
  }

  panel.textContent = message;
  panel.hidden = false;
}

function revealSuccessPanels() {
  document.querySelectorAll("[data-success-panel]").forEach((panel) => {
    panel.hidden = false;
  });
}

if (showSuccessState) {
  revealSuccessPanels();
}

forms.forEach((form) => {
  const panel = getMessagePanel(form);
  const submitButton = form.querySelector('button[type="submit"]');

  form.addEventListener("submit", (event) => {
    const action = (form.getAttribute("action") || "").trim();

    if (panel) {
      panel.hidden = true;
      panel.textContent = "";
    }

    if (!action || action.includes("ACTION_URL_HERE")) {
      event.preventDefault();
      showMessage(
        panel,
        "Add your real form endpoint in place of ACTION_URL_HERE before launching the waitlist."
      );
      return;
    }

    if (submitButton) {
      submitButton.disabled = true;
      submitButton.dataset.originalText = submitButton.textContent;
      submitButton.textContent = "Sending...";
    }
  });
});

window.addEventListener("pageshow", () => {
  forms.forEach((form) => {
    const submitButton = form.querySelector('button[type="submit"]');

    if (!submitButton || !submitButton.dataset.originalText) {
      return;
    }

    submitButton.disabled = false;
    submitButton.textContent = submitButton.dataset.originalText;
  });
});

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) {
          return;
        }

        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target);
      });
    },
    {
      threshold: 0.18,
      rootMargin: "0px 0px -40px 0px",
    }
  );

  revealItems.forEach((item) => observer.observe(item));
} else {
  revealItems.forEach((item) => item.classList.add("is-visible"));
}