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. */
$(function() {
    'use strict';
    
    // Main tabs (Race selection)
    $(document).on('click', '.tab-navigation > .tab-nav > .tab-button', function(e) {
        e.preventDefault();
        var targetId = $(this).data('target');
        if (!targetId) return;

        // 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');
        }
    });

    // Sub-tab navigation
    $(document).on('click', '.sub-tab-navigation > .tab-nav > .tab-button', function(e) {
        e.preventDefault();
        var targetId = $(this).data('target');
        if (!targetId) return;

        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
    $('.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
    $('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
    $(document).on('mouseenter mouseleave', '.thumbimage', 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) {
        $('.tab-nav').css({
            'overflow-x': 'auto',
            'white-space': 'nowrap',
            '-webkit-overflow-scrolling': 'touch'
        });
        
        $('.tab-button').css({
            'display': 'inline-block',
            'float': 'none'
        });
    }
});