96 lines
5.0 KiB
JavaScript
96 lines
5.0 KiB
JavaScript
/**
|
|
* Navigation und dynamisches Laden von Einzelseiten (Single Page App Verhalten).
|
|
* Dieses Skript reagiert auf Klicks im Menü/Sidebar, lädt die gewünschte HTML-Teilseite
|
|
* per Fetch-API nach und führt die jeweilige Seite-Initialisierungsfunktion aus.
|
|
*/
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
/**
|
|
* Setzt die "active"-Klasse im Menü für die ausgewählte Seite,
|
|
* damit der Benutzer sieht, in welchem Bereich er sich befindet.
|
|
* @param {string} id - Die ID des Menü-Links (z.B. "nav-home").
|
|
*/
|
|
function setActiveMenu(id) {
|
|
// Alle Sidebar-Links zurücksetzen
|
|
document.querySelectorAll("#sidebar .nav-link").forEach(link => link.classList.remove("active"));
|
|
// Alle Navbar-Links zurücksetzen
|
|
document.querySelectorAll(".navbar-nav .nav-link").forEach(link => link.classList.remove("active"));
|
|
|
|
// Aktiven Link anhand seiner ID suchen und hervorheben
|
|
const activeLink = document.getElementById(id);
|
|
if (activeLink) activeLink.classList.add("active");
|
|
}
|
|
|
|
/**
|
|
* Lädt eine Teilseite (.html) dynamisch aus dem "pages/"-Ordner in den Hauptbereich.
|
|
* Nach dem Laden werden die DOM-Elemente initialisiert (z.B. Event-Listener gebunden),
|
|
* indem die entsprechende globale "init..."-Funktion aufgerufen wird.
|
|
* @param {string} page - Der Name der HTML-Datei (ohne Endung, z.B. "play").
|
|
* @param {string} menuId - Die ID des zugehörigen Menüpunkts zur visuellen Aktivierung.
|
|
*/
|
|
window.loadPage = function loadPage(page, menuId) {
|
|
// fetch lädt das HTML-Snippet. cache: "no-store" verhindert veraltete Stände im Browser-Cache.
|
|
fetch("pages/" + page + ".html", { cache: "no-store" })
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error("HTTP-Fehler " + response.status);
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(data => {
|
|
// Das geladene HTML-Fragment in den Haupt-Container rendern
|
|
document.getElementById("main-content").innerHTML = data;
|
|
|
|
// Aktiven Menüpunkt visuell kennzeichnen
|
|
setActiveMenu(menuId);
|
|
|
|
// Da das DOM nun neu aufgebaut wurde, müssen wir die Event-Handler
|
|
// für die jeweilige Seite neu registrieren (Init-Funktionen).
|
|
if (page === "login" && typeof window.initLoginPage === "function") {
|
|
window.initLoginPage();
|
|
}
|
|
if (page === "leaderboard" && typeof window.initLeaderboardPage === "function") {
|
|
window.initLeaderboardPage();
|
|
}
|
|
if (page === "scores" && typeof window.initScoresPage === "function") {
|
|
window.initScoresPage();
|
|
}
|
|
if (page === "play" && typeof window.initPlayPage === "function") {
|
|
window.initPlayPage();
|
|
}
|
|
if (page === "messages" && typeof window.initMessagesPage === "function") {
|
|
window.initMessagesPage();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Fehler beim Laden von " + page + ":", error);
|
|
// Fehlermeldung für den Benutzer in den Hauptbereich einbetten
|
|
document.getElementById("main-content").innerHTML = "<div class='alert alert-danger'>Fehler beim Laden der Seite: " + error.message + "</div>";
|
|
});
|
|
};
|
|
|
|
// --- Menü-Verkabelung ---
|
|
// Alle Navigations-Elemente aus dem DOM abrufen
|
|
const navHome = document.getElementById("nav-home");
|
|
const navPlay = document.getElementById("nav-play");
|
|
const navMyScores = document.getElementById("nav-my-scores");
|
|
const navLeaderboard = document.getElementById("nav-leaderboard");
|
|
const navbarLogin = document.getElementById("navbar-login");
|
|
const navbarMessages = document.getElementById("navbar-messages");
|
|
|
|
// Standard-Verhalten der Links (Seiten-Reload) verhindern und loadPage() aufrufen
|
|
if (navHome) navHome.onclick = (e) => { e.preventDefault(); loadPage("home", "nav-home"); };
|
|
if (navPlay) navPlay.onclick = (e) => { e.preventDefault(); loadPage("play", "nav-play"); };
|
|
if (navMyScores) navMyScores.onclick = (e) => { e.preventDefault(); loadPage("scores", "nav-my-scores"); };
|
|
if (navLeaderboard) navLeaderboard.onclick = (e) => { e.preventDefault(); loadPage("leaderboard", "nav-leaderboard"); };
|
|
if (navbarLogin) navbarLogin.onclick = (e) => { e.preventDefault(); loadPage("login", "navbar-login"); };
|
|
if (navbarMessages) navbarMessages.onclick = (e) => { e.preventDefault(); loadPage("messages", "navbar-messages"); };
|
|
|
|
// Prüfen, ob neue ungelesene Nachrichten vorliegen, um den Nachrichten-Link rot zu markieren
|
|
if (typeof window.updateMessagesNavState === "function") window.updateMessagesNavState();
|
|
|
|
// Beim allerersten Aufruf der App die Startseite ("home") laden
|
|
loadPage("home", "nav-home");
|
|
});
|
|
|