alvin/Challenge_15_Magazijn_App_Maken
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken.git synced 2026-03-06 11:06:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement multilingual support with Dutch and English translations across various pages and functionalities

Browse Source
This commit is contained in:
Alvin
2025-11-05 09:37:04 +01:00
parent 1d5b007577
commit febdcf8217
10 changed files with 304 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/js/translations.js
View File

@@ -180,29 +180,49 @@ class TranslationManager {
// Apply saved language preference
this.applyTranslations();
// Set up language toggle if it exists
const languageToggle = document.getElementById('languageToggle');
if (languageToggle) {
languageToggle.addEventListener('change', (e) => {
this.setLanguage(e.target.checked ? 'en' : 'nl');
// Set up language toggle buttons if they exist
const nlBtn = document.getElementById('nlBtn');
const enBtn = document.getElementById('enBtn');
if (nlBtn && enBtn) {
nlBtn.addEventListener('click', () => {
this.setLanguage('nl');
this.updateLanguageButtons();
});
// Set toggle state based on current language (Dutch is default/unchecked)
languageToggle.checked = this.currentLanguage === 'en';
this.updateLanguageLabels();
enBtn.addEventListener('click', () => {
this.setLanguage('en');
this.updateLanguageButtons();
});
// Set initial button states
this.updateLanguageButtons();
}
}
updateLanguageLabels() {
const nlLabel = document.getElementById('nlLabel');
const enLabel = document.getElementById('enLabel');
updateLanguageButtons() {
const nlBtn = document.getElementById('nlBtn');
const enBtn = document.getElementById('enBtn');
if (nlLabel && enLabel) {
nlLabel.classList.toggle('active', this.currentLanguage === 'nl');
enLabel.classList.toggle('active', this.currentLanguage === 'en');
if (nlBtn && enBtn) {
// Remove active class from both buttons
nlBtn.classList.remove('active');
enBtn.classList.remove('active');
// Add active class to current language button
if (this.currentLanguage === 'nl') {
nlBtn.classList.add('active');
} else {
enBtn.classList.add('active');
}
}
}
// Keep the old method for backward compatibility (in case it's used elsewhere)
updateLanguageLabels() {
this.updateLanguageButtons();
}
setLanguage(lang) {
if (lang !== 'en' && lang !== 'nl') {
console.warn('Unsupported language:', lang);