f4fa637635
- Added 'navbarReady' event dispatch from navbar after rendering - Language selector now waits for navbar container to exist - Fixes race condition where language selector ran before navbar rendered - Language toggle now functional on researcher, implementer, leader, about pages
95 lines
3.3 KiB
JavaScript
95 lines
3.3 KiB
JavaScript
/**
|
|
* Language Selector Component
|
|
* Simple icon-based selector for all devices
|
|
*/
|
|
|
|
(function() {
|
|
const supportedLanguages = [
|
|
{ code: 'en', name: 'English', flag: '🇬🇧' },
|
|
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
|
|
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
|
|
{ code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Planned' }
|
|
];
|
|
|
|
function createLanguageSelector() {
|
|
const container = document.getElementById('language-selector-container');
|
|
if (!container) return;
|
|
|
|
const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
|
|
|
|
const selectorHTML = `
|
|
<!-- Language icon buttons (all devices) -->
|
|
<div class="flex gap-1">
|
|
${supportedLanguages.map(lang => `
|
|
<button
|
|
data-lang="${lang.code}"
|
|
class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
|
|
lang.code === currentLang
|
|
? 'border-blue-600 bg-blue-50'
|
|
: 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
|
|
} ${lang.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
|
|
aria-label="${lang.disabled ? lang.name + ' (' + lang.tooltip + ')' : 'Switch to ' + lang.name}"
|
|
title="${lang.name}${lang.disabled ? ' (' + lang.tooltip + ')' : ''}"
|
|
${lang.disabled ? 'disabled' : ''}
|
|
>
|
|
<span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
container.innerHTML = selectorHTML;
|
|
|
|
// Add event listeners
|
|
attachEventListeners(currentLang);
|
|
}
|
|
|
|
function attachEventListeners(currentLang) {
|
|
// Icon buttons
|
|
const iconButtons = document.querySelectorAll('.language-icon-btn:not([disabled])');
|
|
iconButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const selectedLang = this.getAttribute('data-lang');
|
|
if (window.I18n) {
|
|
window.I18n.setLanguage(selectedLang);
|
|
}
|
|
|
|
// Update active state
|
|
document.querySelectorAll('.language-icon-btn').forEach(btn => {
|
|
if (!btn.disabled) {
|
|
btn.classList.remove('border-blue-600', 'bg-blue-50');
|
|
btn.classList.add('border-gray-300', 'bg-white');
|
|
}
|
|
});
|
|
this.classList.remove('border-gray-300', 'bg-white');
|
|
this.classList.add('border-blue-600', 'bg-blue-50');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Initialize when navbar is ready (not just DOM ready)
|
|
function initWhenReady() {
|
|
// Check if navbar container exists
|
|
if (document.getElementById('language-selector-container')) {
|
|
createLanguageSelector();
|
|
} else {
|
|
// Wait for navbar to signal it's ready
|
|
window.addEventListener('navbarReady', createLanguageSelector, { once: true });
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWhenReady);
|
|
} else {
|
|
initWhenReady();
|
|
}
|
|
|
|
// Re-initialize when language changes (to update active state)
|
|
if (window.I18n) {
|
|
const originalSetLanguage = window.I18n.setLanguage;
|
|
window.I18n.setLanguage = function(lang) {
|
|
originalSetLanguage.call(window.I18n, lang);
|
|
createLanguageSelector(); // Refresh selector with new active language
|
|
};
|
|
}
|
|
})();
|