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:
parent
fca55e1db1
commit
37dc96575d
4 changed files with 62 additions and 2 deletions
|
@ -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
|
||||||
|
|
|
@ -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
40
docs/static/script/search.js
vendored
Normal 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);
|
||||||
|
});
|
||||||
|
});
|
18
docs/static/style.scss
vendored
18
docs/static/style.scss
vendored
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue