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. */

$(document).ready(function() {
    'use strict';
    
    // Main tab click handler
    $('.tab-navigation > .tab-nav > .tab-button').click(function(e) {
        e.preventDefault();
        
        var targetId = $(this).data('target');
        
        // Main tab navigation
        $(this).siblings('.tab-button').removeClass('active');
        $(this).addClass('active');
        
        // Hide all main tab panes
        $('.tab-navigation > .tab-content > .tab-pane').removeClass('active');
        // Show clicked tab's content
        $('#' + targetId).addClass('active');
        
        // Reset sub-tabs to first tab
        var $subNav = $('#' + targetId).find('.sub-tab-navigation');
        if ($subNav.length) {
            var $firstSubTab = $subNav.find('> .tab-nav > .tab-button').first();
            $subNav.find('> .tab-nav > .tab-button').removeClass('active');
            $firstSubTab.addClass('active');
            
            // Reset sub-tab content
            var firstSubTargetId = $firstSubTab.data('target');
            $subNav.find('> .tab-content > .tab-pane').removeClass('active');
            $('#' + firstSubTargetId).addClass('active');
        }
    });
    
    // Sub-tab click handler
    $('.sub-tab-navigation > .tab-nav > .tab-button').click(function(e) {
        e.preventDefault();
        
        var targetId = $(this).data('target');
        var $subNav = $(this).closest('.sub-tab-navigation');
        
        // Update sub-tab buttons
        $subNav.find('> .tab-nav > .tab-button').removeClass('active');
        $(this).addClass('active');
        
        // Update sub-tab content
        $subNav.find('> .tab-content > .tab-pane').removeClass('active');
        $('#' + targetId).addClass('active');
    });
    
    // Set initial states
    $('.tab-navigation').each(function() {
        var $mainNav = $(this);
        
        // Set first main tab active if none are
        if (!$mainNav.find('> .tab-nav > .tab-button.active').length) {
            var $firstMainTab = $mainNav.find('> .tab-nav > .tab-button').first();
            $firstMainTab.addClass('active');
            
            var mainTargetId = $firstMainTab.data('target');
            $('#' + mainTargetId).addClass('active');
            
            // Initialize its sub-tabs if any
            var $subNav = $('#' + mainTargetId).find('.sub-tab-navigation');
            if ($subNav.length) {
                var $firstSubTab = $subNav.find('> .tab-nav > .tab-button').first();
                $firstSubTab.addClass('active');
                
                var subTargetId = $firstSubTab.data('target');
                $('#' + subTargetId).addClass('active');
            }
        }
    });
    
    // Initialize any sub-tabs in the active main tab
    var $activeMainTab = $('.tab-navigation > .tab-nav > .tab-button.active');
    if ($activeMainTab.length) {
        var mainTargetId = $activeMainTab.data('target');
        var $subNav = $('#' + mainTargetId).find('.sub-tab-navigation');
        
        if ($subNav.length && !$subNav.find('> .tab-nav > .tab-button.active').length) {
            var $firstSubTab = $subNav.find('> .tab-nav > .tab-button').first();
            $firstSubTab.addClass('active');
            
            var subTargetId = $firstSubTab.data('target');
            $('#' + subTargetId).addClass('active');
        }
    }
});