MediaWiki:Gadget-I18nSwitcher.js

// Universal language switcher for logged-in and anonymous users
(function() {
    'use strict';
    
    if (!$('.i18n-text')) {
        return;
    }

    var currentLang = 'en';
    var storageKey = 'bca-language-pref';
    var isLoggedIn = false;
    
    // Check if user is logged in
    function checkLoginStatus() {
        if (window.mw && mw.user) {
            isLoggedIn = !mw.user.isAnon();
        } else {
            // Fallback: check for login-specific elements
            isLoggedIn = document.getElementById('pt-userpage') !== null;
        }
        return isLoggedIn;
    }
    
    // Get stored language preference
    function getStoredLang() {
        try {
            // For logged-in users, try MediaWiki user options first
            if (isLoggedIn && window.mw && mw.user && mw.user.options) {
                var userPref = mw.user.options.get('bca-language');
                if (userPref) {
                    return userPref;
                }
            }
            
            // For all users, try localStorage
            if (window.localStorage) {
                var stored = localStorage.getItem(storageKey);
                if (stored) {
                    return stored;
                }
            }
            
            // Fallback to cookie
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                if (cookie.indexOf(storageKey + '=') === 0) {
                    return cookie.substring(storageKey.length + 1);
                }
            }
        } catch (e) {
            console.log('Error getting stored language:', e);
        }
        return 'en';
    }
    
    // Store language preference
    function storeLang(lang) {
        try {
            // For logged-in users, save to MediaWiki preferences
            if (isLoggedIn && window.mw && mw.user && mw.user.options && mw.Api) {
                mw.user.options.set('bca-language', lang);
                new mw.Api().saveOption('bca-language', lang).catch(function(error) {
                    console.log('Failed to save to user preferences:', error);
                });
            }
            
            // For all users, save to localStorage
            if (window.localStorage) {
                localStorage.setItem(storageKey, lang);
            }
            
            // Fallback to cookie for all users
            var expires = new Date();
            expires.setTime(expires.getTime() + (365 * 24 * 60 * 60 * 1000)); // 1 year
            document.cookie = storageKey + '=' + lang + '; expires=' + expires.toUTCString() + '; path=/';
            
        } catch (e) {
            console.log('Error storing language:', e);
        }
    }
    
    function createLanguageToggle() {

        if (!$('.i18n-text')) {
            return;
        } else {

            var toggle = document.createElement('div');
            toggle.className = 'lang-toggle nowrap';
            
            // Add user type indicator for debugging (remove in production)
            var userType = isLoggedIn ? ' (logged in)' : ' (anonymous)';
            
            toggle.innerHTML = '<button type="button" data-lang="en" class="lang-btn">en</button>' +
                '<button type="button" data-lang="bo" class="lang-btn">བོད</button>';
            
            // Try different locations for the toggle
            var targetElement = document.querySelector('.navbar-collapse > .navbar-nav:first-of-type');
            
            if (targetElement) {
                targetElement.appendChild(toggle);
            }
            
            // Add click handlers
            toggle.onclick = function(e) {
                var target = e.target || e.srcElement;
                if (target.className.indexOf('lang-btn') !== -1) {
                    var lang = target.getAttribute('data-lang');
                    if (lang) {
                        switchLanguage(lang);
                    }
                }
            };
            
            // Initialize with stored preference
            currentLang = getStoredLang();
            updateActiveButton();
            switchLanguage(currentLang);

        }
    }
    
    function updateActiveButton() {
        var buttons = document.querySelectorAll('.lang-btn') || 
                     document.getElementsByClassName('lang-btn');
        
        for (var i = 0; i < buttons.length; i++) {
            var btn = buttons[i];
            if (btn.getAttribute('data-lang') === currentLang) {
                btn.className = btn.className.replace(' active', '') + ' active';
            } else {
                btn.className = btn.className.replace(' active', '');
            }
        }
    }
    
    function switchLanguage(lang) {
        currentLang = lang;
        storeLang(lang);
        updateActiveButton();
        
        // Switch all i18n elements
        var elements = document.querySelectorAll('.i18n-text') ||
                      document.getElementsByClassName('i18n-text');
        
        for (var i = 0; i < elements.length; i++) {
            var el = elements[i];
            var text = el.getAttribute('data-lang-' + lang);
            if (text && text !== '') {
                el.innerHTML = text;
            } else {
                // Fall back to default language if requested language not available
                var defaultLang = el.getAttribute('data-default') || 'en';
                var fallbackText = el.getAttribute('data-lang-' + defaultLang);
                if (fallbackText) {
                    el.innerHTML = fallbackText;
                }
            }
            if (currentLang === 'bo') {
                el.classList.add('text-120', 'line16');
            } else {
                el.classList.remove('text-120', 'line16');
            }
        }
    }
    
    // Initialize when DOM is ready
    function init() {
        checkLoginStatus();
        
        if (document.readyState === 'complete' || document.readyState === 'interactive') {
            createLanguageToggle();
        } else if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', createLanguageToggle);
        } else if (document.attachEvent) {
            document.attachEvent('onreadystatechange', function() {
                if (document.readyState === 'complete') {
                    createLanguageToggle();
                }
            });
        } else {
            setTimeout(createLanguageToggle, 1000);
        }
    }
    
    init();
})();