MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */

/**
 * Enforce Dark Mode, Remove Appearance Menu, and Enable Hamburger Menu for Non-Logged-In Users
 */
(function() {
    /**
     * Function to enforce dark mode by adding necessary classes
     */
    function enforceDarkMode() {
        // Add classes to enforce dark mode
        document.documentElement.classList.add('vector-feature-night-mode-enabled', 'skin-theme-clientpref-night');

        // Remove any existing light mode classes if present
        document.documentElement.classList.remove('skin-theme-clientpref-day');
    }

    /**
     * Function to remove the Appearance menu section
     */
    function removeAppearanceMenu() {
        var appearanceSection = document.querySelector('#p-appearance');
        if (appearanceSection) {
            appearanceSection.style.display = 'none';
        }
    }

    /**
     * Function to enable hamburger menu functionality for non-logged-in users
     */
    function enableHamburgerMenu() {
        // Check if the user is not logged in by looking for the 'user-anon' class on <body>
        if (document.body.classList.contains('user-anon')) {
            // Select the hamburger toggle button
            // Common selectors include:
            // - '#mw-navigation-toggle' for Vector skin
            // - '.hamburger-toggle' for other skins
            var hamburgerToggle = document.querySelector('#mw-navigation-toggle, .hamburger-toggle');

            if (hamburgerToggle) {
                // Add a click event listener to toggle the navigation
                hamburgerToggle.addEventListener('click', function() {
                    // Toggle a class on the body to show/hide the navigation
                    document.body.classList.toggle('mw-navigation-open');
                });
            } else {
                // If the hamburger toggle doesn't exist, create one
                createHamburgerToggle();
            }
        }
    }

    /**
     * Function to create a hamburger toggle button if it doesn't exist
     */
    function createHamburgerToggle() {
        // Create the button element
        var toggleButton = document.createElement('button');
        toggleButton.id = 'custom-hamburger-toggle';
        toggleButton.className = 'hamburger-toggle';
        toggleButton.innerHTML = '&#9776;'; // Unicode for hamburger icon

        // Style the button
        toggleButton.style.position = 'fixed';
        toggleButton.style.top = '10px';
        toggleButton.style.left = '10px';
        toggleButton.style.zIndex = '1000';
        toggleButton.style.background = 'none';
        toggleButton.style.border = 'none';
        toggleButton.style.cursor = 'pointer';
        toggleButton.style.fontSize = '24px';
        toggleButton.style.color = '#fff';

        // Add the button to the body
        document.body.appendChild(toggleButton);

        // Add the click event listener
        toggleButton.addEventListener('click', function() {
            document.body.classList.toggle('mw-navigation-open');
        });
    }

    /**
     * Initialize all functions after DOM is ready
     */
    function initialize() {
        enforceDarkMode();
        removeAppearanceMenu();
        enableHamburgerMenu();
    }

    // Execute functions after DOM is fully loaded
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        initialize();
    } else {
        document.addEventListener('DOMContentLoaded', initialize);
    }
})();


mw.loader.using('mediawiki.util').done(function() {
    // If wgUserName is null, the user is not logged in
    if (mw.config.get('wgUserName') === null) {
        document.body.classList.add('anon-user');
    } else {
        document.body.classList.add('logged-in-user');
    }
});