Filip/matrix-spec
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-spec synced 2026-04-03 17:54:14 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Group subresults

Browse source 
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
This commit is contained in:
Johannes Marbach 2026-03-19 08:50:45 +01:00
parent e679a00720
commit 9a1b7ffa7c
1 changed files with 72 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
assets/js/offline-search.js
View file

@ -15,18 +15,18 @@ limitations under the License.
*/ */
/* /*
Adapted from [1] to combine Docsy's built-in search UI with the Pagefind Adapted from [1] to combine Docsy"s built-in search UI with the Pagefind
search backend. search backend.
[1]: https://github.com/matrix-org/docsy/blob/71d103ebb20ace3d528178c4b6d92b6cc4f7fd53/assets/js/offline-search.js [1]: https://github.com/matrix-org/docsy/blob/71d103ebb20ace3d528178c4b6d92b6cc4f7fd53/assets/js/offline-search.js
*/ */
(function ($) { (function ($) {
'use strict'; "use strict";
$(document).ready(async function () { $(document).ready(async function () {
const pagefind = await import("/pagefind/pagefind.js"); const pagefind = await import("/pagefind/pagefind.js");
const $searchInput = $('.td-search input'); const $searchInput = $(".td-search input");
// //
// Lazily initialise Pagefind only when the user is about to start a search. // Lazily initialise Pagefind only when the user is about to start a search.
@ -40,7 +40,7 @@ search backend.
// Register handler // Register handler
// //
$searchInput.on('change', (event) => { $searchInput.on("change", (event) => {
render($(event.target)); render($(event.target));
// Hide keyboard on mobile browser // Hide keyboard on mobile browser
@ -48,7 +48,7 @@ search backend.
}); });
// Prevent reloading page by enter key on sidebar search. // Prevent reloading page by enter key on sidebar search.
$searchInput.closest('form').on('submit', () => { $searchInput.closest("form").on("submit", () => {
return false; return false;
}); });
@ -73,7 +73,7 @@ search backend.
// //
const searchQuery = $targetSearchInput.val(); const searchQuery = $targetSearchInput.val();
if (searchQuery === '') { if (searchQuery === "") {
return; return;
} }
@ -88,75 +88,109 @@ search backend.
// Make result html // Make result html
// //
const $html = $('<div>'); const $html = $("<div>");
$html.append( $html.append(
$('<div>') $("<div>")
.css({ .css({
display: 'flex', display: "flex",
justifyContent: 'space-between', justifyContent: "space-between",
marginBottom: '1em', marginBottom: "1em",
}) })
.append( .append(
$('<span>').text('Search results').css({ fontWeight: 'bold' }) $("<span>").text("Search results").css({ fontWeight: "bold" })
) )
.append( .append(
$('<span>').addClass('td-offline-search-results__close-button') $("<span>").addClass("td-offline-search-results__close-button")
) )
); );
const $searchResultBody = $('<div>').css({ const $searchResultBody = $("<div>").css({
maxHeight: `calc(100vh - ${ maxHeight: `calc(100vh - ${
$targetSearchInput.offset().top - $(window).scrollTop() + 180 $targetSearchInput.offset().top - $(window).scrollTop() + 180
}px)`, }px)`,
overflowY: 'auto', overflowY: "auto",
}); });
$html.append($searchResultBody); $html.append($searchResultBody);
if (results.length === 0) { if (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) => { results.forEach((r, index_r) => {
r.sub_results.forEach((s) => { // Add the main result"s page title.
const href = s.url; $searchResultBody.append(
$("<a>")
.addClass("d-block")
.css({
fontSize: "1.2rem",
})
.attr("href", r.url)
.text(r.meta.title)
);
// Render the first 3 subresults per page and wrap the rest
// in a collapsed container.
const LIMIT = 3;
let $wrapper = null;
const $entry = $('<div>').addClass('mt-4'); r.sub_results.forEach((s, index_s) => {
if (index_s === LIMIT) {
const wrapper_id = `collapssible-subresults-${index_r}`;
const $expander = $("<a>")
.attr("data-bs-toggle", "collapse")
.attr("data-bs-target", `#${wrapper_id}`)
.attr("href", "#")
.attr("role", "button")
.attr("aria-expanded", "false")
.attr("aria-controls", wrapper_id)
.css("margin-left", "0.5rem")
.text(`${r.sub_results.length - index_s} more result(s) from ${r.meta.title}`);
$searchResultBody.append($("<p>").append($expander));
$wrapper = $("<div>")
.addClass("collapse")
.attr("id", wrapper_id);
$searchResultBody.append($wrapper);
}
const $entry = $("<div>")
.css("margin-top", "0.5rem")
.css("margin-left", "0.5rem");
$entry.append( $entry.append(
$('<small>').addClass('d-block text-body-secondary').text(r.meta.title) $("<a>")
); .addClass("d-block")
.attr("href", s.url)
$entry.append(
$('<a>')
.addClass('d-block')
.css({
fontSize: '1.2rem',
})
.attr('href', href)
.text(s.title) .text(s.title)
); );
$entry.append($('<p>').html(s.excerpt)); $entry.append($("<p>").html(s.excerpt));
$searchResultBody.append($entry); if (index_s < LIMIT) {
$searchResultBody.append($entry);
} else {
$wrapper.append($entry);
}
}); });
}); });
} }
$targetSearchInput.one('shown.bs.popover', () => { $targetSearchInput.one("shown.bs.popover", () => {
$('.td-offline-search-results__close-button').on('click', () => { $(".td-offline-search-results__close-button").on("click", () => {
$targetSearchInput.val(''); $targetSearchInput.val("");
$targetSearchInput.trigger('change'); $targetSearchInput.trigger("change");
}); });
}); });
const popover = new bootstrap.Popover($targetSearchInput, { const popover = new bootstrap.Popover($targetSearchInput, {
content: $html[0], content: $html[0],
html: true, html: true,
customClass: 'td-offline-search-results', customClass: "td-offline-search-results",
placement: 'bottom', placement: "bottom",
}); });
popover.show(); popover.show();
}; };