chore: search cleanup

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.5.19",
+  "version": "1.5.20",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.5.19",
+      "version": "1.5.20",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.5.19",
+  "version": "1.5.20",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

src/assets/scripts/index.js

@@ -1,4 +1,96 @@
 window.addEventListener("load", () => {
+  // menu keyboard controls
+  (() => {
+    const menuInput = document.getElementById("menu-toggle");
+    const menuButtonContainer = document.querySelector(
+      ".menu-button-container"
+    );
+    const menuItems = document.querySelectorAll(".menu-primary li");
+
+    menuButtonContainer.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        menuInput.checked = !menuInput.checked;
+      }
+    });
+
+    menuItems.forEach((item) => {
+      item.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          item.querySelector("a").click();
+        }
+      });
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && menuInput.checked) menuInput.checked = false;
+    });
+  })();
+
+  // modal keyboard controls and scroll management
+  (() => {
+    const modalInputs = document.querySelectorAll(".modal-input");
+    if (!modalInputs) return;
+
+    const toggleBodyScroll = (disableScroll) => {
+      if (disableScroll) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+    };
+
+    const checkModals = () => {
+      let isAnyModalOpen = false;
+      modalInputs.forEach((modalInput) => {
+        if (modalInput.checked) isAnyModalOpen = true;
+      });
+      toggleBodyScroll(isAnyModalOpen);
+    };
+
+    modalInputs.forEach((modalInput) => {
+      modalInput.addEventListener("change", checkModals);
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        modalInputs.forEach((modalInput) => {
+          if (modalInput.checked) modalInput.checked = false;
+        });
+        toggleBodyScroll(false);
+      }
+    });
+
+    checkModals();
+  })();
+
+  // text toggle for media pages
+  (() => {
+    const button = document.querySelector("[data-toggle-button]");
+    const content = document.querySelector("[data-toggle-content]");
+    const text = document.querySelectorAll("[data-toggle-content] p");
+    const minHeight = 500; // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
+    const interiorHeight = Array.from(text).reduce(
+      (acc, node) => acc + node.scrollHeight,
+      0
+    );
+
+    if (!button || !content || !text) return;
+
+    if (interiorHeight < minHeight) {
+      content.classList.remove("text-toggle-hidden");
+      button.style.display = "none";
+      return;
+    }
+
+    button.addEventListener("click", () => {
+      const isHidden = content.classList.toggle("text-toggle-hidden");
+      button.textContent = isHidden ? "Show more" : "Show less";
+    });
+  })();
+
+  // search logic
   (() => {
     if (typeof MiniSearch === "undefined") return;
 
@@ -39,6 +131,7 @@ window.addEventListener("load", () => {
     let currentPage = 1;
     let currentResults = [];
     let total = 0;
+    let debounceTimeout; // Declare debounceTimeout here
 
     const parseMarkdown = (markdown) =>
       markdown
@@ -68,17 +161,17 @@ window.addEventListener("load", () => {
       const resultHTML = results
         .map(
           ({ title, url, description, type, total_plays }) => `
-        <li class="search__results--result">
+          <li class="search__results--result">
-          <a href="${url}">
+            <a href="${url}">
-            <h3>${
+              <h3>${
-              type === "artist" && total_plays
+                type === "artist" && total_plays
-                ? formatArtistTitle(title, total_plays)
+                  ? formatArtistTitle(title, total_plays)
-                : title
+                  : title
-            }</h3>
+              }</h3>
-          </a>
+            </a>
-          <p>${truncateDescription(description)}</p>
+            <p>${truncateDescription(description)}</p>
-        </li>
+          </li>
-      `
+        `
         )
         .join("");
 
@@ -129,17 +222,17 @@ window.addEventListener("load", () => {
       const newResultsHTML = results
         .map(
           ({ title, url, description, type, total_plays }) => `
-        <li class="search__results--result">
+          <li class="search__results--result">
-          <a href="${url}">
+            <a href="${url}">
-            <h3>${
+              <h3>${
-              type === "artist" && total_plays
+                type === "artist" && total_plays
-                ? formatArtistTitle(title, total_plays)
+                  ? formatArtistTitle(title, total_plays)
-                : title
+                  : title
-            }</h3>
+              }</h3>
-          </a>
+            </a>
-          <p>${truncateDescription(description)}</p>
+            <p>${truncateDescription(description)}</p>
-        </li>
+          </li>
-      `
+        `
         )
         .join("");
       $results.insertAdjacentHTML("beforeend", newResultsHTML);