You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.2 KiB
JavaScript
62 lines
2.2 KiB
JavaScript
window.addEventListener("DOMContentLoaded", function () {
|
|
var allAnnotations = this.document.querySelectorAll(".fn-annotatation");
|
|
let level = 0;
|
|
const updateShownAnnotations = () => {
|
|
allAnnotations.forEach((el) => {
|
|
const elLevel = parseInt(el.getAttribute("level"));
|
|
console.log(elLevel, level);
|
|
if (elLevel < level) {
|
|
el.classList.add("visible");
|
|
} else {
|
|
el.classList.remove("visible");
|
|
}
|
|
})
|
|
}
|
|
|
|
updateShownAnnotations();
|
|
document.querySelector(".fn-annotation-slider").addEventListener("input", (e) => {
|
|
level = Math.round(e.currentTarget.value / 100);
|
|
updateShownAnnotations();
|
|
})
|
|
|
|
const doTimeTravel = (e) => {
|
|
var next = allFiles[parseInt(e.target.value)];
|
|
// TODO: loading state
|
|
|
|
// TODO: trigger the loading state on input, only debounce the request
|
|
// TODO: make sure when visiting /log/{log}.html, this interaction also works
|
|
// TODO: better error management
|
|
// TODO: display the current selected file somewhere
|
|
fetch(window.location.href.replace("index.html", "") + "logs/" + next).then(function (response) {
|
|
return response.text();
|
|
}).then(function (html) {
|
|
var parser = new DOMParser();
|
|
var parsed = parser.parseFromString(html, 'text/html');
|
|
var newContent = parsed.querySelector(".main__inner");
|
|
var container = document.body.querySelector(".main__inner");
|
|
|
|
if(newContent) {
|
|
container.innerHTML = newContent.innerHTML;
|
|
} else {
|
|
container.innerHTML = "Couldn't load"
|
|
}
|
|
|
|
}).catch(function (err) {
|
|
// There was an error
|
|
console.warn('Something went wrong.', err);
|
|
});
|
|
|
|
}
|
|
|
|
const debounce = (callback, waitTime) => {
|
|
let timer;
|
|
return (...args) => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(() => {
|
|
callback(...args);
|
|
}, waitTime);
|
|
};
|
|
}
|
|
|
|
document.querySelector(".fn-time-slider").addEventListener('input', debounce(doTimeTravel, 1000));
|
|
}) |