Website/global/global.js

/**
 *
 * @licstart  The following is the entire license notice for the 
 *  JavaScript code in this page.
 *
 * Copyright (C) 2024 Gabriel Weingardt
 *
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend  The above is the entire license notice
 * for the JavaScript code in this page.
 *
 */

/*
 * I am very sorry to the person, who actually takes a look at this javascript
 * Clean code sometimes isn't my greatest strength ;)
 */


/* Global navigation buttons */
/* (L)ink, (P)ath or (SEP)erator, Display Name, Target Link */
navContent = [  
    ["P",           "Home",             ""],
    ["P",           "Contact",          "contact/"],
    ["P",           "Projects",         "projects/"],
    ["P",           "Tutorials",        "tutorials/"],
    ["P",           "Posts",            "posts/"],
    ["SEP"],
    ["P",           "Services",         "services/"],
    ["L",           "Git",              "https://git.weingardt.dev/explore/repos"],
    ["SEP"],
    ["P",           "Website Info",     "info/"]
];

/* Global buttons located in the footer of the page */
/*  Alt Text,                   Target Link,                                                Image Source */
funButtons = [
    ["CC BY-SA 4.0",            "https://creativecommons.org/licenses/by-sa/4.0/",          "global/buttons/cc-by-sa.png"],
    ["Right to repair",         "",                                                         "global/buttons/right2repair.gif"],
    ["Made with VSCodium",      "https://vscodium.com/",                                    "global/buttons/vscodium.png"],
    ["Made on Gnu/Linux",       "https://www.gnu.org/home.en.html",                         "global/buttons/gnu-linux.gif"],
    ["Windows 10, NO",          "",                                                         "global/buttons/win10no.gif"],
//  ["No NFT's",                "",                                                         "global/buttons/nftbutton.gif"],
    ["Anything but Chrome",     "https://librewolf.net/",                                   "global/buttons/nochrome.png"],
    ["UBlock Origin Now!",      "https://ublockorigin.com/",                                "global/buttons/ublock.png"],
    ["Get a Website - Landchad", "https://landchad.net/",                                   "global/buttons/landchad.gif"],
//  ["Internet Privacy Now!",   "https://anonymousplanet.org/",                             "global/buttons/internetprivacy.gif"],
    ["Encrypt Your Shit",       "https://gitlab.com/cryptsetup/cryptsetup",                 "global/buttons/encryptyourshit.gif"],
    ["No Web 3!",               "",                                                         "global/buttons/noweb3.gif"],
];

/* Available Themes located in the footer */
var styles = [  "Neocities", 
                //"Tomorrow", 
                //"Forgotten", 
                "Yotsuba"];

dirDepth = ""
    
