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. */
/* Tab Navigation System*/
/* Any JavaScript here will be loaded for all users on every page load. */
/* Tab Navigation System */
(function() {
'use strict';
// Initialize when document is ready
$(document).ready(function() {
// Small delay to ensure everything is rendered
setTimeout(function() {
initializeTabs();
initializeSubTabs();
// Make sure at least one tab is active
enforceActiveTabsOnLoad();
}, 200);
});
// Make sure there's always an active tab
function enforceActiveTabsOnLoad() {
// Ensure main tabs have active tab
$('.tab-navigation').each(function() {
var $container = $(this);
if ($container.find('> .tab-nav > .tab-button.active').length === 0) {
$container.find('> .tab-nav > .tab-button').first().addClass('active');
var firstTabId = $container.find('> .tab-nav > .tab-button').first().data('target');
$container.find('#' + firstTabId).addClass('active');
}
});
// Ensure sub tabs have active tab
$('.sub-tab-navigation').each(function() {
var $container = $(this);
if ($container.find('> .tab-nav > .tab-button.active').length === 0) {
$container.find('> .tab-nav > .tab-button').first().addClass('active');
var firstTabId = $container.find('> .tab-nav > .tab-button').first().data('target');
$container.find('#' + firstTabId).addClass('active');
}
});
}
function initializeTabs() {
// Find all tab containers on the page
$('.tab-navigation').each(function(index) {
var tabContainerId = 'tab-container-' + index;
$(this).attr('id', tabContainerId);
var $container = $('#' + tabContainerId);
var $tabButtons = $container.find('> .tab-nav > .tab-button');
var $tabPanes = $container.find('> .tab-content > .tab-pane');
// Add click handlers to tab buttons
$tabButtons.off('click').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var targetId = $this.data('target');
// Remove active class from all buttons and panes in this container
$container.find('> .tab-nav > .tab-button').removeClass('active');
$container.find('> .tab-content > .tab-pane').removeClass('active');
// Add active class to clicked button and corresponding pane
$this.addClass('active');
$container.find('#' + targetId).addClass('active');
// If this tab has a sub-tab that's active, ensure it's visible
var $activeSubTab = $container.find('#' + targetId + ' .sub-tab-navigation .tab-button.active');
if ($activeSubTab.length) {
$activeSubTab.trigger('click');
}
return false;
});
});
}
// Initialize nested sub-tabs
function initializeSubTabs() {
$('.sub-tab-navigation').each(function(index) {
var subTabContainerId = 'sub-tab-container-' + index;
$(this).attr('id', subTabContainerId);
var $container = $('#' + subTabContainerId);
var $tabButtons = $container.find('> .tab-nav > .tab-button');
var $tabPanes = $container.find('> .tab-content > .tab-pane');
// Add click handlers to tab buttons
$tabButtons.off('click').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var targetId = $this.data('target');
// Remove active class from all buttons and panes in this container
$container.find('> .tab-nav > .tab-button').removeClass('active');
$container.find('> .tab-content > .tab-pane').removeClass('active');
// Add active class to clicked button and corresponding pane
$this.addClass('active');
$container.find('#' + targetId).addClass('active');
// Store the active tab state in session storage for persistence
try {
sessionStorage.setItem('activeSubTab-' + subTabContainerId, targetId);
} catch (e) {
console.log('Unable to save tab state to session storage');
}
return false;
});
// Check if there's a stored active tab
try {
var activeTabId = sessionStorage.getItem('activeSubTab-' + subTabContainerId);
if (activeTabId && $container.find('#' + activeTabId).length > 0) {
$container.find('.tab-button[data-target="' + activeTabId + '"]').trigger('click');
}
} catch (e) {
console.log('Unable to retrieve tab state from session storage');
}
});
}
})();
/* Add Tooltip functionality for map links */
(function() {
'use strict';
$(document).ready(function() {
$('span.material-button a').each(function() {
var href = $(this).attr('href');
if (href && href.indexOf('world-map') !== -1) {
$(this).parent().attr('title', 'Click to view location on map');
// Optional: Add map icon
$(this).prepend('<span class="map-icon">🗺️ </span>');
}
});
});
})();
/* Enhanced Image Previews */
(function() {
'use strict';
$(document).ready(function() {
$('.thumbimage').on('mouseenter', function() {
$(this).css('transform', 'scale(1.05)');
$(this).css('transition', 'transform 0.3s ease');
$(this).css('box-shadow', '0 8px 16px rgba(0,0,0,0.2)');
}).on('mouseleave', function() {
$(this).css('transform', '');
$(this).css('box-shadow', '');
});
});
})();
/* Fix TOC positioning with tabs */
(function() {
'use strict';
$(document).ready(function() {
// If both TOC and tab navigation exist on the page
if ($('#toc').length && $('.tab-navigation').length) {
// Add clearfix to TOC
$('#toc').addClass('clearfix');
// Ensure TOC is above tab content in z-index
$('#toc').css('position', 'relative');
$('#toc').css('z-index', '2');
}
});
})();
/* Improve Mobile Experience */
(function() {
'use strict';
$(document).ready(function() {
// Check if we're on a mobile device
var isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
if (isMobile) {
// Make tab navigation scrollable on mobile
$('.tab-nav').css({
'overflow-x': 'auto',
'white-space': 'nowrap',
'-webkit-overflow-scrolling': 'touch'
});
// Ensure tab buttons don't wrap
$('.tab-button').css({
'display': 'inline-block',
'float': 'none'
});
// Add slight delay to image hover effects for better mobile experience
$('.thumbimage').each(function() {
var $this = $(this);
$this.on('touchstart', function() {
$this.css('transform', 'scale(1.05)');
$this.css('transition', 'transform 0.3s ease');
$this.css('box-shadow', '0 8px 16px rgba(0,0,0,0.2)');
setTimeout(function() {
$this.css('transform', '');
$this.css('box-shadow', '');
}, 1000);
});
});
}
});
})();
/* Save tab state across page loads */
(function() {
'use strict';
$(document).ready(function() {
// Check if we should restore tab states
try {
var pageTabState = sessionStorage.getItem('pageTabState-' + window.location.pathname);
if (pageTabState) {
var tabStates = JSON.parse(pageTabState);
// Restore main tab states
if (tabStates.mainTabs) {
$.each(tabStates.mainTabs, function(containerId, activeTabId) {
$('#' + containerId + ' > .tab-nav > .tab-button[data-target="' + activeTabId + '"]').trigger('click');
});
}
// Restore sub tab states
if (tabStates.subTabs) {
$.each(tabStates.subTabs, function(containerId, activeTabId) {
$('#' + containerId + ' > .tab-nav > .tab-button[data-target="' + activeTabId + '"]').trigger('click');
});
}
}
} catch (e) {
console.log('Error restoring tab state:', e);
}
// Setup save on tab change
$('.tab-button').on('click', function() {
saveTabStates();
});
function saveTabStates() {
try {
var tabStates = {
mainTabs: {},
subTabs: {}
};
// Save main tab states
$('.tab-navigation').each(function() {
var id = $(this).attr('id');
var activeTabId = $(this).find('> .tab-nav > .tab-button.active').data('target');
tabStates.mainTabs[id] = activeTabId;
});
// Save sub tab states
$('.sub-tab-navigation').each(function() {
var id = $(this).attr('id');
var activeTabId = $(this).find('> .tab-nav > .tab-button.active').data('target');
tabStates.subTabs[id] = activeTabId;
});
sessionStorage.setItem('pageTabState-' + window.location.pathname, JSON.stringify(tabStates));
} catch (e) {
console.log('Error saving tab state:', e);
}
}
});
})();
