39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
let currentPage = null;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Diese Funktion wird beim Klick auf einen der Buttons im Header aufgerufen. Der geklickte Button erhält die Klasse
|
||
|
|
* 'active' und kann dadurch in css separat angesprochen werden.
|
||
|
|
* @param sourceElement Das Element, dessen Klick zum Aufruf der Funktion geführt hat
|
||
|
|
* @param page Die Seite, die geladen werden soll
|
||
|
|
*/
|
||
|
|
function loadPage(sourceElement, page){
|
||
|
|
if (currentPage !== null) {
|
||
|
|
currentPage.classList.remove("active");
|
||
|
|
}
|
||
|
|
currentPage = sourceElement;
|
||
|
|
currentPage.classList.add("active");
|
||
|
|
|
||
|
|
showPage(page);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Setzt den Inhalt des #content-Bereichs auf die übergebene Seite.
|
||
|
|
* Lädt die Inhalte aus dem entsprechenden <template> der index.html
|
||
|
|
* @param page String, der die zu ladende Seite vorgibt
|
||
|
|
*/
|
||
|
|
function showPage(page){
|
||
|
|
const contentElement = document.querySelector("#content");
|
||
|
|
const content = document.querySelector(`#${page}Template`);
|
||
|
|
|
||
|
|
if (content !== null)
|
||
|
|
contentElement.innerHTML = content.innerHTML;
|
||
|
|
else {
|
||
|
|
contentElement.innerHTML = "404 Page not found";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Lädt bei Aufruf der Seite die Startansicht
|
||
|
|
loadPage(document.querySelector("#homeButton"), 'home');
|