MediaWiki:Timeless.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.

/*
===============================================================================
EXUVIA WIKI SIDEBAR DROPDOWNS
===============================================================================

The sidebar contains the top-level navigation:

    Locations
    Religions
    People
    World Building

The JavaScript turns those entries into expandable menus.

Each dropdown's contents are defined HERE.

To add another dropdown later, add another entry to the "menus" object.

===============================================================================
*/

$( function () {

    /*
    ===========================================================================
    DROPDOWN CONTENT
    ===========================================================================

    Each key must exactly match the text of a sidebar entry.

    The value is an array containing the pages that should appear underneath
    that entry.

    Example:

        Locations: [
            'Continents',
            'Kingdoms',
            'Towns'
        ]

    creates:

        Locations ▼
            Continents
            Kingdoms
            Towns

    ===========================================================================
    */

    var menus = {

        Locations: [
            'Continents',
            'Kingdoms',
            'Towns'
        ]

        /*
        Add future dropdowns here.

        Example:

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

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

        'World Building': [
            'History',
            'Magic',
            'War'
        ]
        */

    };


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

    var sidebar = $( '#mw-site-navigation' );

    if ( !sidebar.length ) {
        return;
    }


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

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

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

        var mainLink = sidebar.find( 'a' ).filter( function () {
            return $.trim( $( this ).text() ) === menuName;
        } ).first();


        /*
        If the sidebar entry doesn't exist, skip it.
        */

        if ( !mainLink.length ) {
            return;
        }


        /*
        Find the <li> containing the sidebar link.
        */

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


        /*
        Create the dropdown list.
        */

        var dropdown = $( '<ul>' )
            .addClass( 'exuvia-dropdown-menu' );


        /*
        Add each page to the dropdown.
        */

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

            var link = $( '<a>' )
                .attr( 'href', mw.util.getUrl( pageName ) )
                .text( pageName );

            var item = $( '<li>' )
                .append( link );

            dropdown.append( item );

        } );


        /*
        Add the dropdown underneath the main navigation item.
        */

        parent.append( dropdown );


        /*
        Hide the dropdown when the page first loads.
        */

        dropdown.hide();


        /*
        Make the main navigation item behave like a button.

        Clicking it opens or closes the dropdown instead of opening a page.
        */

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

            event.preventDefault();

            dropdown.stop( true, true ).slideToggle( 150 );

        } );


        /*
        Add an arrow so users know that this item expands.
        */

        mainLink.append(
            $( '<span>' )
                .addClass( 'exuvia-dropdown-arrow' )
                .text( ' ▼' )
        );

    } );

} );