mirror of
https://github.com/NotAShelf/neovim-flake.git
synced 2024-12-19 07:29:49 +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
27
docs/static/script/search.js
vendored
27
docs/static/script/search.js
vendored
|
@ -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();
|
||||||
|
|
||||||
|
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(() => {
|
requestAnimationFrame(() => {
|
||||||
const fragment = document.createDocumentFragment();
|
matches.forEach((el) => el?.classList.remove(hiddenClass));
|
||||||
dtElementsData.forEach(({ element, id, ddElement }) => {
|
nonMatches.forEach((el) => el?.classList.add(hiddenClass));
|
||||||
const isMatch = id.includes(query);
|
|
||||||
if (element.classList.contains("hidden") !== !isMatch) {
|
|
||||||
element.classList.toggle("hidden", !isMatch);
|
|
||||||
ddElement?.classList.toggle("hidden", !isMatch);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}, 200);
|
}, 200);
|
||||||
});
|
});
|
||||||
|
|
11
docs/static/style.scss
vendored
11
docs/static/style.scss
vendored
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue