mirror of
https://github.com/NotAShelf/neovim-flake.git
synced 2024-12-19 04:09:48 +01:00
docs: better performance in the resource widget ft. Keira and Michaili
This commit is contained in:
parent
781385f991
commit
f8e1856620
2 changed files with 26 additions and 12 deletions
21
docs/static/script/search.js
vendored
21
docs/static/script/search.js
vendored
|
@ -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();
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const fragment = document.createDocumentFragment();
|
||||
const matches = [];
|
||||
const nonMatches = [];
|
||||
|
||||
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);
|
||||
if (isMatch) {
|
||||
matches.push(element, ddElement);
|
||||
} else {
|
||||
nonMatches.push(element, ddElement);
|
||||
}
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
matches.forEach((el) => el?.classList.remove(hiddenClass));
|
||||
nonMatches.forEach((el) => el?.classList.add(hiddenClass));
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
|
|
11
docs/static/style.scss
vendored
11
docs/static/style.scss
vendored
|
@ -189,14 +189,16 @@ th {
|
|||
|
||||
dt {
|
||||
margin: 1.2rem 0 0.8rem;
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 42px;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2rem;
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 500px;
|
||||
}
|
||||
|
||||
div.book {
|
||||
}
|
||||
div.book {}
|
||||
|
||||
ul {
|
||||
@include margined;
|
||||
|
@ -238,11 +240,12 @@ li {
|
|||
top: 0;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid $color-gray-200;
|
||||
z-index: 1000;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $color-gray-900;
|
||||
color: $color-gray-50;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue