MediaWiki:Common.js: Difference between revisions

From Ultimate Dragon Ball Online Wiki

Ravenalien (talk | contribs)
No edit summary
Ravenalien (talk | contribs)
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
mw.loader.using(['jquery'], function ($) {
 
$(document).ready(function() {
     'use strict';
     'use strict';
 
   
     function initTabs() {
     // Main tab click handler
         // Main tab click handler
    $('.tab-button').click(function(e) {
        $('.tab-button').on('click', function(e) {
         e.preventDefault();
             e.preventDefault();
       
        var targetId = $(this).data('target');
       
        if ($(this).closest('.tab-navigation').length) {
            // Main tab clicked
            $('.tab-navigation .tab-button').removeClass('active');
             $('.tab-pane').removeClass('active');
              
              
             var $this = $(this);
             $(this).addClass('active');
             var targetId = $this.attr('data-target');
             $('#' + targetId).addClass('active');
              
              
             // If this is a main tab
             // Reset sub-tabs
            if ($this.parent('.tab-nav').parent('.tab-navigation').length) {
            var $subNav = $('#' + targetId).find('.sub-tab-navigation');
                // Deactivate all main tabs
             if ($subNav.length) {
                $('.tab-navigation .tab-button').removeClass('active');
                 var $firstSubTab = $subNav.find('.tab-button').first();
                $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');
                 $subNav.find('.tab-button').removeClass('active');
                 $this.addClass('active');
                 $subNav.find('.tab-pane').removeClass('active');
                  
                  
                 $subNav.find('.tab-pane').removeClass('active');
                 $firstSubTab.addClass('active');
                 $('#' + targetId).addClass('active');
                 $('#' + $firstSubTab.data('target')).addClass('active');
             }
             }
         });
         } else {
            // Sub tab clicked
            var $subNav = $(this).closest('.sub-tab-navigation');
            $subNav.find('.tab-button').removeClass('active');
            $subNav.find('.tab-pane').removeClass('active');
           
            $(this).addClass('active');
            $('#' + targetId).addClass('active');
        }
    });
   
    // Set initial states
    $('.tab-navigation').each(function() {
        var $nav = $(this);
        var $activeTab = $nav.find('.tab-button.active');
          
          
         // Ensure initial states are set
         if (!$activeTab.length) {
        $('.tab-navigation').each(function() {
            $activeTab = $nav.find('.tab-button').first();
             var $mainNav = $(this);
            $activeTab.addClass('active');
           
             $('#' + $activeTab.data('target')).addClass('active');
            // Set first main tab active if none are
        }
             if (!$mainNav.find('.tab-button.active').length) {
       
                 var $firstMainTab = $mainNav.find('.tab-button').first();
        // Initialize sub-tabs
                 $firstMainTab.addClass('active');
        var $mainContent = $('#' + $activeTab.data('target'));
                 $('#' + $firstMainTab.attr('data-target')).addClass('active');
        var $subNav = $mainContent.find('.sub-tab-navigation');
       
        if ($subNav.length) {
             var $activeSubTab = $subNav.find('.tab-button.active');
            if (!$activeSubTab.length) {
                 $activeSubTab = $subNav.find('.tab-button').first();
                 $activeSubTab.addClass('active');
                 $('#' + $activeSubTab.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();
     });
     });
});
});

Revision as of 06:43, 26 February 2025

/* Any JavaScript here will be loaded for all users on every page load. */

$(document).ready(function() {
    'use strict';
    
    // Main tab click handler
    $('.tab-button').click(function(e) {
        e.preventDefault();
        
        var targetId = $(this).data('target');
        
        if ($(this).closest('.tab-navigation').length) {
            // Main tab clicked
            $('.tab-navigation .tab-button').removeClass('active');
            $('.tab-pane').removeClass('active');
            
            $(this).addClass('active');
            $('#' + targetId).addClass('active');
            
            // Reset sub-tabs
            var $subNav = $('#' + targetId).find('.sub-tab-navigation');
            if ($subNav.length) {
                var $firstSubTab = $subNav.find('.tab-button').first();
                $subNav.find('.tab-button').removeClass('active');
                $subNav.find('.tab-pane').removeClass('active');
                
                $firstSubTab.addClass('active');
                $('#' + $firstSubTab.data('target')).addClass('active');
            }
        } else {
            // Sub tab clicked
            var $subNav = $(this).closest('.sub-tab-navigation');
            $subNav.find('.tab-button').removeClass('active');
            $subNav.find('.tab-pane').removeClass('active');
            
            $(this).addClass('active');
            $('#' + targetId).addClass('active');
        }
    });
    
    // Set initial states
    $('.tab-navigation').each(function() {
        var $nav = $(this);
        var $activeTab = $nav.find('.tab-button.active');
        
        if (!$activeTab.length) {
            $activeTab = $nav.find('.tab-button').first();
            $activeTab.addClass('active');
            $('#' + $activeTab.data('target')).addClass('active');
        }
        
        // Initialize sub-tabs
        var $mainContent = $('#' + $activeTab.data('target'));
        var $subNav = $mainContent.find('.sub-tab-navigation');
        
        if ($subNav.length) {
            var $activeSubTab = $subNav.find('.tab-button.active');
            if (!$activeSubTab.length) {
                $activeSubTab = $subNav.find('.tab-button').first();
                $activeSubTab.addClass('active');
                $('#' + $activeSubTab.data('target')).addClass('active');
            }
        }
    });
});