mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
scripts/logviewer/index.html
View file

@ -193,11 +193,14 @@
<body> <body>
<nav> <nav>
<button id="openFile">Open log file</button> <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="collapseAll">Collapse all</button>
<button id="hideCollapsed">Hide collapsed root items</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> <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> </nav>
<main></main> <main></main>
<aside></aside> <aside></aside>

8
scripts/logviewer/main.js
View file

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