MediaWiki:Common.js: Difference between revisions

Revision as of 08:30, 28 January 2025

/* 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);
    }
})();