MediaWiki:Imelesstay.jsay

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:

    Locations
    Religions
    People
    World Building

JavaScript turns selected entries into expandable menus.

The top-level entries DO NOT need to be real wiki pages.

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

$( function () {

    /*
    ===========================================================================
    DROPDOWN MENUS
    ===========================================================================

    The name on the left must exactly match the text in MediaWiki:Sidebar.

    The names inside [ ] are the wiki pages that appear when the menu opens.

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

    var menus = {

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

        '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;
    }


    /*
    ===========================================================================
    FIND EVERY SIDEBAR LINK
    ===========================================================================
    */

    sidebar.find( 'a' ).each( function () {

        var link = $( this );

        /*
        Get only the visible text.

        trim() removes extra spaces.
        */

        var name = $.trim( link.clone().children().remove().end().text() );


        /*
        Check whether this sidebar item is one of our dropdowns.
        */

        if ( !Object.prototype.hasOwnProperty.call( menus, name ) ) {
            return;
        }


        /*
        =======================================================================
        FIND THE CONTAINER
        =======================================================================
        */

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


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

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


        /*
        =======================================================================
        CREATE EACH LINK
        =======================================================================
        */

        menus[ name ].forEach( function ( page ) {

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

            var childItem = $( '<li>' )
                .append( childLink );

            dropdown.append( childItem );

        } );


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

        parent.append( dropdown );


        /*
        Start closed.
        */

        dropdown.hide();


        /*
        =======================================================================
        MAKE THE TITLE A DROPDOWN BUTTON
        =======================================================================
        */

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

            event.preventDefault();

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

        });


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

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

    });

});