/* Update CSS Colorscheme function for themes */
function updateStyle(type){
    function resetBackground(){
        try {
            document.querySelector("body").style.backgroundImage = "none";
            document.querySelector("body").style.backgroundRepeat = "repeat-x";
            document.querySelector("body").style.backgroundPosition = "top";
            document.querySelector("body").style.backgroundBlendMode = "normal";
        } catch { }
    }
    
    var doc = document.documentElement;
    
    /* If type = undefined, default to "tomorrow" */
    if (type == undefined){ type = "Neocities"; }
    if (type == "Yotsuba"){
        doc.style.setProperty("--main-bg-color",        "#fed6af");
        doc.style.setProperty("--main-bg-end-color",    "#ffffee");
        doc.style.setProperty("--main-color",           "#ffffff");
        doc.style.setProperty("--main-fg-color",        "#800000");
        doc.style.setProperty("--main-title-fg-color",  "#800000");

        doc.style.setProperty("--font-family", "Arial, Helvetica, sans-serif");
        doc.style.setProperty("--font-size", "13px");

        resetBackground();
        try {
            document.querySelector("body").style.backgroundImage = "url(" + dirDepth + "global/fade.png)";
        } catch { }
    } /*else if (type == "Tomorrow"){
        doc.style.setProperty("--main-bg-color",        "#1d1f21");
        doc.style.setProperty("--main-bg-end-color",    "#1d1f21");
        doc.style.setProperty("--main-color",           "#282a2e");
        doc.style.setProperty("--main-fg-color",        "#ffffff");
        doc.style.setProperty("--main-title-fg-color",  "#ffffff");

        doc.style.setProperty("--font-family", "Arial, Helvetica, sans-serif");
        doc.style.setProperty("--font-size", "13px");

        resetBackground();
    } else if (type == "Forgotten"){
        doc.style.setProperty("--main-bg-color",        "#282828");
        doc.style.setProperty("--main-bg-end-color",    "#458588");
        doc.style.setProperty("--main-color",           "#a89984");
        doc.style.setProperty("--main-fg-color",        "#282828");
        doc.style.setProperty("--main-title-fg-color",  "#7c7c7c");

        doc.style.setProperty("--font-family", "FreePixel");
        doc.style.setProperty("--font-size", "13px");

        resetBackground();
    } */else if (type == "Neocities"){
        doc.style.setProperty("--main-bg-color",        "#000000");
        doc.style.setProperty("--main-bg-end-color",    "#468184");
        doc.style.setProperty("--main-color",           "#00000055");
        doc.style.setProperty("--main-fg-color",        "#ffffff");
        doc.style.setProperty("--main-title-fg-color",  "#2c9080");
        
        doc.style.setProperty("--font-family", "FreePixel");
        doc.style.setProperty("--font-size", "15px");
        
        try {
            document.querySelector("body").style.backgroundImage = "url(" + dirDepth + "global/bg.png)";
            document.querySelector("body").style.backgroundRepeat = "repeat";
            document.querySelector("body").style.backgroundBlendMode = "overlay";
        } catch { }
    } else if (type == "Indepth"){
        doc.style.setProperty("--main-bg-color",        "#000000");
        doc.style.setProperty("--main-bg-end-color",    "#080808");
        doc.style.setProperty("--main-color",           "#000000");
        doc.style.setProperty("--main-fg-color",        "#ffffff");
        doc.style.setProperty("--main-title-fg-color",  "#2c9080");
        
        doc.style.setProperty("--font-family", "FreePixel");
        doc.style.setProperty("--font-size", "15px");
        
        resetBackground();
        try {
            document.querySelector("body").style.backgroundImage = "url(" + dirDepth + "global/bgtiled.gif)";
            document.querySelector("body").style.backgroundRepeat = "repeat";
            document.querySelector("body").style.backgroundBlendMode = "overlay";
        } catch { }
    }
}

function ButtonToggle(checkstate){
    try {
        if (checkstate){
            document.querySelector(".button-container").style.display = "flex";
        } else {
            document.querySelector(".button-container").style.display = "none";
        }
    } catch { }
}

function LoadWebsite(){

    dirDepth = document.getElementById("toplevel").getAttribute("data-");
    document.getElementById("toplevel").textContent = "";

    const WEBSIDENAME = document.URL;

    var footing = document.getElementById("footnote"); 


    /* Footer Section */

    /* Image Buttons */

    var title = document.createElement("h2");
    title.setAttribute("class", "titlebar");
    title.textContent = "Page Info";

    footing.appendChild(title);

    if (document.getElementById("please-no-buttons") == null){
        var button_container = document.createElement("div");
        button_container.setAttribute("class", "button-container");

        for (let i = 0; i < funButtons.length; i++) {
            link = document.createElement("a");
            if (funButtons[Number(i)][1] != ""){
                link.setAttribute("href", funButtons[Number(i)][1]);
            }
            link.setAttribute("target", "_blank");    

            img = document.createElement("img");
            img.setAttribute("src", dirDepth + funButtons[Number(i)][2]);
            img.setAttribute("alt", funButtons[Number(i)][0]);
            img.setAttribute("class", "license-img");
            link.appendChild(img);

            button_container.appendChild(link);
        }
        footing.appendChild(button_container);
    }


    /* Global "Page last updated" text, reading the modified date of the page */

    /* Have to flip Months w. Days for European style Date MM.DD.YYYY to DD.MM.YYYY */
    var docDate = ((("" + document.lastModified).replaceAll(",", " at ")).replaceAll("/", ".")).split(".");
    docSave = docDate[0];
    docDate[0] = docDate[1];
    docDate[1] = docSave;
    docDate = "Page last updated: " + ((docDate.toString().replaceAll(",", ".")).replaceAll(" ", " at "));

    var last_updated = document.createElement("p");
    last_updated.setAttribute("class", "text-center");
    last_updated.textContent = docDate;

    footing.appendChild(last_updated);

    // Footer

    const LICENCE_LINK = "https://creativecommons.org/licenses/by-sa/4.0/";
    const LICENCE_NAME = "CC BY-SA 4.0";

    var span = document.createElement("p");
    span.setAttribute("class", "nobr");
    span.setAttribute("class", "text-center");
    span.textContent = "Website licensed under\u00A0";

    var span_license = document.createElement("a");
    span_license.setAttribute("href", LICENCE_LINK);
    span_license.setAttribute("class", "nobr");
    span.setAttribute("class", "text-center");
    span_license.textContent = LICENCE_NAME;
    span.appendChild(span_license);

    footing.appendChild(span);

    // Webside name

    var webside_name = document.createElement("a");
    webside_name.setAttribute("class", "text-center");
    webside_name.setAttribute("href", WEBSIDENAME);
    webside_name.textContent = WEBSIDENAME;

    footing.appendChild(webside_name);

    var button_span = document.createElement("span");
    button_span.setAttribute("class", "prefSpan");
    
   
    
    var button_select_label = document.createElement("label");
    button_select_label.textContent = "Style: ";
    button_select_label.setAttribute("for", "styleselector");
    button_select_label.setAttribute("class", "styleSelector"); 
    
    var button_select = document.createElement("select");
    button_select.id = "styleselector";
    button_select.setAttribute("class", "styleSelector");
    
    
    for (let i = 0; i < styles.length; i++) {
        var button_item = document.createElement("option");
        button_item.textContent = styles[Number(i)];
        button_item.value = styles[Number(i)];
        if (styles[Number(i)] === localStorage.getItem("style")) { button_item.selected = "selected"; }

        button_select.appendChild(button_item);
    }
    
    if (localStorage.getItem("showButtons") == undefined) localStorage.setItem("showButtons", "true")

    var button_check_buttons = document.createElement("input");
    button_check_buttons.type = "checkbox";
    button_check_buttons.id = "buttonToggle";
    button_check_buttons.setAttribute("class", "buttonToggle");
    if (localStorage.getItem("showButtons") == "true") button_check_buttons.checked = true;
    
    button_check_buttons.addEventListener("change", (event) => { 
        ButtonToggle(button_check_buttons.checked);
        localStorage.setItem("showButtons", button_check_buttons.checked);
    });
    
    var button_check_label = document.createElement("label");
    button_check_label.textContent = " Show Buttons";
    button_check_label.setAttribute("for", "buttonToggle");
    button_check_label.setAttribute("class", "buttonToggle");
    
    button_span.appendChild(button_check_buttons);
    button_span.appendChild(button_check_label);
    
    if (document.getElementById("please-no-buttons") != null){
        button_check_buttons.checked = false;
        button_check_buttons.style.visibility = "hidden";
        button_check_label.style.visibility = "hidden";
    }
    
    button_span.appendChild(button_select_label);
    button_select_label.appendChild(button_select);
    
    if (document.getElementById("please-no-buttons") == null) ButtonToggle(localStorage.getItem("showButtons") == "true");
    else ButtonToggle(false);
    
    
    footing.appendChild(button_span);

    if(dirDepth === ""){
        document.getElementById("agestamp").textContent = new Date(new Date().getTime() - new Date("March, 30, 2006").getTime()).getFullYear() - 1970;
    }



    /* Navbar Section */

    if (document.getElementById("navbar") != null){

        var selectedNav = document.getElementById("selected-nav").getAttribute("data-");

        for (let i = 0; i < navContent.length; i++) {
            if (navContent[Number(i)][0] === "SEP"){
                tmpAdd = document.createElement("hr");
                tmpAdd.classList.add("navSep");
                document.getElementById("navbar").appendChild(tmpAdd);

            } else {
                href = navContent[Number(i)][2];
                sel = navContent[Number(i)][1].toLowerCase().includes(selectedNav.toLowerCase());

                if (navContent[Number(i)][0] === "P"){
                    href = dirDepth + href;
                }

                tmpAdd = document.createElement("a");
                tmpAdd.textContent = navContent[Number(i)][1];
                tmpAdd.setAttribute("href", href);
                tmpAdd.classList.add("nav");

                if (sel) {
                    tmpAdd.classList.add("selected-nav");
                }


                document.getElementById("navbar").appendChild(tmpAdd);
            }
        } 
    }

    var stylebutton = document.getElementById("styleselector");
    stylebutton.addEventListener("change", (event) => {
        localStorage.setItem("style", event.target.value);
        updateStyle(event.target.value);
    });
    
    if (document.getElementById("static-theme") == null){
        if (localStorage.getItem("style") == "Yotsuba" || localStorage.getItem("style") == "Neocities" || localStorage.getItem("style") == undefined){
            updateStyle(localStorage.getItem("style"));
        }
    } else {
        updateStyle(document.getElementById("static-theme").getAttribute("data-"));
        stylebutton.disabled = true;
        button_select_label.style.visibility = "hidden";
    }
}

document.addEventListener("DOMContentLoaded", LoadWebsite);


updateStyle(localStorage.getItem("style"));