1
0
Fork 0
mirror of https://github.com/NotAShelf/neovim-flake.git synced 2024-12-24 04:09:49 +01:00

docs: add search widget to options page

This commit is contained in:
NotAShelf 2024-12-09 10:27:01 +03:00
parent fca55e1db1
commit 37dc96575d
No known key found for this signature in database
GPG key ID: AF26552424E53993
4 changed files with 62 additions and 2 deletions

View file

@ -14,7 +14,7 @@ indent_style = space
indent_size = 2 indent_size = 2
trim_trailing_whitespace = false trim_trailing_whitespace = false
[*.{nix,yml,yaml}] [*.{js,nix,yml,yaml}]
indent_style = space indent_style = space
indent_size = 2 indent_size = 2
tab_width = 2 tab_width = 2

View file

@ -62,7 +62,8 @@ in
# Copy anchor scripts to the script directory in document root. # Copy anchor scripts to the script directory in document root.
cp -vt "$dest"/script \ cp -vt "$dest"/script \
${./static/script}/anchor-min.js \ ${./static/script}/anchor-min.js \
${./static/script}/anchor-use.js ${./static/script}/anchor-use.js \
${./static/script}/search.js
substituteInPlace ./options.md \ substituteInPlace ./options.md \
--subst-var-by OPTIONS_JSON ./config-options.json --subst-var-by OPTIONS_JSON ./config-options.json
@ -100,6 +101,7 @@ in
--script highlightjs/loader.js \ --script highlightjs/loader.js \
--script script/anchor-use.js \ --script script/anchor-use.js \
--script script/anchor-min.js \ --script script/anchor-min.js \
--script script/search.js \
--toc-depth 2 \ --toc-depth 2 \
--section-toc-depth 1 \ --section-toc-depth 1 \
manual.md \ manual.md \

40
docs/static/script/search.js vendored Normal file
View file

@ -0,0 +1,40 @@
document.addEventListener("DOMContentLoaded", () => {
if (!window.location.pathname.endsWith("options.html")) return;
const searchBar = document.createDocumentFragment();
const searchDiv = document.createElement("div");
searchDiv.id = "search-bar";
searchDiv.innerHTML = `
<input type="text" id="search-input" placeholder="Search options by ID..." />
<div id="search-results"></div>
`;
searchBar.appendChild(searchDiv);
document.body.prepend(searchDiv);
const dtElements = Array.from(document.querySelectorAll("dt"));
const ddElements = Array.from(document.querySelectorAll("dd"));
const dtOptionIds = dtElements.map(
(dt) => dt.querySelector("a")?.id.toLowerCase() || "",
);
if (dtElements.length === 0 || ddElements.length === 0) {
console.warn("Something went wrong, page may be loaded incorrectly.");
return;
}
let debounceTimeout;
document.getElementById("search-input").addEventListener("input", (event) => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
const query = event.target.value.toLowerCase();
dtElements.forEach((dt, index) => {
const isMatch = dtOptionIds[index].includes(query);
if (dt.classList.contains("hidden") !== !isMatch) {
dt.classList.toggle("hidden", !isMatch);
ddElements[index]?.classList.toggle("hidden", !isMatch);
}
});
}, 200);
});
});

View file

@ -233,6 +233,24 @@ li {
} }
} }
#search-bar {
position: sticky;
top: 0;
background: white;
padding: 10px;
border-bottom: 1px solid #ccc;
z-index: 1000;
}
#search-input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.hidden {
display: none;
}
div.titlepage { div.titlepage {
margin: 40px 0; margin: 40px 0;