jrenslin/md-cms
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added interpreter for pseudocode for displaying exhibitions, events.

Browse Source 
Added basic search.
Added object pages.
This commit is contained in:
Joshua Ramon Enslin
2018-06-15 11:26:25 +02:00
committed by Stefan Rohde-Enslin
parent a49746ab10
commit 80485a98ab
19 changed files with 1573 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
js/main.js
View File

@@ -14,12 +14,46 @@ document.addEventListener("DOMContentLoaded", function() {
let translations = {
"en" : {
"More" : "More",
"MoreAtMuseumDigital" : "museum-digital",
"ObjectAtMuseumDigital" : "Object entry at museum-digital",
"Collection" : "Collection",
"object_material_technique" : "Material / Technique",
"object_dimensions" : "Dimensions",
"Metadata" : "Metadata",
"LastUpdated" : "Last Updated",
"Licence" : "Licence",
"Tags" : "Tags",
"People" : "People",
"Places" : "Places",
"Times" : "Times",
"Search" : "Search",
"SearchingFor" : "Searching for",
"... who" : "... who",
"... where" : "... where",
"... when" : "... when",
"eventType1" : "Created",
},
"de" : {
},
"hu" : {
"More" : "Mehr",
"MoreAtMuseumDigital" : "museum-digital",
"ObjectAtMuseumDigital" : "Objekt bei museum-digital",
"Collection" : "Sammlung",
"object_material_technique" : "Material / Technik",
"object_dimensions" : "Ausmaße",
"Metadata" : "Metadaten",
"LastUpdated" : "Zuletzt geupdatet",
"Licence" : "Lizenz",
"Tags" : "Schlagworte",
"People" : "Personen",
"Places" : "Orte",
"Times" : "Zeiten",
"Search" : "Suche",
"SearchingFor" : "Suche nach",
"... who" : "... wer",
"... where" : "... wo",
"... when" : "... wann",
"eventType1" : "Hergestellt",
}
};
@@ -108,6 +142,13 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
(function() {
let toTranslate = document.getElementsByClassName("toTranslate");
for (let i = 0, max = toTranslate.length; i < max; i++) {
console.log(toTranslate[i].getAttribute("data-content"));
toTranslate[i].textContent = getTranslation(translations, toTranslate[i].getAttribute("data-content"));
}
})();
});

480
js/mdCalendar.js Normal file
View File

