Handle URL params in search

bartlomieju · Oct 27, 2023 · 5bc9bb4 · 5bc9bb4
1 parent 7da7aeb
commit 5bc9bb4
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 45 deletions.
diff --git a/src/html/mod.rs b/src/html/mod.rs
@@ -318,6 +318,8 @@ struct SearchIndexNode {
   name: String,
   #[serde(skip_serializing_if = "Vec::is_empty")]
   ns_qualifiers: Vec<String>,
+  // TODO(bartlomieju): location should be processed based on the entry point of
+  // the graph to node include `file:///base/dir/other/dir/`.
   location: Location,
   declaration_kind: crate::node::DeclarationKind,
 }

diff --git a/src/html/search.js b/src/html/search.js
@@ -6,20 +6,59 @@ searchInput.removeAttribute("style");
 
 const SEARCH_INDEX = window.DENO_DOC_SEARCH_INDEX;
 
+const loadedUrl = new URL(window.location.href);
+const val = loadedUrl.searchParams.get("q");
+if (val) {
+  searchInput.value = val;
+  doSearch(val);
+}
+
+function debounce(func, delay) {
+  let timerId;
+
+  return function () {
+    const context = this;
+    const args = arguments;
+
+    clearTimeout(timerId);
+
+    timerId = setTimeout(function () {
+      func.apply(context, args);
+    }, delay);
+  };
+}
+
+const debouncedSearch = debounce(doSearch, 250);
+
 searchInput.addEventListener("input", (e) => {
-    const val = e.target.value;
-    console.log("Search event.target.value", val);
-
-    if (!val) {
-        showPage();
-    } else {
-        const results = searchInIndex(val);
-        console.log("results", results);
-        renderResults(results);
-        showSearchResults();
-    }
+  const val = e.target.value;
+  debouncedSearch(val);
 });
 
+function doSearch(val) {
+  console.log("Search event.target.value", val);
+
+  if (!val) {
+    showPage();
+  } else {
+    const results = searchInIndex(val);
+    updateCurrentLocation(val);
+    console.log("results", results);
+    renderResults(results);
+    showSearchResults();
+  }
+}
+
+function updateCurrentLocation(val) {
+  const url = new URL(window.location.href);
+  if (val) {
+    url.searchParams.set("q", val);
+  } else {
+    url.searchParams.delete("q");
+  }
+  window.history.replaceState({}, "", url.href);
+}
+
 function showPage() {
   for (const mainTag of mainContentTags) {
     mainTag.style.display = "block";
@@ -35,54 +74,64 @@ function showSearchResults() {
 }
 
 function renderResults(results) {
-    let html = `<ul>`;
-
-    for (const result of results) {
-        console.log("result", result);
-        const [rustKind, title, symbol] = docNodeKindToStringVariants(result.kind);
-        const label = result.nsQualifiers
-            ? `${result.nsQualifiers.join(".")}.${result.name}`
-            : result.name;
-        html += `<li><a href="${result.name.split(".").join("/")}.html"><div class="symbol_kind kind_${rustKind}_text kind_${rustKind}_bg" title="${title}">${symbol}</div><span>${label}</span></a></li>`;
-    }
+  let html = `<ul>`;
+
+  for (const result of results) {
+    console.log("result", result);
+    const [rustKind, title, symbol] = docNodeKindToStringVariants(result.kind);
+    const label = result.nsQualifiers
+      ? `${result.nsQualifiers.join(".")}.${result.name}`
+      : result.name;
+    html += `<li>
+<a href="${result.name.split(".").join("/")}.html">
+    <div class="symbol_kind kind_${rustKind}_text kind_${rustKind}_bg" title="${title}">
+        ${symbol}
+    </div>
+    <span>${label}</span>
+    <span style="position: absolute; right: 0; color: gray; font-style: italic;">${result.location.filename}:${result.location.line}</span>
+</a>
+</li>`;
+  }
 
-    html += `</ul>`;
-    searchResultsDiv.innerHTML = html;
+  html += `</ul>`;
+  searchResultsDiv.innerHTML = html;
 }
 
 function searchInIndex(val) {
-    const valLower = val.toLowerCase();
-    const results = SEARCH_INDEX.nodes.filter((node) => {
-        const matches = node.name.toLowerCase().includes(valLower);
-
-        if (matches) {
-            return matches;
-        }
-
-        if (node.nsQualifiers) {
-            return node.nsQualifiers.some((nsName) => nsName.toLowerCase().includes(valLower))
-        }
-
-        return false;
-    });
-    return results;
+  const valLower = val.toLowerCase();
+  const results = SEARCH_INDEX.nodes.filter((node) => {
+    const matches = node.name.toLowerCase().includes(valLower);
+
+    if (matches) {
+      return matches;
+    }
+
+    if (node.nsQualifiers) {
+      return node.nsQualifiers.some((nsName) =>
+        nsName.toLowerCase().includes(valLower)
+      );
+    }
+
+    return false;
+  });
+  return results;
 }
 
 function docNodeKindToStringVariants(kind) {
   switch (kind) {
     case "function":
-      return ["Function", "Function", "f"]
+      return ["Function", "Function", "f"];
     case "variable":
-      return ["Variable", "Variable", "v"]
+      return ["Variable", "Variable", "v"];
     case "class":
-      return ["Class", "Class", "c"]
+      return ["Class", "Class", "c"];
     case "enum":
-      return ["Enum", "Enum", "E"]
+      return ["Enum", "Enum", "E"];
     case "interface":
-      return ["Interface", "Interface", "I"]
+      return ["Interface", "Interface", "I"];
     case "typeAlias":
-      return ["TypeAlias", "Type Alias", "T"]
+      return ["TypeAlias", "Type Alias", "T"];
     case "namespace":
-      return ["Namespace", "Namespace", "N"]
+      return ["Namespace", "Namespace", "N"];
   }
 }