79 lines
2.0 KiB
HTML
79 lines
2.0 KiB
HTML
---
|
|
layout: default
|
|
hideTitle: true
|
|
---
|
|
<div class="row docs">
|
|
<div class="col-md-2 d-none d-md-block">
|
|
</div>
|
|
<div class="col-md-10">
|
|
<h2 class="mt-4 mb-4">{{page.title}}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row docs">
|
|
<div class="col-md-2 d-none d-md-block">
|
|
<ul class="nav flex-column text-right index" id="index">
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-10" id="contentBox">
|
|
{{ content }}
|
|
</div>
|
|
<script>
|
|
|
|
function loadSections() {
|
|
var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
|
|
var output = [];
|
|
for (var i = 0; i<headings.length; i++) {
|
|
var obj = {};
|
|
obj.element = headings[i];
|
|
obj.text = headings[i].innerText;
|
|
obj.id = headings[i].id;
|
|
if (headings[i].tagName === "H3") {
|
|
output.push(obj);
|
|
}
|
|
}
|
|
return output;
|
|
}
|
|
|
|
function loadIndex(sections) {
|
|
var index = document.getElementById("index");
|
|
for (var i = 0; i<sections.length; i++) {
|
|
var li = document.createElement("li");
|
|
var linkNode = document.createElement("a");
|
|
linkNode.classList.add("nav-link");
|
|
linkNode.appendChild(document.createTextNode(sections[i].text));
|
|
linkNode.href = "#"+sections[i].id;
|
|
li.appendChild(linkNode);
|
|
li.classList.add("nav-item");
|
|
index.appendChild(li);
|
|
sections[i].linkElement = li;
|
|
}
|
|
}
|
|
|
|
function updateIndexSelect() {
|
|
for (var i = 0; i<sections.length; i++) {
|
|
sections[i].linkElement.classList.remove("active");
|
|
}
|
|
|
|
for (var i = 0; i<sections.length; i++) {
|
|
if (isVisible(sections[i].element)) {
|
|
sections[i].linkElement.classList.add("active");
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
var sections = loadSections();
|
|
loadIndex(sections);
|
|
|
|
// Scroll handler for index hightlight
|
|
window.addEventListener("scroll", function() {
|
|
updateIndexSelect();
|
|
});
|
|
|
|
window.addEventListener("load", function() {
|
|
updateIndexSelect();
|
|
});
|
|
|
|
</script>
|
|
</div>
|