Leuchtturm Stand 08.Juli

Leuchtturm/script.js

@@ -0,0 +1,39 @@
+"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');