mirror of
https://github.com/matrix-org/matrix-spec
synced 2026-04-03 17:54:14 +02:00
Load and render main results one by one
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
This commit is contained in:
Johannes Marbach
parent
754e9c82b8
commit
8fb380d465
|
|
@ -73,7 +73,7 @@ search backend.
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Kick off the search and collect the results.
|
// Check if we need to do a search at all.
|
||||||
//
|
//
|
||||||
|
|
||||||
const searchQuery = $targetSearchInput.val();
|
const searchQuery = $targetSearchInput.val();
|
||||||
|
|
@ -81,37 +81,8 @@ search backend.
|
||||||
return;
|
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>");
|
const $html = $("<div>");
|
||||||
|
|
@ -149,87 +120,56 @@ search backend.
|
||||||
});
|
});
|
||||||
$html.append($searchResultBody);
|
$html.append($searchResultBody);
|
||||||
|
|
||||||
if (results.length === 0) {
|
// Append 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..."));
|
||||||
|
$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(
|
$searchResultBody.append(
|
||||||
$("<p>").text(`No results found for query "${searchQuery}"`)
|
$("<p>").text(`No results found for query "${searchQuery}"`)
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
results.forEach((r, index_r) => {
|
for (const [index, result] of search.results.entries()) {
|
||||||
// Add the main result's page title.
|
// Insert a container for the result *before* the spinner. This
|
||||||
$searchResultBody.append($("<div>")
|
// will push down the spinner as new content is loaded and keep
|
||||||
.append($("<a>")
|
// it at the end of the popover.
|
||||||
.css({
|
const $container = $("<div>");
|
||||||
fontSize: "1.2rem",
|
$spinner.before($container);
|
||||||
})
|
|
||||||
.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) => {
|
renderResult(await result.data(), index, $container);
|
||||||
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));
|
// Remove the spinner now that everything was loaded.
|
||||||
$wrapper = $("<div>")
|
$spinner.remove();
|
||||||
.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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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);
|
})(jQuery);
|
||||||
|
|
@ -238,6 +178,71 @@ search backend.
|
||||||
// Helpers
|
// Helpers
|
||||||
//
|
//
|
||||||
|
|
||||||
|
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) => {
|
const resultsString = (n) => {
|
||||||
return n === 1 ? "result" : "results";
|
return n === 1 ? "result" : "results";
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue