md-cms/edit/js/main.js

/**
 * Removes a given element
 *
 * @param {DOMElement} id ID of the element to tear down.
 *
 * @return {void}
 */
async function removeElement(elem) {
    while (elem.firstChild) {
        elem.removeChild(elem.firstChild);
    }
    elem.parentElement.removeChild(elem);
}


/**
 * Function toggleHash toggles a specified location.hash value.
 *
 * @param {string} identifier ID to toggle.
 *
 * @return {void}
 */
function toggleHash(identifier) {
    if (window.location.hash == "#" + identifier) window.location.hash = "";
    else window.location.hash = "#" + identifier;
}

document.addEventListener("DOMContentLoaded", function() {

    let translations = {
        "en" : {
            "uploadFile"         : "Upload file",
            "submit"             : "Submit",
            "generate"           : "Generate",
            "embedCodeGenerator" : "Generator for embed code",
            "helpEmbedCode"      : "Here you can create embed code.",
            "singleObjectTile"   : "Single object (tile)",
            "singleObjectDetails": "Single object (details)",
            "singleCollection"   : "Single collection",
            "exhibitionCalendar" : "Exhibition calendar",
            "eventCalendar"      : "Event calendar",
        },
        "de" : {
            "uploadFile"         : "Eine Datei heraufladen",
            "submit"             : "Abschicken",
            "generate"           : "Generieren",
            "embedCodeGenerator" : "Generator für Einbettungen",
            "helpEmbedCode"      : "Hier können sie den embed-code generieren.",
            "singleObjectTile"   : "Einzelobjekt (Kachel)",
            "singleObjectDetails": "Einzelobjekt (Details)",
            "singleCollection"   : "Einzelsammlung",
            "exhibitionCalendar" : "Ausstellungskalender",
            "eventCalendar"      : "Veranstaltungen (Kalender)",
        }
    };

    var debugging = false;

    /**
     * Function queryPage queries a web page and runs the specified function over the output.
     *
     * @param string   url   URL to query.
     * @param function func  Callback function to run on the request after loading.
     * @param boolean  debug Enable / disable debug mode.
     *
     * @return boolean
     */
    function queryPage (url, func, debug = false) {

        let request     = new XMLHttpRequest();
        request.open('GET', url);
        request.setRequestHeader("Cache-Control", "no-cache");
        request.responseType = 'htm';
        request.send();
        request.onload = function() {

            func(request, debug);
        };

    }

    /**
     * Returns a requested translation from an array in the currently used language.
     *
     * @param mixed[] list      Translation variable.
     * @param string  specifier Specifies which translation to get.
     *
     * @return string
     */
    function getTranslation(list, specifier) {

        let preferedLang = document.getElementsByTagName("html")[0].getAttribute("lang");

        if (list[preferedLang] !== undefined && list[preferedLang][specifier] !== null) return list[preferedLang][specifier];
        return list["en"][specifier];

    }

    /**
     * Function to get all GET variables passed by user
     * Based on gion_13's answer at https://stackoverflow.com/questions/12049620/how-to-get-get-variables-value-in-javascript
     *
     * @return string[]
     */
    function getGETvars () {

        var output = {};
        if(document.location.toString().indexOf('?') !== -1) {
            var query = document.location
                           .toString()
                           // get the query string
                           .replace(/^.*?\?/, '')
                           // and remove any existing hash string (thanks, @vrijdenker)
                           .replace(/#.*$/, '')
                           .split('&');

            for(var i = 0, l = query.length; i < l; i++) {
                var aux = decodeURIComponent(query[i]).split('=');
                output[aux[0]] = aux[1];
            }
        }
        return (output);

    }

    /**
     * Allow toggling of navigation.
     */
    (function() {

        let navigationMode = window.localStorage.getItem("navigationMode");
        if (navigationMode === undefined || navigationMode === null) {
            window.localStorage.setItem("navigationMode", "1");
            navigationMode = "1";
        }

        if (navigationMode === "0") {
            document.getElementById("mainNav").classList.toggle("invisible");
        }

        document.getElementById("toggleNavigation").addEventListener("click", function(e) {

            if (navigationMode === "0") {
                window.localStorage.setItem("navigationMode", "1");
                navigationMode = "1";
            }
            else {
                window.localStorage.setItem("navigationMode", "0");
                navigationMode = "0";
            }

            document.getElementById("mainNav").classList.toggle("invisible");

        });

    })();

    /**
     * Open the URL given in the href attribute of the element with the given ID.
     *
     * @param {string} identifier ID of the element with whose href to replace location.href
     *
     * @return {void}
     */
    function replaceWindowById(identifier) {

        var link = document.getElementById(identifier);

        if (link != null) {
            window.location.href = link.href;
        }
    }

    (async function() {

        let trigger = document.getElementById("uploadFile");
        if (trigger === undefined || trigger === null) return;

        trigger.addEventListener("click", function(e) {

            let overlay = document.createElement("div");
            overlay.classList.add("overlay");

            let uploadForm = document.createElement("form");
            uploadForm.enctype = "multipart/form-data";
            uploadForm.action = "files.php";
            uploadForm.method = "POST";

            let uploadLabel = document.createElement("label");
            uploadLabel.textContent = getTranslation(translations, "uploadFile");
            uploadLabel.for = "fileUploadInput";

            let uploadSize = document.createElement("input");
            uploadSize.type = "hidden";
            uploadSize.name = "MAX_FILE_SIZE";
            uploadSize.value = "300000";

            let uploadTask = document.createElement("input");
            uploadTask.type = "hidden";
            uploadTask.name = "task";
            uploadTask.value = "upload";

            let uploadInput = document.createElement("input");
            uploadInput.type = "file";
            uploadInput.id = "fileUploadInput";
            uploadInput.name = "file";

            let uploadButton = document.createElement("button");
            uploadButton.type = "submit";
            uploadButton.textContent = getTranslation(translations, "submit");

            uploadForm.appendChild(uploadLabel);
            uploadForm.appendChild(uploadSize);
            uploadForm.appendChild(uploadTask);
            uploadForm.appendChild(uploadInput);
            uploadForm.appendChild(uploadButton);

            overlay.appendChild(uploadForm);
            document.getElementsByTagName("body")[0].appendChild(overlay);

            document.getElementsByTagName("body")[0].addEventListener('keydown', async function(e) {
                if (e.keyCode != 27) return;
                removeElement(overlay);
            });

            queryPage(
                encodeURI('./files.php'),
                function (request) {
                    let allFiles = JSON.parse(request.response);

                    for (let i = 0, max = allFiles.length; i < max; i++) {
                        console.log(allFiles[i]);
                    }

                });

        });

    })();

    /**
     * Embed code generator.
     */
    (function() {

        function generateToolTip(toolTipID, toolTipText, toolTipTitle = "", triggerId = "") {

            let trigger = document.createElement("span");

            trigger.classList.add("newToolTipTag");
            trigger.classList.add("helpToolTip");
            trigger.setAttribute("data-for", toolTipID);

            let toolTip = document.createElement("div");
            toolTip.id = "tooltip_" + toolTipID;
            toolTip.classList.add("newToolTip");
            toolTip.setAttribute("data-title", toolTipTitle);

            let toolTipCont = document.createElement("p");
            toolTipCont.textContent = toolTipText;
            toolTip.appendChild(toolTipCont);

            trigger.appendChild(toolTip);

            return trigger;

        }

        let generator = document.getElementById("embedGenerator");
        if (generator === undefined || generator === null) return;

        // Define generator types

        let generatorTypes = [
            ["", "", false],
            ["singleObjectTile",     getTranslation(translations, "singleObjectTile"),    true],
            ["singleObjectDetails",  getTranslation(translations, "singleObjectDetails"), true],
            ["singleCollectionTile", getTranslation(translations, "singleCollection"),    true],
            ["exhibitionCalendar",   getTranslation(translations, "exhibitionCalendar"),  true],
            ["eventCalendar",        getTranslation(translations, "eventCalendar"),       true],
        ];

        // Add help tooltip

        let generatorLabelSpan = document.createElement("span");
        generatorLabelSpan.classList.add("labelLine");

        let generatorLabel = document.createElement("label");
        generatorLabel.textContent = getTranslation(translations, "embedCodeGenerator");

        generatorLabelSpan.appendChild(generatorLabel);
        generatorLabelSpan.appendChild(generateToolTip("embedGeneratorToolTip", getTranslation(translations, "helpEmbedCode"), getTranslation(translations, "embedCodeGenerator")));

        generator.appendChild(generatorLabelSpan);

        let selectType = document.createElement("select");

        for (let i = 0, max = generatorTypes.length; i < max; i++) {
            let generatorOption = document.createElement("option");
            generatorOption.value       = generatorTypes[i][0];
            generatorOption.textContent = generatorTypes[i][1];
            generatorOption.setAttribute("data-useSpecifier", generatorTypes[i][2]);
            selectType.appendChild(generatorOption);
        }

        generator.appendChild(selectType);

        let generatorSpecifier = document.createElement("input");
        generatorSpecifier.classList.add("invisible");
        generator.appendChild(generatorSpecifier);

        let buttonGenerate = document.createElement("a");
        buttonGenerate.classList.add("buttonLike");
        buttonGenerate.textContent = getTranslation(translations, "generate");
        generator.appendChild(buttonGenerate);

        let generatorField = document.createElement("fieldset");

        let generatorFieldCont = document.createElement("div");
        generatorField.appendChild(generatorFieldCont);

        let generatorLegend = document.createElement("legend");
        generatorField.appendChild(generatorLegend);

        selectType.addEventListener('change', function(e) {

            generatorSpecifier.value = "";
            if (selectType.options[selectType.selectedIndex].getAttribute("data-useSpecifier") == "true") {
                generatorSpecifier.classList.remove("invisible");
            }
            else generatorSpecifier.classList.add("invisible");

            generatorLegend.textContent = selectType.options[selectType.selectedIndex].textContent;
            generatorFieldCont.textContent = "";

        });

        function runGenerator() {
            if (selectType.value == "") return;
            generatorFieldCont.textContent = "[" + selectType.value + "]";
            if (generatorSpecifier.value != "") {
                generatorFieldCont.textContent += "{" + generatorSpecifier.value + "}";
            }
        }

        generatorSpecifier.addEventListener('keydown', function(e) {
            if (e.keyCode != 13) return;
            e.stopPropagation(); e.preventDefault();
            runGenerator();
        });
        buttonGenerate.addEventListener('click', function() { runGenerator(); });

        generator.appendChild(generatorField);

        if (debugging === true) {
            console.log("Generated generator for pseudocode for embedding from museum-digital.");
        }

    })();

});