Merge e3ca1ba2b8 into 3c9ba4a06d

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

assets/js/offline-search.js

@@ -65,15 +65,10 @@ search backend.
       // Dispose any existing popover.
       //
 
-      {
-        let popover = bootstrap.Popover.getInstance($targetSearchInput[0]);
-        if (popover !== null) {
-          popover.dispose();
-        }
-      }
+      disposePopover($targetSearchInput);
 
       //
-      // Kick off the search and collect the results.
+      // Check if we need to do a search at all.
       //
 
       const searchQuery = $targetSearchInput.val();
@@ -81,37 +76,8 @@ search backend.
         return;
       }
 
-      // Show the results popover with a spinner while we're busy.
-      const $spinner = $("<div>")
-        .addClass("spinner-container")
-        .append($("<div>")
-          .addClass("spinner-border")
-          .attr("role", "status")
-          .append($("<div>")
-            .addClass("visually-hidden")
-            .text("Loading...")))
-        .append($("<p>")
-          .text("Loading..."));
-      const popover = new bootstrap.Popover($targetSearchInput[0], {
-        content: $spinner[0],
-        html: true,
-        customClass: "td-offline-search-results",
-        placement: "bottom",
-      });
-      popover.show();
-
-      // Kick off the search.
-      const search = await pagefind.debouncedSearch(searchQuery);
-      if (search === null) {
-        // A more recent search call has been made, nothing to do.
-        return;
-      }
-
-      // Load all result details. We may want to switch to a paged UI in future for better performance.
-      const results = await Promise.all(search.results.slice(0, 100).map(r => r.data()));
-
       //
-      // Construct the search results html.
+      // Prepare the results popover.
       //
 
       const $html = $("<div>");
@@ -135,7 +101,7 @@ search backend.
           .attr("aria-label", "Close")
           .on("click", () => {
             $targetSearchInput.val("");
-            $targetSearchInput.trigger("change");
+            disposePopover($targetSearchInput);
           })
         )
       );
@@ -149,87 +115,36 @@ search backend.
       });
       $html.append($searchResultBody);
 
-      if (results.length === 0) {
+      // Append a spinner while we're busy.
+      const $spinner = createSpinner();
+      $searchResultBody.append($spinner)
+
+      // Display the popover.
+      const popover = new bootstrap.Popover($targetSearchInput[0], {
+        content: $html[0],
+        html: true,
+        customClass: "td-offline-search-results",
+        placement: "bottom",
+      });
+      popover.show();
+
+      //
+      // Kick off the search, load the results and inject them into the popover.
+      //
+
+      const search = await pagefind.debouncedSearch(searchQuery);
+      if (search === null) {
+        // A more recent search call has been made, nothing to do.
+        return;
+      }
+
+      if (search.results.length === 0) {
         $searchResultBody.append(
           $("<p>").text(`No results found for query "${searchQuery}"`)
         );
       } else {
-        results.forEach((r, index_r) => {
-          // Add the main result's page title.
-          $searchResultBody.append($("<div>")
-            .append($("<a>")
-              .css({
-                fontSize: "1.2rem",
-              })
-              .attr("href", r.url)
-              .text(r.meta.title))
-            .append($("<span>")
-              .addClass("text-body-secondary")
-              .text(` – ${r.sub_results.length} ${resultsString(r.sub_results.length)}`)));
-          
-          // Render the first 3 subresults per page and wrap the rest
-          // in a collapsed container.
-          const LIMIT = 3;
-          let $wrapper = null;
-
-          r.sub_results.forEach((s, index_s) => {
-            if (index_s === LIMIT) {
-              const num_hidden_results = r.sub_results.length - index_s;
-              const wrapper_id = `collapsible-subresults-${index_r}`;
-              const $action = $("<span>").text("▶ Show");
-              const $expander = $("<button>")
-                .attr("data-bs-toggle", "collapse")
-                .attr("data-bs-target", `#${wrapper_id}`)
-                .attr("aria-expanded", "false")
-                .attr("aria-controls", wrapper_id)
-                .attr("type", "button")
-                .addClass("td-offline-search-results__expander-button")
-                .addClass("btn")
-                .addClass("btn-sm")
-                .addClass("btn-link")
-                .append($action)
-                .append($("<span>").text(` ${num_hidden_results} more ${resultsString(num_hidden_results)} from ${r.meta.title}`));
-
-              $searchResultBody.append($("<p>").append($expander));
-              $wrapper = $("<div>")
-                .addClass("collapse td-offline-search-results__subresults")
-                .attr("id", wrapper_id)
-                .on("hide.bs.collapse", _ => $action.text("▶ Show"))
-                .on("show.bs.collapse", _ => $action.text("▼ Hide"));
-              $searchResultBody.append($wrapper);
-            }
-
-            const $entry = $("<div>")
-              .css("margin-top", "0.5rem");
-
-            $entry.append(
-              $("<a>")
-                .addClass("d-block")
-                .attr("href", s.url)
-                .text(s.title)
-            );
-
-            $entry.append($("<p>").html(s.excerpt));
-
-            if (index_s < LIMIT) {
-              $searchResultBody.append($entry);
-            } else {
-              $wrapper.append($entry);
-            }
-          });
-        });
+        await loadAndRenderResults(search.results, 0, $spinner, $searchResultBody);
       }
-
-      // Finally, show the search results.
-      //
-      // Ideally we would just call setContent but there appears to be a bug in Bootstrap
-      // that causes the popover to be hidden when setContent is called after the popover
-      // has been shown. To work around this, we use the hack from [1] to inject the HTML
-      // content manually.
-      //
-      // [1]: https://github.com/twbs/bootstrap/issues/37206#issuecomment-1259541205
-      $(popover.tip.querySelector('.popover-body')).empty().append($html);
-      popover.update();
     };
   });
 })(jQuery);
