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 5: Line 5:
      
      
     // Main tab click handler
     // Main tab click handler
     $('.tab-navigation > .tab-nav > .tab-button').click(function(e) {
     $('.tab-navigation .tab-button').click(function(e) {
         e.preventDefault();
         e.preventDefault();
          
          
         var targetId = $(this).data('target');
         var targetId = $(this).data('target');
          
          
         // Main tab navigation
         if ($(this).closest('.tab-navigation').length) {
        $(this).siblings('.tab-button').removeClass('active');
            // Main tab clicked
        $(this).addClass('active');
            $('.tab-navigation .tab-button').removeClass('active');
       
             $('.tab-content .tab-pane').removeClass('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
             $(this).addClass('active');
            var firstSubTargetId = $firstSubTab.data('target');
             $('#' + targetId).addClass('active');
             $subNav.find('> .tab-content > .tab-pane').removeClass('active');
             $('#' + firstSubTargetId).addClass('active');
         }
         }
     });
     });
      
      
     // Sub-tab click handler
     // Sub-tab click handler - separate from main tab handler
     $('.sub-tab-navigation > .tab-nav > .tab-button').click(function(e) {
     $('.sub-tab-navigation .tab-button').click(function(e) {
         e.preventDefault();
         e.preventDefault();
        e.stopPropagation(); // Prevent event from bubbling up
          
          
         var targetId = $(this).data('target');
         var targetId = $(this).data('target');
         var $subNav = $(this).closest('.sub-tab-navigation');
         var $subNav = $(this).closest('.sub-tab-navigation');
          
          
         // Update sub-tab buttons
         // Only affect buttons and panes within this sub-tab-navigation
         $subNav.find('> .tab-nav > .tab-button').removeClass('active');
         $subNav.find('.tab-button').removeClass('active');
        $subNav.find('.tab-pane').removeClass('active');
       
         $(this).addClass('active');
         $(this).addClass('active');
       
        // Update sub-tab content
        $subNav.find('> .tab-content > .tab-pane').removeClass('active');
         $('#' + targetId).addClass('active');
         $('#' + targetId).addClass('active');
     });
     });
      
      
     // Set initial states
     // Set initial states for main tabs
     $('.tab-navigation').each(function() {
     $('.tab-navigation').each(function() {
         var $mainNav = $(this);
         var $nav = $(this);
        var $activeTab = $nav.find('.tab-button.active');
          
          
        // Set first main tab active if none are
         if (!$activeTab.length) {
         if (!$mainNav.find('> .tab-nav > .tab-button.active').length) {
             $activeTab = $nav.find('.tab-button').first();
             var $firstMainTab = $mainNav.find('> .tab-nav > .tab-button').first();
             $activeTab.addClass('active');
             $firstMainTab.addClass('active');
             $('#' + $activeTab.data('target')).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
     // Set initial states for sub-tabs
     var $activeMainTab = $('.tab-navigation > .tab-nav > .tab-button.active');
     $('.sub-tab-navigation').each(function() {
    if ($activeMainTab.length) {
         var $subNav = $(this);
         var mainTargetId = $activeMainTab.data('target');
         var $activeSubTab = $subNav.find('.tab-button.active');
         var $subNav = $('#' + mainTargetId).find('.sub-tab-navigation');
          
          
         if ($subNav.length && !$subNav.find('> .tab-nav > .tab-button.active').length) {
         if (!$activeSubTab.length) {
             var $firstSubTab = $subNav.find('> .tab-nav > .tab-button').first();
             $activeSubTab = $subNav.find('.tab-button').first();
             $firstSubTab.addClass('active');
             $activeSubTab.addClass('active');
              
             $('#' + $activeSubTab.data('target')).addClass('active');
            var subTargetId = $firstSubTab.data('target');
            $('#' + subTargetId).addClass('active');
         }
         }
     }
     });
});
});

Revision as of 06:45, 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-navigation .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-content .tab-pane').removeClass('active');
            
            $(this).addClass('active');
            $('#' + targetId).addClass('active');
        }
    });
    
    // Sub-tab click handler - separate from main tab handler
    $('.sub-tab-navigation .tab-button').click(function(e) {
        e.preventDefault();
        e.stopPropagation(); // Prevent event from bubbling up
        
        var targetId = $(this).data('target');
        var $subNav = $(this).closest('.sub-tab-navigation');
        
        // Only affect buttons and panes within this sub-tab-navigation
        $subNav.find('.tab-button').removeClass('active');
        $subNav.find('.tab-pane').removeClass('active');
        
        $(this).addClass('active');
        $('#' + targetId).addClass('active');
    });
    
    // Set initial states for main tabs
    $('.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');
        }
    });
    
    // Set initial states for sub-tabs
    $('.sub-tab-navigation').each(function() {
        var $subNav = $(this);
        var $activeSubTab = $subNav.find('.tab-button.active');
        
        if (!$activeSubTab.length) {
            $activeSubTab = $subNav.find('.tab-button').first();
            $activeSubTab.addClass('active');
            $('#' + $activeSubTab.data('target')).addClass('active');
        }
    });
});