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-button').click(function(e) { | $('.tab-navigation > .tab-nav > .tab-button').click(function(e) { | ||
e.preventDefault(); | e.preventDefault(); | ||
var targetId = $(this).data('target'); | var targetId = $(this).data('target'); | ||
// Main tab navigation | |||
$(this).siblings('.tab-button').removeClass('active'); | |||
$(this).addClass('active'); | |||
$('.tab- | |||
// 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'); | |||
$(this).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 = $('#' + | var $subNav = $('#' + mainTargetId).find('.sub-tab-navigation'); | ||
if ($subNav.length) { | if ($subNav.length) { | ||
var $firstSubTab = $subNav.find('.tab- | var $firstSubTab = $subNav.find('> .tab-nav > .tab-button').first(); | ||
$firstSubTab.addClass('active'); | |||
$ | |||
$firstSubTab. | var subTargetId = $firstSubTab.data('target'); | ||
$('#' + | $('#' + subTargetId).addClass('active'); | ||
} | } | ||
} | } | ||
}); | }); | ||
// | // Initialize any sub-tabs in the active main tab | ||
$('.tab-navigation'). | var $activeMainTab = $('.tab-navigation > .tab-nav > .tab-button.active'); | ||
var | if ($activeMainTab.length) { | ||
var $ | var mainTargetId = $activeMainTab.data('target'); | ||
var $subNav = $('#' + mainTargetId).find('.sub-tab-navigation'); | |||
if (!$ | 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'); | |||
} | } | ||
} | |||
} | |||
}); | }); | ||
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-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');
}
}
});