Ulas
a5ae0bac7e
- Locale-Picker: disable select + fade before location.reload() (system mode) gives visual feedback before the page jumps - Extract _validateField() helper from wireBlurValidation to avoid duplication - Add validateAll(formContainer): validates all required fields on demand, marks inline errors, focuses first invalid field - tasks.js: call validateAll() at submit to catch untouched required fields
73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
/**
|
|
* oikos-locale-picker - Sprachauswahl-Web-Component
|
|
* Zeigt ein <select>-Dropdown für System/Deutsch/English.
|
|
* Bei Auswahl: setLocale() oder localStorage-Eintrag löschen (System).
|
|
* Dependencies: i18n.js
|
|
*/
|
|
|
|
import { t, setLocale, getLocale, getSupportedLocales } from '/i18n.js';
|
|
|
|
const LOCALE_LABELS = {
|
|
de: 'Deutsch',
|
|
en: 'English',
|
|
it: 'Italiano',
|
|
sv: 'Svenska',
|
|
};
|
|
|
|
class OikosLocalePicker extends HTMLElement {
|
|
connectedCallback() {
|
|
this._render();
|
|
this._onLocaleChanged = () => this._render();
|
|
window.addEventListener('locale-changed', this._onLocaleChanged);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
window.removeEventListener('locale-changed', this._onLocaleChanged);
|
|
}
|
|
|
|
_render() {
|
|
const stored = localStorage.getItem('oikos-locale');
|
|
|
|
const label = document.createElement('label');
|
|
label.className = 'locale-picker__label';
|
|
label.htmlFor = 'locale-select';
|
|
label.textContent = t('settings.localeLabel');
|
|
|
|
const select = document.createElement('select');
|
|
select.className = 'form-input locale-picker__select';
|
|
select.id = 'locale-select';
|
|
|
|
// System-Option
|
|
const systemOpt = document.createElement('option');
|
|
systemOpt.value = 'system';
|
|
systemOpt.textContent = t('settings.localeSystem');
|
|
systemOpt.selected = !stored;
|
|
select.appendChild(systemOpt);
|
|
|
|
// Sprach-Optionen
|
|
for (const locale of getSupportedLocales()) {
|
|
const opt = document.createElement('option');
|
|
opt.value = locale;
|
|
opt.textContent = LOCALE_LABELS[locale] || locale;
|
|
opt.selected = stored === locale;
|
|
select.appendChild(opt);
|
|
}
|
|
|
|
select.addEventListener('change', () => {
|
|
if (select.value === 'system') {
|
|
select.disabled = true;
|
|
select.style.opacity = '0.5';
|
|
localStorage.removeItem('oikos-locale');
|
|
// Kurze Verzögerung damit der Browser den disabled-Zustand rendert
|
|
setTimeout(() => location.reload(), 60);
|
|
} else {
|
|
setLocale(select.value);
|
|
}
|
|
});
|
|
|
|
this.replaceChildren(label, select);
|
|
}
|
|
}
|
|
|
|
customElements.define('oikos-locale-picker', OikosLocalePicker);
|