fernando/thp
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

[Web] Highlight current anchor in sidebar

Browse Source
This commit is contained in:
Araozu 2023-04-11 11:58:21 -05:00
parent 44f40724b1
commit 85c36bcb26
2 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-generator/src/sidebar/mod.rs
View File

@ -54,7 +54,7 @@ impl Topic {
let html_fragment_link = utils::to_html_fragment(&self.text);
format!(
"<li class=\"m-2\"><a href=\"#{}\" class=\"inline-block w-full\">{}</a>{}</li>",
"<li class=\"m-2\"><a href=\"#{}\" class=\"inline-block w-full hover:text-c2-primary\">{}</a>{}</li>",
html_fragment_link, self.text, extra
)
}

32
doc-generator/static/template.html
View File

@ -41,9 +41,9 @@
{{pages}}
</div>
<div class="text-sm p-4 h-screen py-12 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
<nav class="text-sm p-4 h-screen py-12 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
{{sidebar}}
</div>
</nav>
<div class="marked px-8 max-w-screen-lg">
{{markdown}}
</div>
@ -57,5 +57,33 @@
document.head.appendChild(linkEl);
</script>
<script>
const anchors = document.querySelectorAll('h2, h3');
const links = document.querySelectorAll('nav > ul > li > a');
window.addEventListener("DOMContentLoaded", () => {
window.addEventListener('scroll', (event) => {
if (anchors !== null && links !== null) {
let scrollTop = window.scrollY;
let scrollBottom = scrollTop + window.innerHeight;
// highlight the last scrolled-to: set everything inactive first
links.forEach((link, index) => {
link.classList.remove("text-c2-primary");
});
// then iterate backwards, on the first match highlight it and break
for (let i = 0; i < anchors.length; i++) {
let anchorPos = anchors[i].offsetTop + 30;
if (anchorPos > scrollTop && anchorPos < scrollBottom) {
links[i].classList.add('text-c2-primary');
break;
}
}
}
});
});
</script>
</body>
</html>