tl-dr/script.js

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));
})