fradrive/app/www/src/js/helper/async_content.js
2017-12-22 19:52:13 +01:00

99 lines
3.4 KiB
JavaScript

define(["../api"], function (api) {
var mainContentElement = document.querySelector('.main-content');
function replaceMainContent(elements) {
var element = document.querySelector('.main-content');
Velocity(element, {
opacity: 0
}, {
duration: 100,
complete: function(animatedElements) {
// actually remove content
mainContentElement.innerHTML = "";
elements.forEach(function(el) {
// and add new one
mainContentElement.appendChild(el);
});
Velocity(element, {
opacity: 1
}, {
duration: 70
});
}
});
}
function renderHtml(result) {
console.log(result);
var box = document.createElement('div');
box.classList.add('box');
box.innerHTML = result;
var boxTitleEl = document.createElement('div');
boxTitleEl.classList.add('box-title');
boxTitleEl.innerHTML = 'Wurst';
box.appendChild(boxTitleEl);
replaceMainContent([box]);
}
function renderEvents(result) {
var els = [];
var introBox = document.createElement('div');
introBox.classList.add('box');
introBox.innerHTML = '<div class="box-title">Aktuelle Veranstaltungen</div><div class="term text">Wintersemester 2017 / 2018 (<b>WS17/18</b>)</div>';
els.push(introBox);
for (var i = 0; i < result.events.length; i++) {
var event = result.events[i];
var eventEl = document.createElement('div');
eventEl.classList.add('box', 'event-box');
var eventTitleEl = document.createElement('div');
eventTitleEl.classList.add('box-title');
eventTitleEl.innerHTML = event.title;
var eventDescEl = document.createElement('div');
eventDescEl.classList.add('event-desc');
eventDescEl.innerHTML = event.description;
var eventRegistrationEl = document.createElement('div');
eventRegistrationEl.classList.add('event-registration');
eventRegistrationEl.innerHTML = event.registrationLabel;
eventEl.appendChild(eventTitleEl);
eventEl.appendChild(eventDescEl);
eventEl.appendChild(eventRegistrationEl);
els.push(eventEl);
}
replaceMainContent(els);
// TODO: reattach handlers, load js and stuff
}
return {
init: function() {
var linkElements = document.querySelectorAll('a[async]');
[].slice.call(linkElements).forEach((el, i) => {
var mainElement = document.querySelector('.main-content');
el.addEventListener('click', function(event) {
var req = el.getAttribute('href');
event.preventDefault();
var type = el.dataset.type || 'html';
switch(type) {
case 'json':
api.getJson(req, renderEvents);
break;
case 'html':
default:
api.getHtml(req, renderHtml);
break;
}
});
});
}
}
});