diff --git a/docs/static/script/search.js b/docs/static/script/search.js index 1537b235..e20c2314 100644 --- a/docs/static/script/search.js +++ b/docs/static/script/search.js @@ -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); }); diff --git a/docs/static/style.scss b/docs/static/style.scss index d5f739e5..d6becd0c 100644 --- a/docs/static/style.scss +++ b/docs/static/style.scss @@ -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; } }