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. */

$(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();
    
    // 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>');
        }
    });
    
    // Enhanced Image Previews
    $('.thumbimage').hover(function() {
        $(this).css({
            'transform': 'scale(1.05)',
            'transition': 'transform 0.3s ease',
            'box-shadow': '0 8px 16px rgba(0,0,0,0.2)'
        });
    }, function() {
        $(this).css({
            'transform': '',
            'box-shadow': ''
        });
    });
    
    // Mobile Experience Optimization
    if (window.matchMedia("only screen and (max-width: 768px)").matches) {
        // Make tab navigation scrollable
        $('.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'
        });
        
        // Touch-friendly image previews
        $('.thumbimage').on('touchstart', function() {
            var $this = $(this);
            $this.css({
                'transform': 'scale(1.05)',
                'transition': 'transform 0.3s ease',
                'box-shadow': '0 8px 16px rgba(0,0,0,0.2)'
            });
            
            setTimeout(function() {
                $this.css({
                    'transform': '',
                    'box-shadow': ''
                });
            }, 1000);
        });
    }
});