michaelkuc6/blog_os
1
0
Fork 0
mirror of https://github.com/phil-opp/blog_os.git synced 2025-12-16 14:27:49 +00:00
Code Issues Projects Releases Wiki Activity

Mark active item in table of contents (#733)

Browse Source
This commit is contained in:
Philipp Oppermann
2020-01-31 14:17:22 +01:00
committed by GitHub
parent e2ea963d5d
commit 728620b527
2 changed files with 46 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
blog/static/css/main.css
View File

@@ -193,14 +193,21 @@ aside#all-posts-link {
margin-left: -15rem; margin-left: -15rem;
font-size: 90%; font-size: 90%;
line-height: 1.2; line-height: 1.2;
}
#toc-aside li:not(.active) > a, #toc-aside h2 {
opacity: .5; opacity: .5;
transition: opacity .5s; transition: opacity .5s;
} }
#toc-aside:hover { #toc-aside:hover li:not(.active) > a, #toc-aside:hover h2 {
opacity: 1; opacity: 1;
} }
#toc-aside li.active > a {
font-weight: bold;
}
#toc-aside h2 { #toc-aside h2 {
font-size: 110%; font-size: 110%;
margin-bottom: .2rem; margin-bottom: .2rem;
@@ -212,7 +219,7 @@ aside#all-posts-link {
list-style:none; list-style:none;
} }
#toc-aside ol li:before { #toc-aside ol li a:before {
content: ""; content: "";
border-color: transparent #008eef; border-color: transparent #008eef;
border-style: solid; border-style: solid;

37
blog/static/js/main.js
View File

@@ -3,6 +3,8 @@ window.onload = function() {
if (container != null) { if (container != null) {
resize_toc(container); resize_toc(container);
toc_scroll_position(container);
window.onscroll = function() { toc_scroll_position(container) };
} }
} }
@@ -24,3 +26,38 @@ function resize_toc(container) {
resizeId = setTimeout(resize, 300); resizeId = setTimeout(resize, 300);
}; };
} }
function toc_scroll_position(container) {
if (container.offsetParent === null) {
// skip computation if ToC is not visible
return;
}
var items = container.querySelectorAll("li")
// remove active class for all items
for (item of container.querySelectorAll("li")) {
item.classList.remove("active");
}
// look for active item
var site_offset = document.documentElement.scrollTop;
var current_toc_item = null;
for (item of container.querySelectorAll("li")) {
if (item.offsetParent === null) {
// skip items that are not visible
continue;
}
var anchor = item.firstElementChild.getAttribute("href");
var heading = document.querySelector(anchor);
if (heading.offsetTop <= (site_offset + document.documentElement.clientHeight / 3)) {
current_toc_item = item;
} else {
break;
}
}
// set active call for current ToC item
if (current_toc_item != null) {
current_toc_item.classList.add("active");
}
}