NotAShelf/nvf
2
1
Fork 0
mirror of https://github.com/NotAShelf/nvf.git synced 2025-10-31 11:02:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

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

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

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

11
docs/static/style.scss vendored
View file

@ -189,14 +189,16 @@ th {
dt { dt {
margin: 1.2rem 0 0.8rem; margin: 1.2rem 0 0.8rem;
content-visibility: auto;
contain-intrinsic-size: auto 42px;
} }
dd { dd {
margin-left: 2rem; margin-left: 2rem;
content-visibility: auto;
contain-intrinsic-size: auto 500px;
} }
div.book { div.book {}
}
ul { ul {
@include margined; @include margined;
@ -238,11 +240,12 @@ li {
top: 0; top: 0;
background: white; background: white;
padding: 10px; padding: 10px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $color-gray-200;
z-index: 1000; z-index: 1000;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background: $color-gray-900; background: $color-gray-900;
color: $color-gray-50; color: $color-gray-50;
border-bottom: 1px solid black;
} }
} }