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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */
mw.loader.using(['jquery'], function ($) {
    'use strict';

    function initTabs() {
        // Main tab click handler
        $('.tab-button').on('click', function(e) {
            e.preventDefault();
            
            var $this = $(this);
            var targetId = $this.attr('data-target');
            
            // If this is a main tab
            if ($this.parent('.tab-nav').parent('.tab-navigation').length) {
                // Deactivate all main tabs
                $('.tab-navigation .tab-button').removeClass('active');
                $this.addClass('active');
                
                // Hide all main content
                $('.tab-pane').removeClass('active');
                $('#' + targetId).addClass('active');
                
                // Reset sub-tabs to first tab
                if ($('#' + targetId + ' .sub-tab-navigation').length) {
                    var $subNav = $('#' + targetId + ' .sub-tab-navigation');
                    var $firstSubTab = $subNav.find('.tab-button').first();
                    
                    $subNav.find('.tab-button').removeClass('active');
                    $firstSubTab.addClass('active');
                    
                    $subNav.find('.tab-pane').removeClass('active');
                    $('#' + $firstSubTab.attr('data-target')).addClass('active');
                }
            }
            // If this is a sub-tab
            else if ($this.parent('.tab-nav').parent('.sub-tab-navigation').length) {
                // Only update tabs within this sub-tab-navigation
                var $subNav = $this.closest('.sub-tab-navigation');
                
                $subNav.find('.tab-button').removeClass('active');
                $this.addClass('active');
                
                $subNav.find('.tab-pane').removeClass('active');
                $('#' + targetId).addClass('active');
            }
        });
        
        // Ensure initial states are set
        $('.tab-navigation').each(function() {
            var $mainNav = $(this);
            
            // Set first main tab active if none are
            if (!$mainNav.find('.tab-button.active').length) {
                var $firstMainTab = $mainNav.find('.tab-button').first();
                $firstMainTab.addClass('active');
                $('#' + $firstMainTab.attr('data-target')).addClass('active');
            }
            
            // For each main tab content
            $mainNav.find('.tab-button').each(function() {
                var targetId = $(this).attr('data-target');
                var $mainContent = $('#' + targetId);
                
                // If this tab has sub-tabs
                if ($mainContent.find('.sub-tab-navigation').length) {
                    var $subNav = $mainContent.find('.sub-tab-navigation');
                    
                    // Set first sub-tab active if none are
                    if (!$subNav.find('.tab-button.active').length) {
                        var $firstSubTab = $subNav.find('.tab-button').first();
                        $firstSubTab.addClass('active');
                        $('#' + $firstSubTab.attr('data-target')).addClass('active');
                    }
                }
            });
        });
    }

    // Initialize when document is ready
    $(document).ready(function() {
        initTabs();
    });

    // Re-initialize when MediaWiki content changes
    mw.hook('wikipage.content').add(function() {
        initTabs();
    });
});