docs: better performance in the resource widget ft. Keira and Michaili

This commit is contained in:
raf 2024-12-10 23:10:05 +03:00
commit f8e1856620
Signed by: NotAShelf
GPG key ID: AF26552424E53993
2 changed files with 26 additions and 12 deletions

View file

@ -26,21 +26,32 @@ document.addEventListener("DOMContentLoaded", () => {
ddElement: ddElements[index],
}));
const hiddenClass = "hidden";
const hiddenStyle = document.createElement("style");
hiddenStyle.innerHTML = `.${hiddenClass} { display: none; }`;
document.head.appendChild(hiddenStyle);
let debounceTimeout;
document.getElementById("search-input").addEventListener("input", (event) => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
const query = event.target.value.toLowerCase();
const matches = [];
const nonMatches = [];
dtElementsData.forEach(({ element, id, ddElement }) => {
const isMatch = id.includes(query);
if (isMatch) {
matches.push(element, ddElement);
} else {
nonMatches.push(element, ddElement);
}
});
requestAnimationFrame(() => {
const fragment = document.createDocumentFragment();
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);
}
});
matches.forEach((el) => el?.classList.remove(hiddenClass));
nonMatches.forEach((el) => el?.classList.add(hiddenClass));
});
}, 200);
});