@@ -238,6 +153,138 @@ search backend.
 // Helpers
 //
 
+const disposePopover = ($targetSearchInput) => {
+  const popover = bootstrap.Popover.getInstance($targetSearchInput[0]);
+  if (popover !== null) {
+    popover.dispose();
+  }
+}
+
+const createSpinner = () => {
+  return $("<div>")
+    .addClass("spinner-container")
+    .append($("<div>")
+      .addClass("spinner-border")
+      .attr("role", "status")
+      .append($("<div>")
+        .addClass("visually-hidden")
+        .text("Loading...")))
+    .append($("<p>")
+      .text("Loading..."));
+}
+
+const loadAndRenderResults = async (results, offset, $spinner, $searchResultBody) => {
+  // Load and render the first three results and hide the remainder behind a
+  // button to not freeze the browser by loading results that may not be
+  // displayed.
+  const LIMIT = 3;
+
+  for (const [index, result] of results.entries()) {
+    if (index < LIMIT) {
+      // Insert a container for the result *before* the spinner. This
+      // will push down the spinner as new content is loaded and keep
+      // it at the end of the popover.
+      const $container = $("<div>");
+      $spinner.before($container);
+
+      renderResult(await result.data(), index + offset, $container);
+    } else if (index === LIMIT) {
+      const num_hidden_results = results.length - index;
+      const $loader = $("<button>")
+        .attr("type", "button")
+        .addClass("td-offline-search-results__expander-button")
+        .addClass("btn")
+        .addClass("btn-sm")
+        .addClass("btn-link")
+        .text(`Load more results from ${num_hidden_results} other ${pagesString(num_hidden_results)}`)
+        .on("click", async () => {
+          // Remove the button.
+          $loader.remove();
+
+          // Add a spinner while we're busy.
+          const $spinner = createSpinner();
+          $searchResultBody.append($spinner)
+
+          // Load and render the results.
+          await loadAndRenderResults(results.slice(LIMIT), LIMIT + offset, $spinner, $searchResultBody);
+        });
+      $spinner.before($loader)
+    }
+  }
+
+  // Remove the spinner now that everything was loaded.
+  $spinner.remove();
+}
+
+const renderResult = (data, index, $container) => {
+  // Add the main result's page title.
+  $container.append($("<div>")
+    .append($("<a>")
+      .css({
+        fontSize: "1.2rem",
+      })
+      .attr("href", data.url)
+      .text(data.meta.title))
+    .append($("<span>")
+      .addClass("text-body-secondary")
+      .text(` – ${data.sub_results.length} ${resultsString(data.sub_results.length)}`)));
+  
+  // Render the first 3 subresults per page and wrap the rest
+  // in a collapsed container.
+  const LIMIT = 3;
+  let $wrapper = null;
+
+  data.sub_results.forEach((s, index_s) => {
+    if (index_s === LIMIT) {
+      const num_hidden_results = data.sub_results.length - index_s;
+      const wrapper_id = `collapsible-subresults-${index}`;
+      const $action = $("<span>").text("▶ Show");
+      const $expander = $("<button>")
+        .attr("data-bs-toggle", "collapse")
+        .attr("data-bs-target", `#${wrapper_id}`)
+        .attr("aria-expanded", "false")
+        .attr("aria-controls", wrapper_id)
+        .attr("type", "button")
+        .addClass("td-offline-search-results__expander-button")
+        .addClass("btn")
+        .addClass("btn-sm")
+        .addClass("btn-link")
+        .append($action)
+        .append($("<span>").text(` ${num_hidden_results} more ${resultsString(num_hidden_results)} from ${data.meta.title}`));
+
+      $container.append($("<p>").append($expander));
+      $wrapper = $("<div>")
+        .addClass("collapse td-offline-search-results__subresults")
+        .attr("id", wrapper_id)
+        .on("hide.bs.collapse", _ => $action.text("▶ Show"))
+        .on("show.bs.collapse", _ => $action.text("▼ Hide"));
+      $container.append($wrapper);
+    }
+
+    const $entry = $("<div>")
+      .css("margin-top", "0.5rem");
+
+    $entry.append(
+      $("<a>")
+        .addClass("d-block")
+        .attr("href", s.url)
+        .text(s.title)
+    );
+
+    $entry.append($("<p>").html(s.excerpt));
+
+    if (index_s < LIMIT) {
+      $container.append($entry);
+    } else {
+      $wrapper.append($entry);
+    }
+  });
+};
+
 const resultsString = (n) => {
   return n === 1 ? "result" : "results";
 };
+
+const pagesString = (n) => {
+  return n === 1 ? "page" : "pages";
+};