show number of matches in logviewer and don't hide expanded sibling

fixes https://github.com/vector-im/hydrogen-web/issues/378
This commit is contained in:
Bruno Windels 2021-06-02 21:25:46 +02:00
parent 5562e7cd74
commit 711b5be07f
2 changed files with 14 additions and 3 deletions

View file

@ -193,11 +193,14 @@
<body>
<nav>
<button id="openFile">Open log file</button>
<form id="highlightForm"><input type="text" id="highlight" placeholder="Highlight a search term"></form>
<button id="collapseAll">Collapse all</button>
<button id="hideCollapsed">Hide collapsed root items</button>
<button id="hideHighlightedSiblings">Hide siblings of highlighted</button>
<button id="hideHighlightedSiblings" title="Hide collapsed siblings of highlighted">Hide non-highlighted</button>
<button id="showAll">Show all</button>
<form id="highlightForm">
<input type="text" id="highlight" name="highlight" placeholder="Highlight a search term" autocomplete="on">
<output id="highlightMatches"></output>
</form>
</nav>
<main></main>
<aside></aside>

View file

@ -303,11 +303,15 @@ const highlightForm = document.getElementById("highlightForm");
highlightForm.addEventListener("submit", evt => {
evt.preventDefault();
const matchesOutput = document.getElementById("highlightMatches");
const query = document.getElementById("highlight").value;
if (query) {
matchesOutput.innerText = "Searching…";
let matches = 0;
processRecursively(rootItem, item => {
let domNode = document.getElementById(item.id);
if (itemMatchesFilter(item, query)) {
matches += 1;
domNode.classList.add("highlighted");
domNode = domNode.parentElement;
while (domNode.nodeName !== "SECTION") {
@ -320,10 +324,12 @@ highlightForm.addEventListener("submit", evt => {
domNode.classList.remove("highlighted");
}
});
matchesOutput.innerText = `${matches} matches`;
} else {
for (const node of document.querySelectorAll(".highlighted")) {
node.classList.remove("highlighted");
}
matchesOutput.innerText = "";
}
});
@ -379,9 +385,11 @@ document.getElementById("hideHighlightedSiblings").addEventListener("click", ()
const list = node.closest("ol");
const siblings = Array.from(list.querySelectorAll("li > div > a:not(.highlighted)")).map(n => n.closest("li"));
for (const sibling of siblings) {
if (!sibling.classList.contains("expanded")) {
sibling.classList.add("hidden");
}
}
}
});
document.getElementById("showAll").addEventListener("click", () => {
for (const node of document.querySelectorAll(".hidden")) {