137 lines
4.1 KiB
JavaScript
137 lines
4.1 KiB
JavaScript
class I18n {
|
|
constructor() {
|
|
this.translations = {};
|
|
this.currentLocale = 'de';
|
|
this.fallbackLocale = 'de';
|
|
this.supportedLocales = ['de', 'en', 'fr'];
|
|
this.subscribers = new Set();
|
|
this.loaded = false;
|
|
}
|
|
|
|
async init() {
|
|
const savedLocale = localStorage.getItem('locale');
|
|
const browserLocale = navigator.language.split('-')[0];
|
|
|
|
this.currentLocale = savedLocale
|
|
|| (this.supportedLocales.includes(browserLocale) ? browserLocale : this.fallbackLocale);
|
|
|
|
await this.loadTranslations(this.currentLocale);
|
|
this.loaded = true;
|
|
this.updateDOM();
|
|
}
|
|
|
|
async loadTranslations(locale) {
|
|
if (this.translations[locale]) return;
|
|
|
|
try {
|
|
const response = await fetch(`/locales/${locale}.json`);
|
|
if (!response.ok) throw new Error(`Failed to load ${locale}`);
|
|
this.translations[locale] = await response.json();
|
|
} catch (error) {
|
|
console.error(`Failed to load translations for ${locale}:`, error);
|
|
if (locale !== this.fallbackLocale) {
|
|
await this.loadTranslations(this.fallbackLocale);
|
|
}
|
|
}
|
|
}
|
|
|
|
async setLocale(locale) {
|
|
if (!this.supportedLocales.includes(locale)) {
|
|
console.warn(`Locale ${locale} is not supported`);
|
|
return;
|
|
}
|
|
|
|
await this.loadTranslations(locale);
|
|
this.currentLocale = locale;
|
|
localStorage.setItem('locale', locale);
|
|
document.documentElement.lang = locale;
|
|
|
|
this.updateDOM();
|
|
this.notifySubscribers();
|
|
}
|
|
|
|
getLocale() {
|
|
return this.currentLocale;
|
|
}
|
|
|
|
t(key, params = {}) {
|
|
const translations = this.translations[this.currentLocale]
|
|
|| this.translations[this.fallbackLocale]
|
|
|| {};
|
|
|
|
let text = this.getNestedValue(translations, key);
|
|
|
|
if (text === undefined) {
|
|
console.warn(`Missing translation: ${key}`);
|
|
return key;
|
|
}
|
|
|
|
Object.entries(params).forEach(([param, value]) => {
|
|
text = text.replace(new RegExp(`{{${param}}}`, 'g'), value);
|
|
});
|
|
|
|
return text;
|
|
}
|
|
|
|
getNestedValue(obj, path) {
|
|
return path.split('.').reduce((current, key) => {
|
|
return current && current[key] !== undefined ? current[key] : undefined;
|
|
}, obj);
|
|
}
|
|
|
|
updateDOM() {
|
|
document.querySelectorAll('[data-i18n]').forEach((el) => {
|
|
const key = el.getAttribute('data-i18n');
|
|
let params = {};
|
|
if (el.dataset.i18nParams) {
|
|
try {
|
|
params = JSON.parse(el.dataset.i18nParams);
|
|
} catch (e) {
|
|
console.warn(`Invalid i18n params for key "${key}":`, e);
|
|
}
|
|
}
|
|
el.textContent = this.t(key, params);
|
|
});
|
|
|
|
document.querySelectorAll('[data-i18n-placeholder]').forEach((el) => {
|
|
const key = el.getAttribute('data-i18n-placeholder');
|
|
el.placeholder = this.t(key);
|
|
});
|
|
|
|
document.querySelectorAll('[data-i18n-title]').forEach((el) => {
|
|
const key = el.getAttribute('data-i18n-title');
|
|
el.title = this.t(key);
|
|
});
|
|
|
|
document.querySelectorAll('[data-i18n-aria]').forEach((el) => {
|
|
const key = el.getAttribute('data-i18n-aria');
|
|
el.setAttribute('aria-label', this.t(key));
|
|
});
|
|
}
|
|
|
|
subscribe(callback) {
|
|
this.subscribers.add(callback);
|
|
return () => this.subscribers.delete(callback);
|
|
}
|
|
|
|
notifySubscribers() {
|
|
this.subscribers.forEach(callback => callback(this.currentLocale));
|
|
}
|
|
|
|
getSupportedLocales() {
|
|
return this.supportedLocales;
|
|
}
|
|
|
|
getLocaleDisplayName(locale) {
|
|
const names = {
|
|
de: 'Deutsch',
|
|
en: 'English',
|
|
fr: 'Français'
|
|
};
|
|
return names[locale] || locale;
|
|
}
|
|
}
|
|
|
|
export const i18n = new I18n();
|
|
export const t = (key, params) => i18n.t(key, params);
|