comfitu.re/script.js

(function (){
    var comfiture = {};
    var content;
    var activeLink;
    var activeContent;
    var reader;
    var readerBtn;
    var motds = [
        "Made by Fristi",
        "Press R or Z twice to do a barrel roll",
        "You wouldn't download a car.",
        "The last metroid is in captivity.",
        "Suavemente, bésame",
        "What is love?",
        "Justice in Spades",
        "Yeah, RIP",
        "What a shame.",
        "RED SPY IS IN THE BASE",
        "try fingers, but hole",
        "Woomy!",
        "GET OVER HERE!",
        "Who are you, that do not know your history?",
        "What is a man?",
        "Rip and tear, until it is done.",
        "Praise the sun!"
    ];

    //Ajax
    function ajax(url, onSuccess, onError)
    {
        let request = new XMLHttpRequest();
        request.open('GET', url, true);

        request.onload = function() {
            if (this.status >= 200 && this.status < 400) {
                if(typeof onSuccess === 'function') {
                    onSuccess(this.response);
                }
            } else {
                if(typeof onError === 'function') {
                    onError(this.status, this.response);
                }
            }
        };

        request.onerror = function () {
            console.error('Failed request to ' + url + ', could not connect.');
            if(typeof onError === 'function') {
                onError(false, null);
            }
        }

        request.send();
    }

    //Content switching
    function switchActiveContent(id)
    {
        let link = document.querySelector('a[href="'+id+'"]');
        let content = document.querySelector(id);

        if(id === '#reader') {
            //Switch to reader tab, but do not switch active menu link
            if(activeContent) activeContent.classList.add('hide');
            content.classList.remove('hide');
            activeContent = content;

        } else if (link && content) {
            if(activeLink) activeLink.classList.remove('active');
            if(activeContent) activeContent.classList.add('hide');

            link.classList.add('active');
            content.classList.remove('hide');

            if(activeContent && activeContent.getAttribute('id') === 'reader') {
                closeReader();
            }

            activeLink = link;
            activeContent = content;

        } else {
            console.error('Error: not switching content; link or content element for id ' + id + ' does not exist.');
        }
    }

    //Reader loading
    function loadReaderFile(href)
    {
        reader.innerHTML = "<p>Loading...</p>";
        ajax(href, response => {
            let converter = new showdown.Converter({'tables': true});
            reader.innerHTML = converter.makeHtml(response);
            window.location.hash = href;
            content.classList.add('expand');
        }, () => {
            reader.innerHTML = "<h1>Could not load resource.</h1> <p>An error occurred, unable to display blog post.</p>";
            content.classList.add('expand');
        });

        readerBtn.classList.remove('hide');
    }

    function closeReader()
    {
        reader.innerHTML = "";
        content.classList.remove('expand');
        readerBtn.classList.add('hide');
    }

    //Onload
    window.addEventListener('load', function(){
        content = document.querySelector('.content');
        reader = document.querySelector('#reader');
        readerBtn = document.querySelector('.reader-close');

        //Hide all content
        let contents = document.querySelectorAll('.content-tab');
        contents.forEach(function (element) {
            element.classList.add('hide');
        });

        let hash = window.location.hash ? window.location.hash : '#home';

        //Activate content matching hash in url (or home instead)
        if(hash.includes('blogs/')) {
            let url = hash.slice(1);
            if(document.querySelector('a[href="'+url+'"]')) {
                switchActiveContent('#reader');
                loadReaderFile(url);
            } else {
                switchActiveContent('#home');
            }
        } else {
            switchActiveContent(hash);
        }

        //Add click event handlers for header/footer links
        document.querySelectorAll('header, footer').forEach(element => {
            element.addEventListener('click', event => {
                if(event.target.tagName !== 'A') return;
                let hash = event.target.getAttribute('href');
                switchActiveContent(hash);
            });
        });

        //Add click event handlers for reader links
        document.querySelectorAll('.blog-table a[href$=".md"]').forEach(element => {
            element.addEventListener('click', event => {
                let filename = event.target.getAttribute('href');
                switchActiveContent('#reader');
                loadReaderFile(filename);
                event.preventDefault();
            });
        });
    });

    //Global functions
    comfiture.setupWallpaper = function () {
        let wallpaper = 'a' + (Math.floor(Math.random() * 36) + 1) + '.gif';
        document.querySelector('.background').style.backgroundImage = 'url("backgrounds/'+wallpaper+'")';
    };

    comfiture.printMotd = function () {
        let motd = motds[Math.floor(Math.random() * motds.length)];
        document.write(motd);
    }

    comfiture.showAddresses = function () {
        let a = 'fristi';
        let b = 'subcon.town';
        let c = 'akkos.fritu.re';

        document.querySelectorAll('.em').forEach( element => {
            element.innerHTML = a + '@' + b;
            element.setAttribute('href', 'mailto:' + a + '@' + b);
        });

        document.querySelectorAll('.fv').forEach( element => {
            element.innerHTML = a + '@' + c;
        });
    }

    //Expose comfiture object to document
    window.comfiture = comfiture;
})();