201 lines
5.7 KiB
JavaScript
201 lines
5.7 KiB
JavaScript
|
function initSidebar() {
|
||
|
var filename = document.location.pathname;
|
||
|
|
||
|
if (filename.slice(0, 5) == "/next") {
|
||
|
filename = filename.slice(5);
|
||
|
}
|
||
|
|
||
|
if (filename == "/") {
|
||
|
filename = "/index.html";
|
||
|
} else if (filename.slice(0, 6) == "/news/") {
|
||
|
filename = "/news/";
|
||
|
}
|
||
|
|
||
|
var menu = document.getElementById("menu");
|
||
|
var setMenuLayout = function() {
|
||
|
if (window.innerWidth < 900) {
|
||
|
document.body.className = "narrow";
|
||
|
menu.className = "";
|
||
|
document.getElementById("main_content").style.minHeight = "0";
|
||
|
} else {
|
||
|
if (document.body.clientWidth < 1340) {
|
||
|
document.body.className = "normal";
|
||
|
} else {
|
||
|
document.body.className = "wide";
|
||
|
}
|
||
|
|
||
|
var y = (window.pageYOffset !== undefined) ? window.pageYOffset :
|
||
|
(document.documentElement || document.body.parentNode || document.body).scrollTop;
|
||
|
|
||
|
if (y < 444 || window.innerHeight < menu.clientHeight + 100) {
|
||
|
menu.className = "";
|
||
|
} else {
|
||
|
menu.className = "floating";
|
||
|
}
|
||
|
|
||
|
setTimeout(function () {
|
||
|
document.getElementById("main_content").style.minHeight = menu.clientHeight + 100 + "px";
|
||
|
}, 10);
|
||
|
}
|
||
|
};
|
||
|
setMenuLayout();
|
||
|
window.onresize = setMenuLayout;
|
||
|
window.onscroll = setMenuLayout;
|
||
|
|
||
|
var items = menu.getElementsByTagName("li");
|
||
|
var toc = null;
|
||
|
for (var i = 0; i < items.length; i++) {
|
||
|
var link = items[i].getElementsByTagName("a")[0];
|
||
|
var href = link.href;
|
||
|
if (href.lastIndexOf(filename) >= 0) {
|
||
|
var parent = link.parentNode;
|
||
|
|
||
|
while (link.childNodes.length > 0) {
|
||
|
var child = link.childNodes[0];
|
||
|
link.removeChild(child);
|
||
|
parent.appendChild(child);
|
||
|
}
|
||
|
parent.removeChild(link);
|
||
|
items[i].className = "selected";
|
||
|
toc = document.createElement("ul");
|
||
|
toc.id = "toc";
|
||
|
items[i].appendChild(toc);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return toc;
|
||
|
}
|
||
|
|
||
|
function setupSidebar() {
|
||
|
if (window.CAPNP_NEWS_SIDEBAR) {
|
||
|
setupNewsSidebar(CAPNP_NEWS_SIDEBAR);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var filename = document.location.pathname;
|
||
|
|
||
|
if (filename.slice(0, 5) == "/next") {
|
||
|
filename = filename.slice(5);
|
||
|
}
|
||
|
|
||
|
var isNews = filename.slice(0, 6) == "/news/";
|
||
|
|
||
|
var toc = initSidebar();
|
||
|
if (toc) {
|
||
|
var content = document.getElementById("main_content").childNodes;
|
||
|
var headings = [];
|
||
|
|
||
|
for (var i = 0; i < content.length; i++) {
|
||
|
if (content[i].tagName == "H2" ||
|
||
|
(!isNews && (content[i].tagName == "H3" || content[i].tagName == "H4"))) {
|
||
|
headings.push(content[i]);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var levels = [toc];
|
||
|
for (var i in headings) {
|
||
|
var hl = headings[i].tagName.slice(1) - 1;
|
||
|
while (hl > levels.length) {
|
||
|
var parent = levels[levels.length - 1];
|
||
|
var item = parent.childNodes[parent.childNodes.length - 1];
|
||
|
var sublist = document.createElement("ul");
|
||
|
item.appendChild(sublist);
|
||
|
levels.push(sublist);
|
||
|
}
|
||
|
while (hl < levels.length) {
|
||
|
levels.pop();
|
||
|
}
|
||
|
|
||
|
var parent = levels[levels.length - 1];
|
||
|
var item = document.createElement("li");
|
||
|
var p = document.createElement("p");
|
||
|
var link = document.createElement("a");
|
||
|
p.appendChild(document.createTextNode(headings[i].innerText || headings[i].textContent));
|
||
|
var hlinks = headings[i].getElementsByTagName("a");
|
||
|
if (hlinks.length == 1) {
|
||
|
link.href = hlinks[0].href;
|
||
|
} else {
|
||
|
link.href = "#" + headings[i].id;
|
||
|
}
|
||
|
link.appendChild(p);
|
||
|
item.appendChild(link);
|
||
|
parent.appendChild(item);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function setupNewsSidebar(items) {
|
||
|
var toc = initSidebar();
|
||
|
if (toc) {
|
||
|
for (var i in items) {
|
||
|
var item = document.createElement("li");
|
||
|
var p = document.createElement("p");
|
||
|
var link = document.createElement("a");
|
||
|
p.appendChild(document.createTextNode(items[i].title));
|
||
|
link.href = items[i].url;
|
||
|
link.appendChild(p);
|
||
|
item.appendChild(link);
|
||
|
toc.appendChild(item);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function setupSlides() {
|
||
|
var slides = document.querySelectorAll("body.slides main section");
|
||
|
var headerTitle = document.querySelector("body.slides header .title");
|
||
|
var slideNum = document.querySelector("#slide-num");
|
||
|
|
||
|
var current = 0;
|
||
|
var hash = document.location.hash;
|
||
|
if (hash) {
|
||
|
current = parseInt(hash.slice(1)) - 1;
|
||
|
}
|
||
|
slides[current].className = "current";
|
||
|
headerTitle.textContent = slides[current].dataset.title || "";
|
||
|
slideNum.textContent = window.location.hash;
|
||
|
|
||
|
function navSlide(diff) {
|
||
|
slides[current].className = "";
|
||
|
current = Math.min(slides.length - 1, Math.max(0, current + diff));
|
||
|
slides[current].className = "current";
|
||
|
|
||
|
headerTitle.textContent = slides[current].dataset.title || "";
|
||
|
if (current) {
|
||
|
history.replaceState({}, "", "#" + (current + 1));
|
||
|
slideNum.textContent = "#" + (current + 1);
|
||
|
} else {
|
||
|
history.replaceState({}, "", window.location.pathname);
|
||
|
slideNum.textContent = "";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
document.body.addEventListener("keydown", event => {
|
||
|
if (event.keyCode == 39) {
|
||
|
navSlide(1);
|
||
|
} else if (event.keyCode == 37) {
|
||
|
navSlide(-1);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
document.querySelector("body.slides footer button.back").addEventListener("click", event => {
|
||
|
navSlide(-1);
|
||
|
});
|
||
|
document.querySelector("body.slides footer button.forward").addEventListener("click", event => {
|
||
|
navSlide(1);
|
||
|
});
|
||
|
|
||
|
if (document.location.hostname === "localhost") {
|
||
|
var lastModified = new Date(document.lastModified);
|
||
|
setInterval(function () {
|
||
|
var req = new Request(".", {headers: {
|
||
|
"If-Modified-Since": lastModified.toUTCString()}});
|
||
|
fetch(req).then(response => {
|
||
|
if (response.status == 200 &&
|
||
|
new Date(response.headers.get("Last-Modified")) > lastModified) {
|
||
|
document.location.reload();
|
||
|
}
|
||
|
});
|
||
|
}, 1000);
|
||
|
}
|
||
|
}
|