MediaWiki:Common.js

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. */
mw.loader.using(['jquery', 'mediawiki.util']).done(function ($) {
    'use strict';

    // Wait for wiki content to be ready
    mw.hook('wikipage.content').add(function($content) {
        console.log('Setting up tab navigation');
        
        try {
            // Main tabs (Race selection)
            $content.find('.tab-button').on('click', function(e) {
                e.preventDefault();
                var targetId = $(this).data('target');
                if (!targetId) return;

                // Handle main tab navigation
                if ($(this).closest('.tab-navigation').length) {
                    // Update main tabs
                    $('.tab-navigation .tab-button').removeClass('active');
                    $('.tab-content .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');
                        $firstSubTab.addClass('active');
                        
                        var firstSubTargetId = $firstSubTab.data('target');
                        $subNav.find('.tab-pane').removeClass('active');
                        $('#' + firstSubTargetId).addClass('active');
                    }
                }
                // Handle sub-tab navigation
                else if ($(this).closest('.sub-tab-navigation').length) {
                    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 active states
            $content.find('.tab-navigation').each(function() {
                var $nav = $(this);
                var $activeButton = $nav.find('.tab-button.active');
                
                if ($activeButton.length === 0) {
                    $activeButton = $nav.find('.tab-button').first().addClass('active');
                }
                
                var targetId = $activeButton.data('target');
                if (targetId) {
                    $('#' + targetId).addClass('active');
                    
                    // Handle sub-tabs
                    var $subNav = $('#' + targetId).find('.sub-tab-navigation');
                    if ($subNav.length) {
                        var $firstSubTab = $subNav.find('.tab-button').first();
                        $firstSubTab.addClass('active');
                        
                        var firstSubTargetId = $firstSubTab.data('target');
                        $('#' + firstSubTargetId).addClass('active');
                    }
                }
            });

            // Add map tooltips
            $content.find('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');
                    $(this).prepend('<span class="map-icon">🗺️ </span>');
                }
            });

            // Image previews
            $content.find('.thumbimage').on('mouseenter mouseleave', function(e) {
                var styles = e.type === 'mouseenter' ? {
                    'transform': 'scale(1.05)',
                    'transition': 'transform 0.3s ease',
                    'box-shadow': '0 8px 16px rgba(0,0,0,0.2)'
                } : {
                    'transform': '',
                    'box-shadow': ''
                };
                $(this).css(styles);
            });

            // Mobile optimization
            if (window.matchMedia("only screen and (max-width: 768px)").matches) {
                $content.find('.tab-nav').css({
                    'overflow-x': 'auto',
                    'white-space': 'nowrap',
                    '-webkit-overflow-scrolling': 'touch'
                });
                
                $content.find('.tab-button').css({
                    'display': 'inline-block',
                    'float': 'none'
                });
            }
        } catch (error) {
            console.error('Error in tab initialization:', error);
        }
    });
});