MediaWiki:Common.js: Difference between revisions

Revision as of 19:55, 14 January 2026

/* Any JavaScript here will be loaded for all users on every page load. */

/**
 * Night Mode Toggle for Minerva Neue
 * Adds a sticky toggle button that persists user preference in localStorage
 */
(function () {
    'use strict';

    var STORAGE_KEY = 'minerva-night-mode';
    var THEME_CLASSES = ['skin-theme-clientpref-day', 'skin-theme-clientpref-night', 'skin-theme-clientpref-os'];

    /**
     * Get saved theme or default to 'day'
     */
    function getSavedTheme() {
        try {
            return localStorage.getItem(STORAGE_KEY) || 'day';
        } catch (e) {
            return 'day';
        }
    }

    /**
     * Save theme preference
     */
    function saveTheme(theme) {
        try {
            localStorage.setItem(STORAGE_KEY, theme);
        } catch (e) {
            // localStorage unavailable
        }
    }

    /**
     * Apply theme class to document
     */
    function applyTheme(theme) {
        var html = document.documentElement;
        THEME_CLASSES.forEach(function (cls) {
            html.classList.remove(cls);
        });
        html.classList.add('skin-theme-clientpref-' + theme);
    }

    /**
     * Update button appearance
     */
    function updateButtonState(button, theme) {
        var icon = button.querySelector('.minerva-icon');
        var label = button.querySelector('span:last-child');
        
        if (theme === 'night') {
            // Show sun icon (to switch to day)
            icon.innerHTML = '☀️';
            label.textContent = 'Light mode';
        } else {
            // Show moon icon (to switch to night)
            icon.innerHTML = '🌙';
            label.textContent = 'Dark mode';
        }
    }

    /**
     * Create the toggle button element
     */
    function createToggleButton() {
        var currentTheme = getSavedTheme();

        var li = document.createElement('li');
        
        var button = document.createElement('a');
        button.setAttribute('role', 'button');
        button.setAttribute('href', '#');
        button.id = 'ca-nightmode';
        button.className = 'cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet';
        button.style.cursor = 'pointer';

        var icon = document.createElement('span');
        icon.className = 'minerva-icon';
        icon.style.fontSize = '20px';
        icon.style.display = 'flex';
        icon.style.alignItems = 'center';
        icon.style.justifyContent = 'center';

        var label = document.createElement('span');
        
        button.appendChild(icon);
        button.appendChild(label);
        li.appendChild(button);

        // Set initial state
        updateButtonState(button, currentTheme);

        // Handle click
        button.addEventListener('click', function (e) {
            e.preventDefault();
            var newTheme = getSavedTheme() === 'night' ? 'day' : 'night';
            saveTheme(newTheme);
            applyTheme(newTheme);
            updateButtonState(button, newTheme);
        });

        return li;
    }

    /**
     * Initialize night mode
     */
    function init() {
        // Apply saved theme immediately
        var savedTheme = getSavedTheme();
        applyTheme(savedTheme);

        // Wait for DOM to be ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', insertButton);
        } else {
            insertButton();
        }
    }

    /**
     * Insert button into the navigation
     */
    function insertButton() {
        var notificationsList = document.querySelector('.minerva-notifications ul');
        
        if (notificationsList) {
            var toggleButton = createToggleButton();
            notificationsList.appendChild(toggleButton);
        } else {
            // Fallback: try inserting into minerva-user-navigation
            var userNav = document.querySelector('.minerva-user-navigation');
            if (userNav) {
                var container = document.createElement('div');
                container.className = 'minerva-notifications';
                var ul = document.createElement('ul');
                ul.appendChild(createToggleButton());
                container.appendChild(ul);
                userNav.insertBefore(container, userNav.firstChild);
            }
        }
    }

    // Run initialization
    init();
})();