716c681f17
UX Simplification: - Remove dropdown selector completely (was causing rendering conflicts) - Use icon-only buttons on ALL devices (mobile and desktop) - Show all 4 languages: 🇬🇧 English, 🇩🇪 Deutsch, 🇫🇷 Français, 🇳🇿 Te Reo Māori - Māori button shows as disabled with "Planned" tooltip Technical Changes: - Eliminate all responsive breakpoint logic (md:hidden, md:block, md:flex) - Single unified rendering path for all screen sizes - Removed desktop dropdown and associated event handlers - Simplified to one flex container with 4 icon buttons - Active state management works across all buttons including disabled Fixes: - Resolves persistent issue where both dropdown and icons appeared on desktop - Eliminates Tailwind responsive class conflicts - Consistent UX across all devices - Better touch targets (44x44px) on all platforms 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
85 lines
3 KiB
JavaScript
85 lines
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 DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', createLanguageSelector);
|
|
} else {
|
|
createLanguageSelector();
|
|
}
|
|
|
|
// 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
|
|
};
|
|
}
|
|
})();
|