115 lines
4.1 KiB
JavaScript
115 lines
4.1 KiB
JavaScript
export const LanguageSelector = {
|
|
name: 'LanguageSelector',
|
|
props: {
|
|
initialLanguage: {
|
|
type: String,
|
|
default: 'nl'
|
|
},
|
|
currentLanguage: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
supportedLanguageDetails: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
allowedLanguages: {
|
|
type: Array,
|
|
default: () => ['nl', 'en', 'fr', 'de']
|
|
},
|
|
},
|
|
data() {
|
|
const startLanguage = this.currentLanguage || this.initialLanguage;
|
|
return {
|
|
selectedLanguage: startLanguage,
|
|
internalCurrentLanguage: startLanguage
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log('🔍 [DEBUG] LanguageSelector mounted with Vue template');
|
|
console.log('🔍 [DEBUG] Props:', {
|
|
initialLanguage: this.initialLanguage,
|
|
currentLanguage: this.currentLanguage,
|
|
supportedLanguageDetails: this.supportedLanguageDetails,
|
|
allowedLanguages: this.allowedLanguages
|
|
});
|
|
|
|
// Emit initial language
|
|
this.$emit('language-changed', this.selectedLanguage);
|
|
|
|
// DOM event
|
|
const event = new CustomEvent('vue:language-changed', {
|
|
detail: { language: this.selectedLanguage }
|
|
});
|
|
document.dispatchEvent(event);
|
|
},
|
|
methods: {
|
|
getAvailableLanguages() {
|
|
const languages = [];
|
|
const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0)
|
|
? this.allowedLanguages
|
|
: ['nl', 'en', 'fr', 'de'];
|
|
|
|
if (this.supportedLanguageDetails && Object.keys(this.supportedLanguageDetails).length > 0) {
|
|
for (const [langName, langDetails] of Object.entries(this.supportedLanguageDetails)) {
|
|
const isoCode = langDetails['iso 639-1'];
|
|
if (languagesToUse.includes(isoCode)) {
|
|
languages.push({
|
|
code: isoCode,
|
|
name: langName,
|
|
flag: langDetails.flag || ''
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
const defaultLanguages = {
|
|
'nl': { name: 'Nederlands', flag: '🇳🇱' },
|
|
'en': { name: 'English', flag: '🇬🇧' },
|
|
'fr': { name: 'Français', flag: '🇫🇷' },
|
|
'de': { name: 'Deutsch', flag: '🇩🇪' }
|
|
};
|
|
|
|
languagesToUse.forEach(code => {
|
|
if (defaultLanguages[code]) {
|
|
languages.push({
|
|
code: code,
|
|
name: defaultLanguages[code].name,
|
|
flag: defaultLanguages[code].flag
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return languages;
|
|
},
|
|
|
|
changeLanguage(languageCode) {
|
|
console.log(`LanguageSelector: changeLanguage called with ${languageCode}`);
|
|
|
|
if (this.internalCurrentLanguage !== languageCode) {
|
|
this.internalCurrentLanguage = languageCode;
|
|
this.selectedLanguage = languageCode;
|
|
|
|
// Vue component emit
|
|
this.$emit('language-changed', languageCode);
|
|
|
|
// DOM event
|
|
const event = new CustomEvent('vue:language-changed', {
|
|
detail: { language: languageCode }
|
|
});
|
|
document.dispatchEvent(event);
|
|
}
|
|
}
|
|
},
|
|
|
|
template: `
|
|
<div class="language-selector">
|
|
<label for="language-select">Taal / Language:</label>
|
|
<div class="select-wrapper">
|
|
<select id="language-select" class="language-select" v-model="selectedLanguage" @change="changeLanguage(selectedLanguage)">
|
|
<option v-for="lang in getAvailableLanguages()" :key="lang.code" :value="lang.code">{{ lang.flag }} {{ lang.name }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`
|
|
}; |