MediaWiki:Timeless.js: Difference between revisions

From Exuvia Wiki
← Older editNewer edit →

Admin (talk | contribs)

3 user groups
84 edits
No edit summary
No edit summary
Line 4: Line 4:
===============================================================================
===============================================================================


The sidebar contains the top-level navigation:
The sidebar contains:


     Locations
     Locations
Line 11: Line 11:
     World Building
     World Building


The JavaScript turns those entries into expandable menus.
JavaScript turns selected entries into expandable menus.


Each dropdown's contents are defined HERE.
The top-level entries DO NOT need to be real wiki pages.
 
To add another dropdown later, add another entry to the "menus" object.


===============================================================================
===============================================================================
Line 24: Line 22:
     /*
     /*
     ===========================================================================
     ===========================================================================
     DROPDOWN CONTENT
     DROPDOWN MENUS
     ===========================================================================
     ===========================================================================


     Each key must exactly match the text of a sidebar entry.
     The name on the left must exactly match the text in MediaWiki:Sidebar.
 
    The value is an array containing the pages that should appear underneath
    that entry.
 
    Example:
 
        Locations: [
            'Continents',
            'Kingdoms',
            'Towns'
        ]
 
    creates:


        Locations ▼
    The names inside [ ] are the wiki pages that appear when the menu opens.
            Continents
            Kingdoms
            Towns


     ===========================================================================
     ===========================================================================
Line 52: Line 34:
     var menus = {
     var menus = {


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


         /*
         'Religions': [
        Add future dropdowns here.
 
        Example:
 
        Religions: [
             'The Valor',
             'The Valor',
             'The Brumal'
             'The Brumal'
         ],
         ],


         People: [
         'People': [
             'High Lord Kip',
             'High Lord Kip',
             'Queen Melena'
             'Queen Melena'
Line 78: Line 55:
             'War'
             'War'
         ]
         ]
        */


     };
     };
Line 85: Line 61:
     /*
     /*
     ===========================================================================
     ===========================================================================
     FIND THE TIMELESS SIDEBAR
     FIND THE TIMeless SIDEBAR
     ===========================================================================
     ===========================================================================
     */
     */
Line 98: Line 74:
     /*
     /*
     ===========================================================================
     ===========================================================================
     PROCESS EACH DROPDOWN
     FIND EVERY SIDEBAR LINK
     ===========================================================================
     ===========================================================================
     */
     */


     Object.keys( menus ).forEach( function ( menuName ) {
     sidebar.find( 'a' ).each( function () {
 
        var link = $( this );


         /*
         /*
         Find the sidebar link whose visible text matches the menu name.
         Get only the visible text.
 
        trim() removes extra spaces.
         */
         */


         var mainLink = sidebar.find( 'a' ).filter( function () {
         var name = $.trim( link.clone().children().remove().end().text() );
            return $.trim( $( this ).text() ) === menuName;
        } ).first();




         /*
         /*
         If the sidebar entry doesn't exist, skip it.
         Check whether this sidebar item is one of our dropdowns.
         */
         */


         if ( !mainLink.length ) {
         if ( !Object.prototype.hasOwnProperty.call( menus, name ) ) {
             return;
             return;
         }
         }
Line 123: Line 101:


         /*
         /*
         Find the <li> containing the sidebar link.
         =======================================================================
        FIND THE CONTAINER
        =======================================================================
         */
         */


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




         /*
         /*
         Create the dropdown list.
         =======================================================================
        CREATE THE DROPDOWN
        =======================================================================
         */
         */


Line 138: Line 120:


         /*
         /*
         Add each page to the dropdown.
         =======================================================================
        CREATE EACH LINK
        =======================================================================
         */
         */


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


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


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


             dropdown.append( item );
             dropdown.append( childItem );


         } );
         } );
Line 156: Line 140:


         /*
         /*
         Add the dropdown underneath the main navigation item.
         =======================================================================
        ADD DROPDOWN TO SIDEBAR
        =======================================================================
         */
         */


Line 163: Line 149:


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


Line 170: Line 156:


         /*
         /*
         Make the main navigation item behave like a button.
         =======================================================================
 
        MAKE THE TITLE A DROPDOWN BUTTON
         Clicking it opens or closes the dropdown instead of opening a page.
         =======================================================================
         */
         */


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


             event.preventDefault();
             event.preventDefault();
Line 181: Line 167:
             dropdown.stop( true, true ).slideToggle( 150 );
             dropdown.stop( true, true ).slideToggle( 150 );


         } );
         });




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


         mainLink.append(
         link.append(
             $( '<span>' )
             $( '<span>' )
                 .addClass( 'exuvia-dropdown-arrow' )
                 .addClass( 'exuvia-dropdown-arrow' )
Line 194: Line 182:
         );
         );


     } );
     });


} );
});

Revision as of 01:52, 26 August 2026

/*
===============================================================================
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( ' ▼' )
        );

    });

});
Retrieved from "https://exuviawiki.duckdns.org/index.php?title=MediaWiki:Timeless.js&oldid=38"