511 lines
22 KiB
JavaScript
511 lines
22 KiB
JavaScript
/**
|
|
* 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 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";
|
|
uploadInput.value = "";
|
|
|
|
let uploadButton = document.createElement("button");
|
|
uploadButton.type = "submit";
|
|
uploadButton.textContent = getTranslation(translations, "submit");
|
|
|
|
uploadForm.appendChild(uploadLabel);
|
|
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.");
|
|
}
|
|
|
|
})();
|
|
|
|
});
|
|
|