dotfiles

 1document.querySelectorAll(".comments-collapsible").forEach((button) => {
 2  const content = document.getElementById(button.getAttribute("aria-controls"));
 3  const thread = content.querySelector(".comments-content");
 4  const loader = thread.querySelector("script[data-src]");
 5  const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
 6  let loaded = false;
 7  let open = false;
 8  let hideTimer;
 9
10  const resize = new ResizeObserver(() => {
11    if (open) content.style.maxHeight = `${thread.scrollHeight}px`;
12  });
13  resize.observe(thread);
14
15  button.addEventListener("click", () => {
16    open = !open;
17    clearTimeout(hideTimer);
18    button.setAttribute("aria-expanded", String(open));
19    button.classList.toggle("active", open);
20    button.textContent = open ? "Hide Comments" : "Show Comments";
21    content.inert = !open;
22
23    if (open) {
24      content.hidden = false;
25      void content.offsetHeight;
26      content.style.maxHeight = `${thread.scrollHeight}px`;
27    } else {
28      content.style.maxHeight = "0px";
29      if (reducedMotion.matches) content.hidden = true;
30      else
31        hideTimer = setTimeout(() => {
32          content.hidden = true;
33        }, 220);
34    }
35
36    if (!open || loaded) return;
37    loaded = true;
38    thread.querySelector('[role="status"]')?.remove();
39    if (thread.id === "disqus_thread") {
40      window.disqus_config = function () {
41        this.page.url = content.dataset.url;
42        this.page.identifier = content.dataset.url;
43      };
44    }
45    const script = document.createElement("script");
46    for (const attribute of loader.attributes) {
47      if (!["type", "data-src"].includes(attribute.name))
48        script.setAttribute(attribute.name, attribute.value);
49    }
50    script.src = loader.dataset.src;
51    script.async = true;
52    script.onerror = () => {
53      loaded = false;
54      script.remove();
55      const status = document.createElement("p");
56      status.setAttribute("role", "status");
57      status.textContent =
58        "Comments could not load. Close and reopen to retry.";
59      thread.append(status);
60    };
61    thread.append(script);
62  });
63});