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",
            "filename"                  : "File Name",
            "filetype"                  : "File Type",
            "filesize"                  : "File Size",
            "filemtime"                 : "Last modified",
            "preview"                   : "Preview",
            "generate"                  : "Generate",
            "embedCodeGenerator"        : "Generator for embed code",
            "helpEmbedCode"             : "Here you can create embed code.",
            "singleObjectTile"          : "Single object (tile)",
            "singleObjectDetails"       : "Single object (details)",
            "singleCollectionTile"      : "Single collection (tile)",
            "singleCollectionDetails"   : "Single collection (details)",
            "singleInstitutionTile"     : "Single institution (tile)",
            "singleInstitutionDetails"  : "Single institution (details)",
            "singleExhibitionTile"      : "Single exhibition (tile)",
            "singleExhibitionDetails"   : "Single exhibition (details)",
            "singleEventTile"           : "Single event (tile)",
            "singleEventDetails"        : "Single event (details)",
            "exhibitionCalendar"        : "Exhibition calendar",
            "eventCalendar"             : "Event calendar",
        },
        "de" : {
            "uploadFile"                : "Eine Datei heraufladen",
            "submit"                    : "Abschicken",
            "filename"                  : "Dateiname",
            "filetype"                  : "Dateityp",
            "filesize"                  : "Größe",
            "filemtime"                 : "Zuletzt bearbeitet",
            "preview"                   : "Vorschau",
            "generate"                  : "Generieren",
            "embedCodeGenerator"        : "Generator für Einbettungen",
            "helpEmbedCode"             : "Hier können sie den embed-code generieren.",
            "singleObjectTile"          : "Einzelobjekt (Kachel)",
            "singleObjectDetails"       : "Einzelobjekt (Details)",
            "singleCollectionTile"      : "Einzelsammlung (Kachel)",
            "singleCollectionDetails"   : "Einzelsammlung (Details)",
            "singleInstitutionTile"     : "Einzelinstitution (Kachel)",
            "singleInstitutionDetails"  : "Einzelinstitution (Details)",
            "singleExhibitionTile"      : "Einzelne Ausstellung (Kachel)",
            "singleExhibitionDetails"   : "Einzelne Ausstellung (Details)",
            "singleEventTile"           : "Einzelne Veranstaltung (Kachel)",
            "singleEventDetails"        : "Einzelne Veranstaltung (Details)",
            "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 uploadBackTo = document.createElement("input");
            uploadBackTo.type = "hidden";
            uploadBackTo.name = "backTo";
            uploadBackTo.value = location.href;

            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(uploadBackTo);
            uploadForm.appendChild(uploadInput);
            uploadForm.appendChild(uploadButton);

            overlay.appendChild(uploadForm);


            /**
             * Function for generating file list.
             *
             * @param {DOMElement} parentElement Parent element to bind to.
             * @param {function}   callback      Function to call on clicking on a file name.
             * @param {string}     sortOrder     Sort order.
             *
             * @return {void}
             */
            function generateFileList(parentElement, callback, sortOrder = '') {

                let fileListDiv = document.createElement("div");
                fileListDiv.id = "fileListDiv";

                let fileList = document.createElement("table");
                fileList.classList.add("fileList");

                let target = './files.php';
                if (sortOrder != '') {
                    target += '?sort=' + sortOrder;
                }

                function listFileListContents(target) {

                    queryPage(
                        encodeURI(target),
                        function (request) {
                            let allFiles = JSON.parse(request.response);

                            // Generate title line with sorting functionality
                            let fileTHLine = document.createElement("tr");

                            let fileLineTHName = document.createElement("th");                     // Add TH for file name
                            fileLineTHName.textContent = getTranslation(translations, "filename"); // Display th contents
                            fileLineTHName.addEventListener('click', function(e) {
                                while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
                                listFileListContents('./files.php');
                            });
                            fileTHLine.appendChild(fileLineTHName);

                            let fileLineTHType = document.createElement("th");                     // Add TH for file type
                            fileLineTHType.textContent = getTranslation(translations, "filetype"); // Display th contents
                            fileLineTHType.addEventListener('click', function(e) {
                                while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
                                listFileListContents('./files.php?sort=type');
                            });
                            fileTHLine.appendChild(fileLineTHType);

                            let fileLineTHMTime = document.createElement("th");                      // Add TH for filemtime
                            fileLineTHMTime.textContent = getTranslation(translations, "filemtime"); // Display th contents
                            fileLineTHMTime.addEventListener('click', function(e) {
                                while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
                                listFileListContents('./files.php?sort=mtime');
                            });
                            fileTHLine.appendChild(fileLineTHMTime);

                            let fileLineTHSize = document.createElement("th");                     // Add TH for file size
                            fileLineTHSize.textContent = getTranslation(translations, "filesize"); // Display th contents
                            fileLineTHSize.addEventListener('click', function(e) {
                                while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
                                listFileListContents('./files.php?sort=size');
                            });
                            fileTHLine.appendChild(fileLineTHSize);

                            fileList.appendChild(fileTHLine);                           // Append headline line to table

                            for (let i = 0, max = allFiles.length; i < max; i++) {      // Loop over API outputs and print file lines.

                                let fileLine = document.createElement("tr");

                                let fileLineName = document.createElement("td");        // Add TD for displaying file name and main action
                                fileLineName.textContent = allFiles[i]["name"];         // Display file name
                                fileLineName.addEventListener('click', function(e) {
                                    callback("../files/" + allFiles[i]["name"]);
                                });
                                fileLine.appendChild(fileLineName);

                                let fileLineType = document.createElement("td");        // Add TD for displaying file type
                                fileLineType.textContent = allFiles[i]["type"];         // Display file name
                                fileLine.appendChild(fileLineType);

                                let fileLineMTime = document.createElement("td");        // Add TD for displaying filemtime
                                fileLineMTime.textContent = allFiles[i]["mtime"];        // Display file name
                                fileLine.appendChild(fileLineMTime);

                                let fileLineSize = document.createElement("td");        // Add TD for displaying filemtime
                                fileLineSize.textContent = allFiles[i]["size"];         // Display file name
                                fileLine.appendChild(fileLineSize);

                                let fileLinePreview = document.createElement("td");                    // Add TD for seing preview
                                fileLinePreview.textContent = getTranslation(translations, "preview"); // Display symbol
                                fileLinePreview.addEventListener('click', function(e) {
                                    document.getElementById("filePreview").src  = "../files/" + allFiles[i]["name"];
                                    document.getElementById("filePreview").type = allFiles[i]['type'];
                                });
                                fileLine.appendChild(fileLinePreview);

                                let fileLineDelete = document.createElement("td");    // Add TD for deleting file
                                let fileLineDeleteLink = document.createElement("a"); // Add a.
                                fileLineDeleteLink.textContent = " \u2326 ";          // Delete Symbole
                                fileLineDeleteLink.href = "files.php?task=delete&subject=" + encodeURI(allFiles[i]["name"]) + "&backTo=" + encodeURI(location.href);
                                fileLineDelete.appendChild(fileLineDeleteLink);
                                fileLine.appendChild(fileLineDelete);

                                fileList.appendChild(fileLine);
                            }

                        }
                    );
                }
                listFileListContents(target);

                // Append to parent element
                fileListDiv.appendChild(fileList);
                parentElement.appendChild(fileListDiv);

                // Offer preview
                let preview = document.createElement("embed");
                preview.id = "filePreview";
                parentElement.appendChild(preview);
            }

            let fileOverlayRight = document.createElement("div");
            generateFileList(fileOverlayRight, function(value) { location.href = value; });
            overlay.appendChild(fileOverlayRight);
            document.getElementsByTagName("body")[0].appendChild(overlay);

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

        });

    })();

    /**
     * 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, "singleCollectionTile"),       true],
            ["singleCollectionDetails",     getTranslation(translations, "singleCollectionDetails"),    true],
            ["singleInstitutionTile",       getTranslation(translations, "singleInstitutionTile"),      true],
            ["singleInstitutionDetails",    getTranslation(translations, "singleInstitutionDetails"),   true],
            ["singleExhibitionTile",        getTranslation(translations, "singleExhibitionTile"),       true],
            ["singleExhibitionDetails",     getTranslation(translations, "singleExhibitionDetails"),    true],
            ["singleEventTile",             getTranslation(translations, "singleEventTile"),            true],
            ["singleEventDetails",          getTranslation(translations, "singleEventDetails"),         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.");
        }

    })();

});