MediaWiki:Common.js
From Ultimate Dragon Ball Online Wiki
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 race tab click handler
$('.tab-navigation .tab-button').click(function(e) {
e.preventDefault();
var targetId = $(this).data('target');
// Update main race tabs
$('.tab-navigation .tab-button').removeClass('active');
$(this).addClass('active');
// Update main content panes
$('.tab-content > .tab-pane').removeClass('active');
$('#' + targetId).addClass('active');
// Always activate the overview tab for the selected race
var overviewTab = $('#' + targetId + ' .sub-tab-navigation .tab-button').first();
var overviewContent = $('#' + overviewTab.data('target'));
// Set overview tab and content as active
$('#' + targetId + ' .sub-tab-navigation .tab-button').removeClass('active');
overviewTab.addClass('active');
$('#' + targetId + ' .sub-tab-navigation .tab-content .tab-pane').removeClass('active');
overviewContent.addClass('active');
});
// Sub-class tab click handler
$('.sub-tab-navigation .tab-button').click(function(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var $subNav = $this.closest('.sub-tab-navigation');
var targetId = $this.data('target');
// Only update the buttons in this sub-tab navigation
$subNav.find('.tab-button').removeClass('active');
$this.addClass('active');
// Find and update only the content panes within this sub-tab section
$subNav.find('.tab-content .tab-pane').removeClass('active');
$('#' + targetId).addClass('active');
// Keep the parent tab-pane active
$this.closest('.tab-pane').addClass('active');
});
// Initial setup
function initializeTabs() {
// Set first race tab active if none are
var $mainNav = $('.tab-navigation');
if (!$mainNav.find('.tab-button.active').length) {
var $firstMainTab = $mainNav.find('.tab-button').first();
$firstMainTab.addClass('active');
var mainTargetId = $firstMainTab.data('target');
$('#' + mainTargetId).addClass('active');
// Set its overview tab active
var $overviewTab = $('#' + mainTargetId + ' .sub-tab-navigation .tab-button').first();
$overviewTab.addClass('active');
$('#' + $overviewTab.data('target')).addClass('active');
}
// For each race tab that's active
$('.tab-navigation .tab-button.active').each(function() {
var mainTargetId = $(this).data('target');
var $mainContent = $('#' + mainTargetId);
// Ensure overview tab is active if no sub-tab is active
var $subNav = $mainContent.find('.sub-tab-navigation');
if ($subNav.length && !$subNav.find('.tab-button.active').length) {
var $overviewTab = $subNav.find('.tab-button').first();
$overviewTab.addClass('active');
$('#' + $overviewTab.data('target')).addClass('active');
}
});
}
// Run initial setup
initializeTabs();
});