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

/* Any JavaScript here will be loaded for all users on every page load. */
/* ============================================================
   Ross Tabs — tab switching logic
   Add this block to MediaWiki:Common.js
   ============================================================ */
( function () {
    'use strict';

    function initRossTabs( container ) {
        var buttons = container.querySelectorAll( '.ross-tab-btn' );
        var panels  = container.querySelectorAll( '.ross-tab-panel' );

        buttons.forEach( function ( btn ) {
            btn.addEventListener( 'click', function () {
                var targetId = btn.getAttribute( 'data-tab' );

                // Deactivate all buttons and panels in this container
                buttons.forEach( function ( b ) { b.classList.remove( 'active' ); } );
                panels.forEach(  function ( p ) { p.classList.remove( 'active' ); } );

                // Activate the clicked button and its panel
                btn.classList.add( 'active' );
                var target = container.querySelector( '#' + targetId );
                if ( target ) { target.classList.add( 'active' ); }
            } );
        } );
    }

    function initAllRossTabs() {
        document.querySelectorAll( '.ross-tabs-container' ).forEach( initRossTabs );
    }

    // Initialise on DOM ready (works whether the script runs early or late)
    if ( document.readyState === 'loading' ) {
        document.addEventListener( 'DOMContentLoaded', initAllRossTabs );
    } else {
        initAllRossTabs();
    }

    // Re-initialise after any MediaWiki dynamic content load (e.g. VisualEditor)
    mw.hook( 'wikipage.content' ).add( function ( $content ) {
        $content[ 0 ].querySelectorAll( '.ross-tabs-container' ).forEach( initRossTabs );
    } );

}() );