MediaWiki:Common.js: Difference between revisions

Revision as of 23:30, 19 August 2026

/* ============================================================
   WIKIPARTNER
   THEME + USER MENU
============================================================ */

(function () {
    'use strict';


    /* ========================================================
       THEME CONSTANTS
    ======================================================== */

    var STORAGE_KEY = 'wikipartner-theme';

    var LIGHT = 'light';
    var DARK = 'dark';


    /* ========================================================
       THEME STORAGE
    ======================================================== */

    function getSavedTheme() {

        try {

            var saved =
                window.localStorage.getItem(
                    STORAGE_KEY
                );


            if (
                saved === LIGHT ||
                saved === DARK
            ) {
                return saved;
            }

        } catch (e) {
            /* Storage unavailable */
        }


        return LIGHT;
    }


    function saveTheme(theme) {

        try {

            window.localStorage.setItem(
                STORAGE_KEY,
                theme
            );

        } catch (e) {
            /* Storage unavailable */
        }
    }


    /* ========================================================
       CURRENT THEME
    ======================================================== */

    function getCurrentTheme() {

        return document.documentElement
            .classList.contains(
                'wp-theme-dark'
            )
            ? DARK
            : LIGHT;
    }


    /* ========================================================
       APPLY THEME
    ======================================================== */

    function applyTheme(
        theme,
        shouldSave
    ) {

        var html =
            document.documentElement;

        var isDark =
            theme === DARK;


        html.classList.toggle(
            'wp-theme-dark',
            isDark
        );

        html.classList.toggle(
            'wp-theme-light',
            !isDark
        );


        html.classList.remove(
            'skin-theme-clientpref-day',
            'skin-theme-clientpref-night',
            'skin-theme-clientpref-os'
        );


        html.classList.add(
            isDark
                ? 'skin-theme-clientpref-night'
                : 'skin-theme-clientpref-day'
        );


        html.setAttribute(
            'data-wikipartner-theme',
            isDark
                ? DARK
                : LIGHT
        );


        if (shouldSave !== false) {
            saveTheme(theme);
        }


        updateThemeButton();
    }


    /* ========================================================
       ICONS
    ======================================================== */

    function getMoonIcon() {

        return [
            '<svg viewBox="0 0 24 24" aria-hidden="true">',

                '<path ',
                    'd="M20.3 15.2A8.4 8.4 0 0 1 ',
                    '8.8 3.7 8.5 8.5 0 1 0 ',
                    '11.5 11.5Z"',
                '></path>',

                '<path ',
                    'class="wp-theme-star" ',
                    'd="M17.5 4v3M16 5.5h3"',
                '></path>',

            '</svg>'
        ].join('');
    }


    function getSunIcon() {

        return [
            '<svg viewBox="0 0 24 24" aria-hidden="true">',

                '<circle ',
                    'cx="12" ',
                    'cy="12" ',
                    'r="3.8"',
                '></circle>',

                '<path d="M12 2.3v2.1"></path>',
                '<path d="M12 19.6v2.1"></path>',

                '<path d="M4.93 4.93l1.5 1.5"></path>',
                '<path d="M17.57 17.57l1.5 1.5"></path>',

                '<path d="M2.3 12h2.1"></path>',
                '<path d="M19.6 12h2.1"></path>',

                '<path d="M4.93 19.07l1.5-1.5"></path>',
                '<path d="M17.57 6.43l1.5-1.5"></path>',

            '</svg>'
        ].join('');
    }


    /* ========================================================
       UPDATE THEME BUTTON
    ======================================================== */

    function updateThemeButton() {

        var button =
            document.getElementById(
                'wikipartner-theme-toggle'
            );


        if (!button) {
            return;
        }


        var isDark =
            getCurrentTheme() === DARK;


        button.innerHTML =
            '<span class="wp-theme-icon">' +
                (
                    isDark
                        ? getSunIcon()
                        : getMoonIcon()
                ) +
            '</span>' +

            '<span class="wp-theme-menu-label">' +
                (
                    isDark
                        ? 'Light mode'
                        : 'Dark mode'
                ) +
            '</span>';


        button.setAttribute(
            'aria-label',
            isDark
                ? 'Switch to light mode'
                : 'Switch to dark mode'
        );


        button.setAttribute(
            'title',
            isDark
                ? 'Light mode'
                : 'Dark mode'
        );
    }


    /* ========================================================
       CREATE THEME BUTTON
    ======================================================== */

    function createThemeToggle(list) {

        if (
            document.getElementById(
                'wikipartner-theme-item'
            )
        ) {
            return;
        }


        var item =
            document.createElement('li');


        item.id =
            'wikipartner-theme-item';

        item.className =
            'mw-list-item ' +
            'wikipartner-theme-item';


        var button =
            document.createElement(
                'button'
            );


        button.id =
            'wikipartner-theme-toggle';

        button.className =
            'wikipartner-theme-toggle';

        button.type = 'button';


        button.addEventListener(
            'click',
            function () {

                var nextTheme =
                    getCurrentTheme() === DARK
                        ? LIGHT
                        : DARK;


                applyTheme(
                    nextTheme,
                    true
                );
            }
        );


        item.appendChild(button);


        /*
         * LOGGED OUT:
         *
         * Create account | theme | Log in
         */
        var loginItem =
            list.querySelector(
                '#pt-login'
            );


        if (loginItem) {

            list.insertBefore(
                item,
                loginItem
            );

        } else {

            /*
             * Logged-in layout will move
             * this into the hamburger menu.
             */
            list.appendChild(item);

        }


        updateThemeButton();
    }


    /* ========================================================
       HAMBURGER ICON
    ======================================================== */

    function getMenuIcon() {

        return [
            '<span class="wp-menu-bars" aria-hidden="true">',
                '<span></span>',
                '<span></span>',
                '<span></span>',
            '</span>'
        ].join('');
    }


    /* ========================================================
       BUILD LOGGED-IN USER DROPDOWN
    ======================================================== */

    function buildLoggedInUserMenu(list) {

        /*
         * #pt-logout only exists for an
         * authenticated MediaWiki user.
         */
        var logoutItem =
            list.querySelector(
                '#pt-logout'
            );


        if (!logoutItem) {

            /*
             * Anonymous visitor.
             * Keep standard account layout.
             */
            list.classList.remove(
                'wp-is-logged-in'
            );

            list.classList.add(
                'wp-is-logged-out'
            );

            return;
        }


        list.classList.remove(
            'wp-is-logged-out'
        );

        list.classList.add(
            'wp-is-logged-in'
        );


        if (
            list.querySelector(
                '.wp-user-dropdown'
            )
        ) {
            return;
        }


        /*
         * Username stays outside.
         */
        var usernameItem =
            list.querySelector(
                '#pt-userpage'
            );


        /*
         * Create dropdown wrapper.
         */
        var dropdown =
            document.createElement('li');


        dropdown.className =
            'wp-user-dropdown';


        /*
         * Hamburger button.
         */
        var trigger =
            document.createElement(
                'button'
            );


        trigger.type = 'button';

        trigger.className =
            'wp-user-menu-trigger';

        trigger.setAttribute(
            'aria-label',
            'Open user menu'
        );

        trigger.setAttribute(
            'title',
            'User menu'
        );

        trigger.setAttribute(
            'aria-expanded',
            'false'
        );


        trigger.innerHTML =
            getMenuIcon();


        /*
         * Dropdown menu.
         */
        var menu =
            document.createElement('ul');


        menu.className =
            'wp-user-dropdown-menu';

        menu.hidden = true;


        /*
         * Move every account control except
         * the username into the dropdown.
         */
        var existingItems =
            Array.prototype.slice.call(
                list.children
            );


        existingItems.forEach(
            function (item) {

                if (
                    item === usernameItem ||
                    item === dropdown
                ) {
                    return;
                }


                menu.appendChild(item);
            }
        );


        dropdown.appendChild(trigger);
        dropdown.appendChild(menu);


        /*
         * Username first, hamburger second.
         */
        if (usernameItem) {

            if (
                usernameItem.nextSibling
            ) {

                list.insertBefore(
                    dropdown,
                    usernameItem.nextSibling
                );

            } else {

                list.appendChild(
                    dropdown
                );

            }

        } else {

            list.appendChild(
                dropdown
            );

        }


        /* ====================================================
           TOGGLE
        ==================================================== */

        function closeMenu() {

            dropdown.classList.remove(
                'is-open'
            );

            menu.hidden = true;

            trigger.setAttribute(
                'aria-expanded',
                'false'
            );

        }


        function openMenu() {

            dropdown.classList.add(
                'is-open'
            );

            menu.hidden = false;

            trigger.setAttribute(
                'aria-expanded',
                'true'
            );

        }


        trigger.addEventListener(
            'click',
            function (event) {

                event.stopPropagation();


                if (
                    dropdown.classList.contains(
                        'is-open'
                    )
                ) {

                    closeMenu();

                } else {

                    openMenu();

                }

            }
        );


        /*
         * Don't close while interacting
         * inside the dropdown.
         */
        menu.addEventListener(
            'click',
            function (event) {

                event.stopPropagation();

            }
        );


        /*
         * Click outside closes it.
         */
        document.addEventListener(
            'click',
            function (event) {

                if (
                    !dropdown.contains(
                        event.target
                    )
                ) {
                    closeMenu();
                }

            }
        );


        /*
         * Escape closes it.
         */
        document.addEventListener(
            'keydown',
            function (event) {

                if (
                    event.key === 'Escape'
                ) {

                    closeMenu();

                    trigger.focus();

                }

            }
        );
    }


    /* ========================================================
       INITIALIZE ACCOUNT AREA
    ======================================================== */

    function initializeUserArea() {

        var list =
            document.querySelector(
                '.wp-user-menu-list'
            );


        if (!list) {
            return;
        }


        createThemeToggle(list);

        buildLoggedInUserMenu(list);

        updateThemeButton();
    }


    /* ========================================================
       APPLY SAVED THEME
    ======================================================== */

    applyTheme(
        getSavedTheme(),
        false
    );


    /* ========================================================
       START
    ======================================================== */

    function initialize() {

        initializeUserArea();

    }


    if (
        document.readyState ===
        'loading'
    ) {

        document.addEventListener(
            'DOMContentLoaded',
            initialize
        );

    } else {

        initialize();

    }

})();