muddle/modules/amezing/scripts/search-fuse.js

// Based on https://codeberg.org/daudix/duckquill/issues/101#issuecomment-2377169
let searchSetup = false;
let fuse;

async function initIndex() {
  if (searchSetup) return;

  let data;
  if (typeof window.searchIndex !== "undefined") {
    data = window.searchIndex;
  } else {
    const response = await fetch(
      `/search_index.${document.documentElement.lang}.json`,
    );
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    data = await response.json();
  }

  const options = {
    includeScore: false,
    includeMatches: true,
    ignoreLocation: true,
    threshold: 0.15,
    keys: [
      { name: "title", weight: 3 },
      { name: "description", weight: 2 },
      { name: "body", weight: 1 },
    ],
  };

  fuse = new Fuse(data, options);
  searchSetup = true;

  console.log("Search index initialized successfully");
}

function debounce(actual_fn, wait) {
  let timeoutId;

  return (...args) => {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      actual_fn(...args);
    }, wait);
  };
}

function initSearch() {
  const searchModal = document.getElementById("search-modal"); // Full-screen modal
  const searchModalContent = document.getElementById("search-modal-content"); // Actual modal box
  const searchInput = document.getElementById("search-input"); // Search input
  const searchResults = document.getElementById("search-results"); // Search results
  const searchButton = document.getElementById("search"); // Search button
  const MAX_ITEMS = 10;
  const MAX_RESULTS = 4;

  let currentTerm = "";

  // Open search modal when clicking the search button
  if (searchButton) {
    searchButton.addEventListener("click", function () {
      searchModal.classList.add("active");
      initIndex();
      searchModal.addEventListener(
        "transitionend",
        function handler() {
          searchInput.focus();
          searchModal.removeEventListener("transitionend", handler);
        },
        { once: true },
      );
    });
  }

  // Open search modal on "/" key press
  window.addEventListener("keydown", (event) => {
    if (
      event.key === "/" &&
      document.activeElement.tagName !== "INPUT" &&
      document.activeElement.tagName !== "TEXTAREA"
    ) {
      event.preventDefault();
      initIndex();
      searchModal.classList.add("active");
      searchModal.addEventListener(
        "transitionend",
        function handler() {
          searchInput.focus();
          searchModal.removeEventListener("transitionend", handler);
        },
        { once: true },
      );
    }
  });

  // Close search modal on Escape key
  window.addEventListener("keydown", (event) => {
    if (event.key === "Escape") {
      searchModal.classList.remove("active");
    }
  });

  // Close search modal when clicking outside search-modal-content
  searchModal.addEventListener("click", function (e) {
    if (!searchModalContent.contains(e.target)) {
      searchModal.classList.remove("active");
    }
  });

  // Prevent clicks inside modal content from closing it
  searchModalContent.addEventListener("click", function (e) {
    e.stopPropagation(); // Stops event from reaching searchModal click handler
  });

  // Search input event
  searchInput.addEventListener(
    "keyup",
    debounce(async function () {
      var term = searchInput.value.trim();
      if (term === currentTerm) return;

      searchResults.style.display = term === "" ? "none" : "flex";
      searchResults.innerHTML = ""; // Clear previous results
      currentTerm = term;
      if (term === "") return;

      await initIndex();
      var results = fuse.search(term, { limit: MAX_ITEMS });
      if (results.length === 0) {
        searchResults.style.display = "none";
        return;
      }

      // Insert formatted search result items
      for (const result of results) {
        searchResults.innerHTML += makeTeaser(result, term);
      }
    }, 150),
  );

  function makeTeaser(result, searchVal) {
    const TEASER_SIZE = 20;
    let output = `<div class="search-result item"><a class="result-title" href=${result.item.url}>${result.item.title}</a>`;

    for (const match of result.matches) {
      if (match.key === "title") continue;

      const indices = match.indices.sort((a, b) => Math.abs(a[1] - a[0] - searchVal.length) - Math.abs(b[1] - b[0] - searchVal.length)).slice(0, MAX_RESULTS);
      const value = match.value;

      for (const ind of indices) {
        const start = Math.max(0, ind[0] - TEASER_SIZE);
        const end = Math.min(value.length - 1, ind[1] + TEASER_SIZE);
        output += "<span>"
          + value.substring(start, ind[0])
          + `<strong>${value.substring(ind[0], ind[1] + 1)}</strong>`
          + value.substring(ind[1] + 1, end)
          + "</span>";
      }

      if (match.indices.length > MAX_RESULTS) {
        const moreMatchesText = document.getElementById("more-matches-text").textContent;
        output += `<span class="more-matches">${moreMatchesText}</span>`.replace("$MATCHES", `+${match.indices.length - MAX_RESULTS}`);
      }
    }
    return output + "</div>";
  }
}

if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  initSearch();
} else {
  document.addEventListener("DOMContentLoaded", initSearch);
}