MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* 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();
+})();