@@ -0,0 +1,480 @@
/**
* mdCalendar.js
*/
document.addEventListener("DOMContentLoaded", function() {
/**
* @var {array} translations Array of all translations.
*/
let translations = {
"en" : {
"dow0" : "Sunday",
"dow1" : "Monday",
"dow2" : "Tuesday",
"dow3" : "Wednesday",
"dow4" : "Thursday",
"dow5" : "Friday",
"dow6" : "Saturday",
"mon0" : "January",
"mon1" : "February",
"mon2" : "March",
"mon3" : "April",
"mon4" : "May",
"mon5" : "June",
"mon6" : "July",
"mon7" : "August",
"mon8" : "September",
"mon9" : "October",
"mon10" : "November",
"mon11" : "December",
"Today" : "Today",
"Title" : "Title",
"Start" : "Start",
"End" : "End",
"Location" : "Location"
},
"de" : {
"dow0" : "Sonntag",
"dow1" : "Montag",
"dow2" : "Dienstag",
"dow3" : "Mittwoch",
"dow4" : "Donnerstag",
"dow5" : "Freitag",
"dow6" : "Samstag",
"mon0" : "Januar",
"mon1" : "Februar",
"mon2" : "März",
"mon3" : "April",
"mon4" : "Mai",
"mon5" : "Juni",
"mon6" : "Juli",
"mon7" : "August",
"mon8" : "September",
"mon9" : "Oktober",
"mon10" : "November",
"mon11" : "Dezember",
"Today" : "Jetzt",
"Title" : "Titel",
"Start" : "Beginn",
"End" : "Ende",
"Location" : "Ort"
},
"hu" : {
"dow0": "Vas\u00e1rnap",
"dow1": "H\u00e9tf\u0151",
"dow2": "Kedd",
"dow3": "Szerda",
"dow4": "Cs\u00fct\u00f6rt\u00f6k",
"dow5": "P\u00e9ntek",
"dow6": "Szombat",
"mon0": "Janu\u00e1r",
"mon1": "Febru\u00e1r",
"mon2": "M\u00e1rcius",
"mon3": "\u00c1prilis",
"mon4": "M\u00e1jus",
"mon5": "J\u00fanius",
"mon6": "J\u00falius",
"mon7": "Augusztus",
"mon8": "Szeptember",
"mon9": "Okt\u00f3ber",
"mon10": "November",
"mon11": "December",
"Today": "Ma",
"Title": "C\u00edm",
"Start": "Nyit",
"End": "Bez\u00e1r",
"Location": "Helysz\u00edn"
}
}
/**
* @var {boolean} Toggle debugging.
*/
let 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);
};
}
/**
* Removes all children of an element.
*
* @param {string} id ID of the element to tear down.
*
* @return {void}
*/
function emptyElement(element) {
while (element.firstChild) {
emptyElement(element.firstChild);
}
element.parentNode.removeChild(element);
if (debugging === true) {
console.log("Removed element:");
console.log(element);
}
}
function tearDownById(id) {
let target = document.getElementById(id);
if (target !== null) emptyElement(target);
}
/**
* 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 create calendar.
*/
function createCalendarTable(target, events) {
let startOfWeek = 1; // The week starts on Monday.
let endOfWeek = 0; // The week ends on Sunday.
let calLocale = document.getElementsByTagName("html")[0].getAttribute("lang");
if (calLocale === undefined || calLocale === null) calLocale = "en";
function removeToolTips() {
let toolTips = document.getElementsByClassName("mdCToolTip");
for (let i = 0, max = toolTips.length; i < max; i++) {
emptyElement(toolTips[i]);
}
}
/**
* Gets all days to display per month.
* Adapted version of function described in https://stackoverflow.com/a/13146828.
*
* @param {int} The month number, 0 based
* @param {int} The year, not zero based, required to account for leap years
*
* @return {Date[]} List with date objects for each day of the month
*/
function getDaysInMonth(month, year) {
var date = new Date(year, month, 1);
var days = [];
// If the weekday of the first of the month does not equal 1 (Monday),
// get days until the last monday before the month.
if (date.getDay() !== startOfWeek) {
while (date.getDay() !== startOfWeek) {
date.setDate(date.getDate() - 1);
days.unshift(new Date(date));
}
}
date = new Date(year, month, 1);
// Get days of the month
while (date.getMonth() === month) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
// If the weekday of the first of the month does not equal 1 (Monday),
// get days until the last monday before the month.
while (date.getDay() !== startOfWeek) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
events = (function() {
let colorSchemeLength = 29;
for (var i = 0, max = events.length; i < max; i++) {
let hash = 0;
for (var j = 0, maxj = events[i].name.length; j < maxj; j++) {
hash = events[i].name.charCodeAt(j) + hash;
}
hash = hash % (colorSchemeLength) - 1;
events[i].color = hash;
}
return events;
})();
let d = new Date();
let year;
if (target.getAttribute("data-year") !== null) year = parseInt(target.getAttribute("data-year"));
else year = d.getFullYear();
let month;
if (target.getAttribute("data-month") !== null) month = parseInt(target.getAttribute("data-month") - 1);
else month = d.getMonth();
// Create outer div
let mdCalDiv = document.createElement("div");
mdCalDiv.classList.add("mdCalendar");
/**
* Creater header line of the calendar.
*/
(function() {
let mdCalTitleLine = document.createElement("header");
mdCalTitleLine.classList.add("mdCTitleLine");
let mdCalTitle = document.createElement("h3");
mdCalTitle.textContent = getTranslation(translations, "mon" + month.toString());
if (year != d.getFullYear()) mdCalTitle.textContent = mdCalTitle.textContent + " (" + year + ")";
mdCalTitleLine.appendChild(mdCalTitle);
let mdCalNav = document.createElement("div");
mdCalNav.classList.add("mdCNav");
mdCalTitleLine.appendChild(mdCalNav);
let mdCalNavPrev = document.createElement("a");
mdCalNavPrev.href = target.getAttribute("data-prev");
mdCalNavPrev.rel = "prev";
mdCalNavPrev.classList.add("mdCNavPrev");
mdCalNav.appendChild(mdCalNavPrev);
let mdCalNavNext = document.createElement("a");
mdCalNavNext.href = target.getAttribute("data-next");
mdCalNavNext.rel = "next";
mdCalNavNext.classList.add("mdCNavNext");
mdCalNav.appendChild(mdCalNavNext);
let mdCalNavToday = document.createElement("a");
mdCalNavToday.href = target.getAttribute("data-today");
mdCalNavToday.textContent = getTranslation(translations, "Today");
mdCalNav.appendChild(mdCalNavToday);
mdCalTitleLine.appendChild(mdCalNav);
mdCalDiv.appendChild(mdCalTitleLine);
})();
/**
* Create table.
*/
let table = document.createElement("table");
table.classList.add("mdCTable");
let thead = document.createElement("thead");
let theadTr = document.createElement("tr");
for (let i = 1, max = 7; i < max; i++) {
let th = document.createElement("th");
th.textContent = getTranslation(translations, "dow" + i.toString());
theadTr.appendChild(th);
}
let th = document.createElement("th");
th.textContent = getTranslation(translations, "dow0");
theadTr.appendChild(th);
thead.appendChild(theadTr);
table.appendChild(thead);
let tbody = document.createElement("tbody");
let days = getDaysInMonth(month, year);
let tr;
let daysTDs = [];
function createSingleEventOverlay(e, parentElement, data) {
let toolTip = document.createElement("table");
toolTip.classList.add("mdCToolTip");
let tableData = [];
tableData.push(["Title", data["name"]]);
if (data["start"] !== undefined) tableData.push(["Start", data["start"]]);
if (data["end"] !== undefined) tableData.push(["End", data["end"]]);
if (data["place"] !== undefined) tableData.push(["Location", data["place"]]);
for (let i = 0, max= tableData.length; i < max; i++) {
let nameRow = document.createElement("tr");
let nameTh = document.createElement("th");
nameTh.textContent = getTranslation(translations, tableData[i][0]);
nameRow.appendChild(nameTh);
let nameTd = document.createElement("td");
nameTd.textContent = tableData[i][1];
nameRow.appendChild(nameTd);
toolTip.appendChild(nameRow);
}
parentElement.appendChild(toolTip);
}
for (let i = 0, max= days.length; i < max; i++) {
// Begin a new table row every Monday.
if (days[i].getDay() === startOfWeek) {
tr = document.createElement("tr");
tbody.appendChild(tr);
}
// Create new TD per day and add appropriate classes.
let td = document.createElement("td");
if (days[i].getMonth() !== month) td.classList.add("mdCOtherMonth");
if (days[i].getYear() == d.getYear() && days[i].getMonth() == d.getMonth() && days[i].getDate() == d.getDate()) td.classList.add("mdCToday");
tdTitle = document.createElement("time");
tdTitle.textContent = days[i].getDate();
td.appendChild(tdTitle);
tr.appendChild(td);
// Append dates.
let dayTime = days[i].getTime();
let dayTimeMinusDay = days[i].getTime() + 24 * 3600 * 1000;
let dayTimePlusDay = days[i].getTime() - 0 * 3600 * 1000;
for (let j = 0, maxj = events.length; j < maxj; j++) {
if (Date.parse(events[j].start) > dayTimeMinusDay || Date.parse(events[j].end) < dayTimePlusDay) continue;
let eventSignifier = document.createElement("a");
eventSignifier.classList.add("color" + events[j].color.toString());
if (events[j].link) eventSignifier.href = events[j].link;
let eventSignifierText = document.createElement("span");
eventSignifierText.textContent = events[j].name;
eventSignifier.appendChild(eventSignifierText);
eventSignifier.addEventListener('mouseover', function(e) {
createSingleEventOverlay(e, eventSignifier, events[j]);
});
eventSignifier.addEventListener('mouseout', function(e) {
removeToolTips();
});
td.appendChild(eventSignifier);
}
// Add posibility for overlay.
tdTitle.addEventListener('click', function(e) {
tearDownById("mdCOverlay");
let overlay = document.createElement("div");
overlay.id = "mdCOverlay";
let eventTitleBar = document.createElement("div");
eventTitleBar.classList.add("mdCOverlayTitleBar");
overlay.appendChild(eventTitleBar);
let title = document.createElement("span");
title.classList.add("mdCOverlayTitle");
title.textContent = days[i].toLocaleDateString(calLocale);
eventTitleBar.appendChild(title);
let closer = document.createElement("span");
closer.classList.add("mdCOverlayClose");
closer.addEventListener('click', function(e) {
if (debugging === true) console.log("Clicked close button: Tearing down daily agenda.");
tearDownById("mdCOverlay");
});
eventTitleBar.appendChild(closer);
let ul = document.createElement("ul");
// Append events.
for (let j = 0, maxj = events.length; j < maxj; j++) {
let start = new Date(events[j].start);
let end = new Date(events[j].end);
if (start.getTime() > dayTime || end.getTime() < dayTimePlusDay) continue;
let eventLi = document.createElement("li");
let eventSignifier = document.createElement("a");
eventSignifier.textContent = events[j].name;
if (events[j].link) eventSignifier.href = events[j].link;
eventLi.appendChild(eventSignifier);
let eventP = document.createElement("p");
eventP.textContent = start.toLocaleDateString(calLocale) + " - " + end.toLocaleDateString(calLocale);
if (events[j].place !== undefined) eventP.textContent = eventP.textContent + ", " + events[j].place;
eventLi.appendChild(eventP);
let eventDesc = document.createElement("p");
eventDesc.textContent = events[j].description;
eventLi.appendChild(eventDesc);
ul.appendChild(eventLi);
}
overlay.appendChild(ul);
document.getElementsByTagName("body")[0].appendChild(overlay);
});
if (td.childElementCount > 6) td.classList.add("mdCManyElements");
daysTDs[days[i].getFullYear() + "-" + days[i].getMonth() + "-" + days[i].getDate()] = td;
}
table.appendChild(tbody);
mdCalDiv.appendChild(table);
target.appendChild(mdCalDiv);
// Enable closing overlay by pressing escape.
document.addEventListener('keydown', function(e) {
if (e.keyCode !== 27) return;
if (debugging === true) console.log("Pressed escape: Tearing down daily agenda.");
tearDownById("mdCOverlay");
});
return daysTDs;
}
(function() {
let calendars = document.getElementsByClassName("mdCalendar");
for (let i = 0, max = calendars.length; i < max; i++) {
queryPage(
encodeURI(calendars[i].getAttribute("data-src")),
function (request) {
if (debugging === true) console.log("Loaded\n" + request.response);
let elements = JSON.parse(request.response);
let tCalendar = createCalendarTable(calendars[i], elements);
});
}
}
)();
});