MediaWiki:Timeless.js: Difference between revisions

Revision as of 01:58, 26 August 2026

$( function () {

    /*
     * ============================================================
     * DROPDOWN MENU CONTENT
     * ============================================================
     *
     * The names here must match the names in MediaWiki:Sidebar.
     *
     * To add another dropdown, simply add another entry here.
     */

    var menus = {
        'Locations': [
            'Continents',
            'Kingdoms',
            'Towns'
        ],

        'Religions': [
            'The Valor',
            'The Brumal'
        ],

        'People': [
            'High Lord Kip',
            'Queen Melena'
        ],

        'World Building': [
            'History',
            'Magic',
            'War'
        ]
    };


    /*
     * ============================================================
     * FIND THE SIDEBAR
     * ============================================================
     */

    var sidebar = document.getElementById( 'mw-site-navigation' );

    if ( !sidebar ) {
        return;
    }


    /*
     * ============================================================
     * FIND ALL LINKS IN THE SIDEBAR
     * ============================================================
     */

    var links = sidebar.getElementsByTagName( 'a' );


    /*
     * Convert the HTMLCollection into a normal array.
     */

    var sidebarLinks = Array.prototype.slice.call( links );


    /*
     * ============================================================
     * PROCESS EACH DROPDOWN
     * ============================================================
     */

    Object.keys( menus ).forEach( function ( menuName ) {

        var mainLink = null;


        /*
         * Find the sidebar link whose text matches the menu name.
         */

        sidebarLinks.some( function ( link ) {

            var text = link.textContent.trim();

            if ( text === menuName ) {
                mainLink = link;
                return true;
            }

            return false;

        });


        /*
         * If the link wasn't found, don't do anything.
         */

        if ( !mainLink ) {
            return;
        }


        /*
         * ========================================================
         * FIND THE SIDEBAR ITEM
         * ========================================================
         *
         * Walk upward until we find the list item containing
         * the link.
         */

        var parent = mainLink.closest( 'li' );

        if ( !parent ) {
            return;
        }


        /*
         * ========================================================
         * CREATE THE DROPDOWN
         * ========================================================
         */

        var dropdown = document.createElement( 'ul' );

        dropdown.className = 'exuvia-dropdown-menu';


        /*
         * ========================================================
         * CREATE THE CHILD LINKS
         * ========================================================
         */

        menus[ menuName ].forEach( function ( pageName ) {

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

            var link = document.createElement( 'a' );

            link.href = mw.util.getUrl( pageName );

            link.textContent = pageName;

            item.appendChild( link );

            dropdown.appendChild( item );

        });


        /*
         * ========================================================
         * ADD THE DROPDOWN TO THE SIDEBAR
         * ========================================================
         */

        parent.appendChild( dropdown );


        /*
         * ========================================================
         * HIDE IT INITIALLY
         * ========================================================
         */

        dropdown.style.display = 'none';


        /*
         * ========================================================
         * ADD THE ARROW
         * ========================================================
         */

 var arrow = document.createElement( 'span' );

arrow.className = 'exuvia-dropdown-arrow';

arrow.textContent = ' ▼';

mainLink.appendChild( arrow );


/*
 * Mark this link as a dropdown title.
 *
 * This gives the CSS a reliable way to distinguish:
 *
 *     Locations
 *
 * from:
 *
 *     Continents
 *     Kingdoms
 *     Towns
 */

mainLink.classList.add( 'exuvia-dropdown-title' );

        /*
         * ========================================================
         * MAKE THE TITLE A BUTTON
         * ========================================================
         *
         * Clicking the title does NOT open a page.
         */

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

            event.preventDefault();

            if ( dropdown.style.display === 'none' ) {

                dropdown.style.display = 'block';

                arrow.textContent = ' ▲';

            } else {

                dropdown.style.display = 'none';

                arrow.textContent = ' ▼';

            }

        });

    });

});