NotAShelf/nvf
1
0
Fork 0
mirror of https://github.com/NotAShelf/nvf.git synced 2024-12-29 06:02:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: perform DOM manipulation in batches; preprocess data

Browse source
This commit is contained in:
raf 2024-12-10 17:15:23 +03:00
parent 5db831adb7
commit 781385f991
Signed by: NotAShelf
GPG key ID: AF26552424E53993
1 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
docs/static/script/search.js vendored
View file

@ -1,14 +1,12 @@
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
if (!window.location.pathname.endsWith("options.html")) return; if (!window.location.pathname.endsWith("options.html")) return;
const searchBar = document.createDocumentFragment();
const searchDiv = document.createElement("div"); const searchDiv = document.createElement("div");
searchDiv.id = "search-bar"; searchDiv.id = "search-bar";
searchDiv.innerHTML = ` searchDiv.innerHTML = `
<input type="text" id="search-input" placeholder="Search options by ID..." /> <input type="text" id="search-input" placeholder="Search options by ID..." />
<div id="search-results"></div> <div id="search-results"></div>
`; `;
searchBar.appendChild(searchDiv);
document.body.prepend(searchDiv); document.body.prepend(searchDiv);
const dtElements = Array.from(document.querySelectorAll("dt")); const dtElements = Array.from(document.querySelectorAll("dt"));
@ -22,19 +20,28 @@ document.addEventListener("DOMContentLoaded", () => {
return; return;
} }
const dtElementsData = dtElements.map((dt, index) => ({
element: dt,
id: dtOptionIds[index],
ddElement: ddElements[index],
}));
let debounceTimeout; let debounceTimeout;
document.getElementById("search-input").addEventListener("input", (event) => { document.getElementById("search-input").addEventListener("input", (event) => {
clearTimeout(debounceTimeout); clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => { debounceTimeout = setTimeout(() => {
const query = event.target.value.toLowerCase(); const query = event.target.value.toLowerCase();
dtElements.forEach((dt, index) => {
const isMatch = dtOptionIds[index].includes(query);
if (dt.classList.contains("hidden") !== !isMatch) { requestAnimationFrame(() => {
dt.classList.toggle("hidden", !isMatch); const fragment = document.createDocumentFragment();
ddElements[index]?.classList.toggle("hidden", !isMatch); dtElementsData.forEach(({ element, id, ddElement }) => {
const isMatch = id.includes(query);
if (element.classList.contains("hidden") !== !isMatch) {
element.classList.toggle("hidden", !isMatch);
ddElement?.classList.toggle("hidden", !isMatch);
} }
}); });
});
}, 200); }, 200);
}); });
}); });