Mehrsprachigkeit: Sprachumschalter in der Navigation (DE/CH/EN/FR/PT)
Neues i18n-System, komplett clientseitig (kein Build-Tool): - main.js: I18N_CORE übersetzt Navigation, Fußzeile und Musik-Widget auf JEDER Seite (Markennamen wie DogFather/HasiDog/Casper/Team Dogi bleiben bewusst in jeder Sprache gleich). Sprachumschalter (Flagge + Kürzel) neu im Nav-Bar, per Klick wählbar, Wahl landet in localStorage und bleibt beim Klicken durch die Seite erhalten. - Jeder komplett neue Besuch (kein gespeicherter Wert) startet IMMER auf Deutsch - keine automatische Browsersprache-Erkennung, wie gewünscht. - assets/js/i18n-index.js: vollständiges Wörterbuch für die Startseite (Hero, Charaktere, Foto-Collage, Stats, "Was dich erwartet", Team-Vorschau, Aktionen, Galerie, Testimonial, finaler CTA) inkl. der dynamischen Live-Status-Texte. - Schweizer Hochdeutsch (de-CH) korrekt mit ss statt ß angelegt (z.B. "Musik-Feld schliessen"). - Weitere Unterseiten (streamer.html, vanvan.html, ...) bekommen ihr eigenes Wörterbuch schrittweise in künftigen Runden - Navigation/ Fußzeile/Musik-Widget sind aber schon jetzt überall mehrsprachig.
This commit is contained in:
+276
-55
@@ -8,38 +8,193 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* ===================================================================
|
||||
Mehrsprachigkeit (i18n)
|
||||
|
||||
Fünf Sprachen: Deutsch (Standard, IMMER die Sprache beim ersten
|
||||
Besuch), Englisch, Schweizer Hochdeutsch (ß→ss, sonst wie Deutsch),
|
||||
Französisch, Portugiesisch. Rein clientseitig, kein Build-Tool:
|
||||
- I18N_CORE deckt die sitewide gemeinsamen Textstücke ab (Navigation,
|
||||
Fußzeile, Musik-Widget) — läuft auf JEDER Seite, weil main.js
|
||||
überall eingebunden ist.
|
||||
- Seiteneigene Inhalte (z.B. die Startseite) bekommen zusätzlich ein
|
||||
eigenes Wörterbuch über window.I18N_PAGE (siehe assets/js/i18n-*.js),
|
||||
das per data-i18n="schluessel" auf Elemente gemappt wird.
|
||||
Markennamen (DogFather, HasiDog, Casper, VanVan, Team Dogi,
|
||||
Modi-Team, Scout-Team, Streamer, Creator, Manager, Community) bleiben
|
||||
bewusst in JEDER Sprache unübersetzt — das ist die Marke.
|
||||
Gewählte Sprache landet in localStorage und bleibt beim Klicken durch
|
||||
die Seite erhalten. Ein komplett neuer Besuch (keine Speicherung)
|
||||
startet immer auf Deutsch — nie automatische Browsersprache-Erkennung.
|
||||
=================================================================== */
|
||||
const SPRACHEN = [
|
||||
{ code: "de", flagge: "🇩🇪", kurz: "DE" },
|
||||
{ code: "de-CH", flagge: "🇨🇭", kurz: "CH" },
|
||||
{ code: "en", flagge: "🇬🇧", kurz: "EN" },
|
||||
{ code: "fr", flagge: "🇫🇷", kurz: "FR" },
|
||||
{ code: "pt", flagge: "🇵🇹", kurz: "PT" },
|
||||
];
|
||||
const SPRACHE_SCHLUESSEL = "dogi-sprache";
|
||||
|
||||
function getSprache() {
|
||||
const gespeichert = localStorage.getItem(SPRACHE_SCHLUESSEL);
|
||||
return SPRACHEN.some((s) => s.code === gespeichert) ? gespeichert : "de";
|
||||
}
|
||||
|
||||
function setSprache(code) {
|
||||
if (!SPRACHEN.some((s) => s.code === code)) return;
|
||||
localStorage.setItem(SPRACHE_SCHLUESSEL, code);
|
||||
document.documentElement.setAttribute("lang", code);
|
||||
renderHeader();
|
||||
renderFooter();
|
||||
applyTranslations();
|
||||
applyMusicWidgetSprache();
|
||||
// Seiteneigene Skripte (z.B. der Live-Status auf index.html) können
|
||||
// darauf reagieren, um dynamisch gesetzten Text (nicht über
|
||||
// data-i18n) ebenfalls neu zu übersetzen.
|
||||
document.dispatchEvent(new CustomEvent("dogi-sprache-geaendert", { detail: { sprache: code } }));
|
||||
}
|
||||
|
||||
const I18N_CORE = {
|
||||
nav_start: { de: "Start", "de-CH": "Start", en: "Home", fr: "Accueil", pt: "Início" },
|
||||
nav_dogfather: { de: "DogFather", "de-CH": "DogFather", en: "DogFather", fr: "DogFather", pt: "DogFather" },
|
||||
nav_dogfather_person: { de: "Die Person", "de-CH": "Die Person", en: "The Person", fr: "La personne", pt: "A pessoa" },
|
||||
nav_dogfather_streamer: { de: "Streamer", "de-CH": "Streamer", en: "Streamer", fr: "Streamer", pt: "Streamer" },
|
||||
nav_dogfather_casper: { de: "Casper", "de-CH": "Casper", en: "Casper", fr: "Casper", pt: "Casper" },
|
||||
nav_dogfather_vanvan: { de: "VanVan", "de-CH": "VanVan", en: "VanVan", fr: "VanVan", pt: "VanVan" },
|
||||
nav_dogfather_zeitreise: { de: "Zeitreise", "de-CH": "Zeitreise", en: "Timeline", fr: "Chronologie", pt: "Linha do tempo" },
|
||||
nav_hasidog: { de: "HasiDog", "de-CH": "HasiDog", en: "HasiDog", fr: "HasiDog", pt: "HasiDog" },
|
||||
nav_hasidog_welt: { de: "HasiDog-Welt", "de-CH": "HasiDog-Welt", en: "HasiDog World", fr: "Monde HasiDog", pt: "Mundo HasiDog" },
|
||||
nav_hasidog_modi: { de: "Modi-Team", "de-CH": "Modi-Team", en: "Modi-Team", fr: "Modi-Team", pt: "Modi-Team" },
|
||||
nav_hasidog_community: { de: "Community", "de-CH": "Community", en: "Community", fr: "Communauté", pt: "Comunidade" },
|
||||
nav_hasidog_stimmen: { de: "Stimmen", "de-CH": "Stimmen", en: "Voices", fr: "Témoignages", pt: "Depoimentos" },
|
||||
nav_hasidog_streamplan: { de: "Streamplan", "de-CH": "Streamplan", en: "Stream schedule", fr: "Programme des streams", pt: "Programação das lives" },
|
||||
nav_manager: { de: "Manager", "de-CH": "Manager", en: "Manager", fr: "Manager", pt: "Manager" },
|
||||
nav_manager_dogfather: { de: "Manager DogFather", "de-CH": "Manager DogFather", en: "Manager DogFather", fr: "Manager DogFather", pt: "Manager DogFather" },
|
||||
nav_manager_scouts: { de: "Scout-Team", "de-CH": "Scout-Team", en: "Scout Team", fr: "Équipe Scouts", pt: "Equipe Scouts" },
|
||||
nav_manager_creator: { de: "Creator", "de-CH": "Creator", en: "Creator", fr: "Creator", pt: "Creator" },
|
||||
nav_manager_werte: { de: "Werte", "de-CH": "Werte", en: "Values", fr: "Valeurs", pt: "Valores" },
|
||||
nav_manager_bewerben: { de: "Bewerben", "de-CH": "Bewerben", en: "Apply", fr: "Postuler", pt: "Candidatar-se" },
|
||||
nav_medien: { de: "Medien", "de-CH": "Medien", en: "Media", fr: "Médias", pt: "Mídia" },
|
||||
nav_medien_dogfather: { de: "DogFather", "de-CH": "DogFather", en: "DogFather", fr: "DogFather", pt: "DogFather" },
|
||||
nav_medien_hasidog: { de: "HasiDog", "de-CH": "HasiDog", en: "HasiDog", fr: "HasiDog", pt: "HasiDog" },
|
||||
nav_medien_casper: { de: "Casper", "de-CH": "Casper", en: "Casper", fr: "Casper", pt: "Casper" },
|
||||
nav_links: { de: "Links", "de-CH": "Links", en: "Links", fr: "Liens", pt: "Links" },
|
||||
nav_cta_bewerben: { de: "Bewerben 🩵", "de-CH": "Bewerben 🩵", en: "Apply 🩵", fr: "Postuler 🩵", pt: "Candidatar-se 🩵" },
|
||||
nav_toggle_aria: { de: "Menü öffnen", "de-CH": "Menü öffnen", en: "Open menu", fr: "Ouvrir le menu", pt: "Abrir menu" },
|
||||
sprache_aria: { de: "Sprache wählen", "de-CH": "Sprache wählen", en: "Choose language", fr: "Choisir la langue", pt: "Escolher idioma" },
|
||||
brand_tagline: {
|
||||
de: "Streamer · Community · HasiDog · Manager",
|
||||
"de-CH": "Streamer · Community · HasiDog · Manager",
|
||||
en: "Streamer · Community · HasiDog · Manager",
|
||||
fr: "Streamer · Communauté · HasiDog · Manager",
|
||||
pt: "Streamer · Comunidade · HasiDog · Manager",
|
||||
},
|
||||
footer_tagline: {
|
||||
de: "Streamer. Community. HasiDog. Manager. Gemeinsam stark.",
|
||||
"de-CH": "Streamer. Community. HasiDog. Manager. Gemeinsam stark.",
|
||||
en: "Streamer. Community. HasiDog. Manager. Stronger together.",
|
||||
fr: "Streamer. Communauté. HasiDog. Manager. Plus forts ensemble.",
|
||||
pt: "Streamer. Comunidade. HasiDog. Manager. Mais fortes juntos.",
|
||||
},
|
||||
footer_h4_hasidog_manager: { de: "HasiDog & Manager", "de-CH": "HasiDog & Manager", en: "HasiDog & Manager", fr: "HasiDog et Manager", pt: "HasiDog e Manager" },
|
||||
footer_h4_mehr: { de: "Mehr", "de-CH": "Mehr", en: "More", fr: "Plus", pt: "Mais" },
|
||||
footer_scouts: { de: "Scouts", "de-CH": "Scouts", en: "Scouts", fr: "Scouts", pt: "Scouts" },
|
||||
footer_alle_links: { de: "Alle Links", "de-CH": "Alle Links", en: "All links", fr: "Tous les liens", pt: "Todos os links" },
|
||||
footer_kontakt: { de: "Kontakt", "de-CH": "Kontakt", en: "Contact", fr: "Contact", pt: "Contato" },
|
||||
footer_copyright: {
|
||||
de: "© {jahr} DogFather Universe. Team Dogi ist Familie 🩵",
|
||||
"de-CH": "© {jahr} DogFather Universe. Team Dogi ist Familie 🩵",
|
||||
en: "© {jahr} DogFather Universe. Team Dogi is family 🩵",
|
||||
fr: "© {jahr} DogFather Universe. Team Dogi, c'est la famille 🩵",
|
||||
pt: "© {jahr} DogFather Universe. Team Dogi é família 🩵",
|
||||
},
|
||||
footer_impressum: { de: "Impressum & Datenschutz", "de-CH": "Impressum & Datenschutz", en: "Legal notice & privacy", fr: "Mentions légales et confidentialité", pt: "Aviso legal e privacidade" },
|
||||
music_title: { de: "Musik von Team Dogi 🎵", "de-CH": "Musik von Team Dogi 🎵", en: "Music from Team Dogi 🎵", fr: "Musique de Team Dogi 🎵", pt: "Música do Team Dogi 🎵" },
|
||||
music_close_aria: { de: "Musik-Feld schließen", "de-CH": "Musik-Feld schliessen", en: "Close music panel", fr: "Fermer le panneau musique", pt: "Fechar painel de música" },
|
||||
music_intro: {
|
||||
de: "Läuft weiter, solange du auf dieser Seite bleibst. 🩵",
|
||||
"de-CH": "Läuft weiter, solange du auf dieser Seite bleibst. 🩵",
|
||||
en: "Keeps playing as long as you stay on this page. 🩵",
|
||||
fr: "Continue de jouer tant que tu restes sur cette page. 🩵",
|
||||
pt: "Continua tocando enquanto você ficar nesta página. 🩵",
|
||||
},
|
||||
music_toggle_title: { de: "Musik von Hasidog & Van-Van", "de-CH": "Musik von Hasidog & Van-Van", en: "Music from Hasidog & Van-Van", fr: "Musique de Hasidog et Van-Van", pt: "Música de Hasidog e Van-Van" },
|
||||
music_spotify_suffix: { de: "auf Spotify anhören", "de-CH": "auf Spotify anhören", en: "listen on Spotify", fr: "écouter sur Spotify", pt: "ouvir no Spotify" },
|
||||
};
|
||||
|
||||
function t(schluessel) {
|
||||
const eintrag = I18N_CORE[schluessel];
|
||||
if (!eintrag) return schluessel;
|
||||
const sprache = getSprache();
|
||||
return eintrag[sprache] || eintrag.de || schluessel;
|
||||
}
|
||||
|
||||
/* Elemente mit data-i18n="schluessel" übersetzen — Wörterbuch kommt aus
|
||||
window.I18N_PAGE (seiteneigen, z.B. assets/js/i18n-index.js). Fehlt
|
||||
der Schlüssel oder die Sprache, bleibt der bestehende (deutsche) Text
|
||||
einfach stehen, statt kaputtzugehen. */
|
||||
function applyTranslations() {
|
||||
const sprache = getSprache();
|
||||
document.documentElement.setAttribute("lang", sprache);
|
||||
|
||||
const seitenWoerterbuch = window.I18N_PAGE || {};
|
||||
document.querySelectorAll("[data-i18n]").forEach((el) => {
|
||||
const eintrag = seitenWoerterbuch[el.getAttribute("data-i18n")];
|
||||
if (!eintrag) return;
|
||||
const text = eintrag[sprache] || eintrag.de;
|
||||
if (text) el.innerHTML = text;
|
||||
});
|
||||
|
||||
// data-i18n-attr="alt:schluessel;title:andererSchluessel" — für Attribute
|
||||
// statt Textinhalt (z.B. Bild-Alt-Texte).
|
||||
document.querySelectorAll("[data-i18n-attr]").forEach((el) => {
|
||||
el.getAttribute("data-i18n-attr")
|
||||
.split(";")
|
||||
.map((teil) => teil.trim())
|
||||
.filter(Boolean)
|
||||
.forEach((teil) => {
|
||||
const [attr, schluessel] = teil.split(":");
|
||||
const eintrag = seitenWoerterbuch[schluessel];
|
||||
if (!eintrag) return;
|
||||
const text = eintrag[sprache] || eintrag.de;
|
||||
if (text) el.setAttribute(attr, text);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- Navigationsstruktur (an einer Stelle pflegen) ---------- */
|
||||
const NAV = [
|
||||
{ label: "Start", href: "index.html" },
|
||||
{ key: "nav_start", href: "index.html" },
|
||||
{
|
||||
label: "DogFather",
|
||||
key: "nav_dogfather",
|
||||
children: [
|
||||
{ label: "Die Person", href: "dogfather.html" },
|
||||
{ label: "Streamer", href: "streamer.html" },
|
||||
{ label: "Casper", href: "casper.html" },
|
||||
{ label: "VanVan", href: "vanvan.html" },
|
||||
{ label: "Zeitreise", href: "zeitreise.html" },
|
||||
{ key: "nav_dogfather_person", href: "dogfather.html" },
|
||||
{ key: "nav_dogfather_streamer", href: "streamer.html" },
|
||||
{ key: "nav_dogfather_casper", href: "casper.html" },
|
||||
{ key: "nav_dogfather_vanvan", href: "vanvan.html" },
|
||||
{ key: "nav_dogfather_zeitreise", href: "zeitreise.html" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "HasiDog",
|
||||
key: "nav_hasidog",
|
||||
children: [
|
||||
{ label: "HasiDog-Welt", href: "hasidog.html" },
|
||||
{ label: "Modi-Team", href: "team-modis.html" },
|
||||
{ label: "Community", href: "community.html" },
|
||||
{ label: "Stimmen", href: "stimmen.html" },
|
||||
{ key: "nav_hasidog_welt", href: "hasidog.html" },
|
||||
{ key: "nav_hasidog_modi", href: "team-modis.html" },
|
||||
{ key: "nav_hasidog_community", href: "community.html" },
|
||||
{ key: "nav_hasidog_stimmen", href: "stimmen.html" },
|
||||
// Streamplan zurück unter HasiDog — Wunsch Dogi.
|
||||
{ label: "Streamplan", href: "streamplan.html" },
|
||||
{ key: "nav_hasidog_streamplan", href: "streamplan.html" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Manager",
|
||||
key: "nav_manager",
|
||||
children: [
|
||||
{ label: "Manager DogFather", href: "manager.html" },
|
||||
{ label: "Scout-Team", href: "team-scouts.html" },
|
||||
{ label: "Creator", href: "creator.html" },
|
||||
{ label: "Werte", href: "werte.html" },
|
||||
{ label: "Bewerben", href: "bewerben.html" },
|
||||
{ key: "nav_manager_dogfather", href: "manager.html" },
|
||||
{ key: "nav_manager_scouts", href: "team-scouts.html" },
|
||||
{ key: "nav_manager_creator", href: "creator.html" },
|
||||
{ key: "nav_manager_werte", href: "werte.html" },
|
||||
{ key: "nav_manager_bewerben", href: "bewerben.html" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -47,14 +202,14 @@
|
||||
// Foto/Video/Aktionen getrennt zu sein — Wunsch von Dogi: pro Welt
|
||||
// (DogFather/HasiDog/Casper) gibt es EINE Seite mit allem
|
||||
// kategorisiert (Fotos, Videos, Events), siehe medien-*.html.
|
||||
label: "Medien",
|
||||
key: "nav_medien",
|
||||
children: [
|
||||
{ label: "DogFather", href: "medien-dogfather.html" },
|
||||
{ label: "HasiDog", href: "medien-hasidog.html" },
|
||||
{ label: "Casper", href: "medien-casper.html" },
|
||||
{ key: "nav_medien_dogfather", href: "medien-dogfather.html" },
|
||||
{ key: "nav_medien_hasidog", href: "medien-hasidog.html" },
|
||||
{ key: "nav_medien_casper", href: "medien-casper.html" },
|
||||
],
|
||||
},
|
||||
{ label: "Links", href: "links.html" },
|
||||
{ key: "nav_links", href: "links.html" },
|
||||
];
|
||||
|
||||
/* Aktuelle Datei — wird beim nahtlosen Seitenwechsel mit aktualisiert. */
|
||||
@@ -66,23 +221,41 @@
|
||||
|
||||
function renderNavItem(item) {
|
||||
if (!item.children) {
|
||||
return `<a class="nav-flat${isActive(item.href) ? " active" : ""}" href="${item.href}">${item.label}</a>`;
|
||||
return `<a class="nav-flat${isActive(item.href) ? " active" : ""}" href="${item.href}">${t(item.key)}</a>`;
|
||||
}
|
||||
const activeChild = item.children.some((c) => isActive(c.href));
|
||||
return `
|
||||
<div class="nav-group${activeChild ? " open-hint" : ""}">
|
||||
<button type="button" aria-expanded="false">${item.label} <span aria-hidden="true">▾</span></button>
|
||||
<button type="button" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
|
||||
<div class="nav-dropdown">
|
||||
${item.children
|
||||
.map(
|
||||
(c) =>
|
||||
`<a href="${c.href}"${isActive(c.href) ? ' class="active"' : ""}>${c.label}</a>`
|
||||
`<a href="${c.href}"${isActive(c.href) ? ' class="active"' : ""}>${t(c.key)}</a>`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* Sprachumschalter — eigener nav-group-artiger Dropdown, zeigt die
|
||||
aktuell gewählte Sprache (Flagge + Kürzel) und listet beim Klick die
|
||||
übrigen 4 Sprachen auf. */
|
||||
function renderSprachSchalter() {
|
||||
const aktuell = getSprache();
|
||||
const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
|
||||
return `
|
||||
<div class="nav-group sprach-schalter">
|
||||
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">${aktiv.flagge} ${aktiv.kurz} <span aria-hidden="true">▾</span></button>
|
||||
<div class="nav-dropdown">
|
||||
${SPRACHEN.map(
|
||||
(s) =>
|
||||
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}>${s.flagge} ${s.kurz}</a>`
|
||||
).join("")}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderHeader() {
|
||||
const el = document.getElementById("site-header");
|
||||
if (!el) return;
|
||||
@@ -92,13 +265,14 @@
|
||||
<a class="brand" href="index.html">
|
||||
<img class="brand-logo" src="assets/img/logo-dogfather.png" alt="DogFather Logo" />
|
||||
<span>DOGFATHER UNIVERSE
|
||||
<small>Streamer · Community · HasiDog · Manager</small>
|
||||
<small>${t("brand_tagline")}</small>
|
||||
</span>
|
||||
</a>
|
||||
<button class="nav-toggle" type="button" aria-label="Menü öffnen" aria-expanded="false">☰</button>
|
||||
<button class="nav-toggle" type="button" aria-label="${t("nav_toggle_aria")}" aria-expanded="false">☰</button>
|
||||
<nav class="nav-links">
|
||||
${NAV.map(renderNavItem).join("")}
|
||||
<a class="nav-cta" href="bewerben.html"><span>Bewerben 🩵</span></a>
|
||||
${renderSprachSchalter()}
|
||||
<a class="nav-cta" href="bewerben.html"><span>${t("nav_cta_bewerben")}</span></a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>`;
|
||||
@@ -120,6 +294,12 @@
|
||||
});
|
||||
});
|
||||
|
||||
el.querySelectorAll(".sprach-schalter [data-sprache]").forEach((link) => {
|
||||
link.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
setSprache(link.dataset.sprache);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* Klick außerhalb schließt offene Menüs. Bewusst NUR EINMAL angemeldet —
|
||||
@@ -142,43 +322,43 @@
|
||||
<div>
|
||||
<div class="brand"><span class="heart">🩵</span> DOGFATHER UNIVERSE</div>
|
||||
<p class="small" style="margin-top:.8rem;max-width:32ch;">
|
||||
Streamer. Community. HasiDog. Manager. Gemeinsam stark.
|
||||
${t("footer_tagline")}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>DogFather</h4>
|
||||
<ul>
|
||||
<li><a href="dogfather.html">Die Person</a></li>
|
||||
<li><a href="streamer.html">Streamer</a></li>
|
||||
<li><a href="casper.html">Casper</a></li>
|
||||
<li><a href="vanvan.html">VanVan</a></li>
|
||||
<li><a href="zeitreise.html">Zeitreise</a></li>
|
||||
<li><a href="dogfather.html">${t("nav_dogfather_person")}</a></li>
|
||||
<li><a href="streamer.html">${t("nav_dogfather_streamer")}</a></li>
|
||||
<li><a href="casper.html">${t("nav_dogfather_casper")}</a></li>
|
||||
<li><a href="vanvan.html">${t("nav_dogfather_vanvan")}</a></li>
|
||||
<li><a href="zeitreise.html">${t("nav_dogfather_zeitreise")}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>HasiDog & Manager</h4>
|
||||
<h4>${t("footer_h4_hasidog_manager")}</h4>
|
||||
<ul>
|
||||
<li><a href="hasidog.html">HasiDog-Welt</a></li>
|
||||
<li><a href="team-modis.html">Modi-Team</a></li>
|
||||
<li><a href="community.html">Community</a></li>
|
||||
<li><a href="stimmen.html">Stimmen</a></li>
|
||||
<li><a href="streamplan.html">Streamplan</a></li>
|
||||
<li><a href="manager.html">Manager DogFather</a></li>
|
||||
<li><a href="team-scouts.html">Scouts</a></li>
|
||||
<li><a href="hasidog.html">${t("nav_hasidog_welt")}</a></li>
|
||||
<li><a href="team-modis.html">${t("nav_hasidog_modi")}</a></li>
|
||||
<li><a href="community.html">${t("nav_hasidog_community")}</a></li>
|
||||
<li><a href="stimmen.html">${t("nav_hasidog_stimmen")}</a></li>
|
||||
<li><a href="streamplan.html">${t("nav_hasidog_streamplan")}</a></li>
|
||||
<li><a href="manager.html">${t("nav_manager_dogfather")}</a></li>
|
||||
<li><a href="team-scouts.html">${t("footer_scouts")}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Mehr</h4>
|
||||
<h4>${t("footer_h4_mehr")}</h4>
|
||||
<ul>
|
||||
<li><a href="links.html">Alle Links</a></li>
|
||||
<li><a href="bewerben.html">Bewerben</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="links.html">${t("footer_alle_links")}</a></li>
|
||||
<li><a href="bewerben.html">${t("nav_manager_bewerben")}</a></li>
|
||||
<li><a href="kontakt.html">${t("footer_kontakt")}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer-bottom">
|
||||
<span>© ${year} DogFather Universe. Team Dogi ist Familie 🩵</span>
|
||||
<span><a href="kontakt.html">Impressum & Datenschutz</a></span>
|
||||
<span>${t("footer_copyright").replace("{jahr}", year)}</span>
|
||||
<span><a href="kontakt.html">${t("footer_impressum")}</a></span>
|
||||
</div>
|
||||
</footer>`;
|
||||
}
|
||||
@@ -228,22 +408,22 @@
|
||||
widget.innerHTML = `
|
||||
<div class="music-panel" id="music-panel" hidden>
|
||||
<div class="music-panel-head">
|
||||
<strong>Musik von Team Dogi 🎵</strong>
|
||||
<button class="music-close" id="music-close" type="button" aria-label="Musik-Feld schließen">✕</button>
|
||||
<strong id="music-title-text">${t("music_title")}</strong>
|
||||
<button class="music-close" id="music-close" type="button" aria-label="${t("music_close_aria")}">✕</button>
|
||||
</div>
|
||||
<p class="small muted" style="margin:.2rem 0 .6rem;">Läuft weiter, solange du auf dieser Seite bleibst. 🩵</p>
|
||||
<p class="small muted" id="music-intro-text" style="margin:.2rem 0 .6rem;">${t("music_intro")}</p>
|
||||
${SPOTIFY_ARTISTS.map(
|
||||
(a) => `
|
||||
<p class="music-artist-label">${a.name}</p>
|
||||
<iframe data-src="https://open.spotify.com/embed/artist/${a.id}?utm_source=generator&theme=0"
|
||||
height="152" loading="lazy" title="${a.name} auf Spotify anhören"
|
||||
height="152" loading="lazy" data-artist="${a.name}" title="${a.name} ${t("music_spotify_suffix")}"
|
||||
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
||||
allowfullscreen></iframe>`
|
||||
).join("")}
|
||||
</div>
|
||||
<button class="music-toggle" id="music-toggle" type="button"
|
||||
aria-expanded="false" aria-controls="music-panel"
|
||||
title="Musik von Hasidog & Van-Van"><span>🎵</span></button>`;
|
||||
title="${t("music_toggle_title")}"><span>🎵</span></button>`;
|
||||
document.body.appendChild(widget);
|
||||
|
||||
const panel = document.getElementById("music-panel");
|
||||
@@ -271,6 +451,23 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* Das Musik-Widget wird nur EINMAL erzeugt (damit der laufende Player
|
||||
beim Seitenwechsel nicht abreißt) — bei Sprachwechsel deshalb nicht
|
||||
neu rendern, sondern nur die Texte/Attribute darin austauschen. */
|
||||
function applyMusicWidgetSprache() {
|
||||
const titel = document.getElementById("music-title-text");
|
||||
if (titel) titel.textContent = t("music_title");
|
||||
const schliessen = document.getElementById("music-close");
|
||||
if (schliessen) schliessen.setAttribute("aria-label", t("music_close_aria"));
|
||||
const intro = document.getElementById("music-intro-text");
|
||||
if (intro) intro.textContent = t("music_intro");
|
||||
const toggle = document.getElementById("music-toggle");
|
||||
if (toggle) toggle.setAttribute("title", t("music_toggle_title"));
|
||||
document.querySelectorAll("#music-widget iframe[data-artist]").forEach((f) => {
|
||||
f.setAttribute("title", `${f.dataset.artist} ${t("music_spotify_suffix")}`);
|
||||
});
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Musik-Knopf: Chamäleon-Farben
|
||||
|
||||
@@ -487,6 +684,11 @@
|
||||
}
|
||||
|
||||
alterInhalt.replaceWith(neuerInhalt);
|
||||
// Seiteneigenes i18n-Wörterbuch zurücksetzen — sonst könnte das der
|
||||
// VORHERIGEN Seite (z.B. Startseite) fälschlich auf der neuen Seite
|
||||
// weiterwirken. Hat die neue Seite ein eigenes (z.B. i18n-index.js),
|
||||
// setzt skripteUebernehmen() es gleich neu.
|
||||
window.I18N_PAGE = null;
|
||||
|
||||
// Seitenmotiv + Sonderklassen mitnehmen: Die Bildvariablen hängen am
|
||||
// <body>, damit das Motiv die ganze Seite trägt — beim Wechsel also mit
|
||||
@@ -521,6 +723,7 @@
|
||||
musikKnopfFarbenAnpassen(); // Chamäleon-Knopf an die neue Seite anpassen
|
||||
|
||||
await skripteUebernehmen(dok);
|
||||
applyTranslations(); // seiteneigene data-i18n-Elemente der neuen Seite übersetzen
|
||||
}
|
||||
|
||||
function nahtloseNavigationAktivieren() {
|
||||
@@ -569,5 +772,23 @@
|
||||
renderMusicWidget();
|
||||
musikKnopfFarbenAnpassen();
|
||||
nahtloseNavigationAktivieren();
|
||||
applyTranslations(); // seiteneigene data-i18n-Elemente (z.B. Startseite) übersetzen
|
||||
});
|
||||
|
||||
/* Kleine öffentliche Schnittstelle für seiteneigene Inline-Skripte
|
||||
(z.B. der Live-Status auf index.html), die außerhalb dieser IIFE
|
||||
ebenfalls die aktuelle Sprache übersetzen wollen. */
|
||||
window.dogiSprache = getSprache;
|
||||
window.dogiUebersetzen = function (schluessel, ersetzungen) {
|
||||
const eintrag = (window.I18N_PAGE || {})[schluessel];
|
||||
if (!eintrag) return schluessel;
|
||||
const sprache = getSprache();
|
||||
let text = eintrag[sprache] || eintrag.de || schluessel;
|
||||
if (ersetzungen) {
|
||||
Object.keys(ersetzungen).forEach((platzhalter) => {
|
||||
text = text.replace(`{${platzhalter}}`, ersetzungen[platzhalter]);
|
||||
});
|
||||
}
|
||||
return text;
|
||||
};
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user