Revision as of 06:27, 26 February 2025

/* Any JavaScript here will be loaded for all users on every page load. */
mw.loader.using(['jquery'], function ($) {
    'use strict';
    
    // Wait for DOM to be ready using MediaWiki hook
    mw.hook('dom.ready').add(function() {
        // Tab Navigation System
        (function() {
            function initializeTabs() {
                // Main Race Tab Navigation
                $('.tab-navigation > .tab-nav > .tab-button').on('click', function(e) {
                    e.preventDefault();
                    var $this = $(this);
                    var targetId = $this.data('target');
                    
                    // Remove active class from all main tab buttons and panes
                    $this.closest('.tab-navigation')
                        .find('> .tab-nav > .tab-button').removeClass('active');
                    $this.closest('.tab-navigation')
                        .siblings('.tab-content')
                        .find('> .tab-pane').removeClass('active');
                    
                    // Add active class to clicked button and corresponding pane
                    $this.addClass('active');
                    $this.closest('.tab-navigation')
                        .siblings('.tab-content')
                        .find('> #' + targetId).addClass('active');
                    
                    // Reset sub-tabs to first tab when changing main tab
                    var $subTabNav = $('#' + targetId + ' .sub-tab-navigation');
                    if ($subTabNav.length) {
                        $subTabNav.find('> .tab-nav > .tab-button').removeClass('active');
                        $subTabNav.find('> .tab-nav > .tab-button').first().addClass('active');
                        
                        var firstSubTabId = $subTabNav.find('> .tab-nav > .tab-button').first().data('target');
                        $subTabNav.find('> .tab-content > .tab-pane').removeClass('active');
                        $subTabNav.find('> .tab-content > #' + firstSubTabId).addClass('active');
                    }
                });
                
                // Sub-Tab Navigation
                $('.sub-tab-navigation > .tab-nav > .tab-button').on('click', function(e) {
                    e.preventDefault();
                    var $this = $(this);
                    var targetId = $this.data('target');
                    
                    // Remove active class from all sub-tab buttons and panes
                    $this.closest('.sub-tab-navigation')
                        .find('> .tab-nav > .tab-button').removeClass('active');
                    $this.closest('.sub-tab-navigation')
                        .find('> .tab-content > .tab-pane').removeClass('active');
                    
                    // Add active class to clicked button and corresponding pane
                    $this.addClass('active');
                    $this.closest('.sub-tab-navigation')
                        .find('> .tab-content > #' + targetId).addClass('active');
                });
            }
            
            // Initialize tabs
            initializeTabs();
            
            // Ensure at least one main tab and sub-tab is active
            $('.tab-navigation').each(function() {
                var $mainNavigation = $(this);
                if ($mainNavigation.find('> .tab-nav > .tab-button.active').length === 0) {
                    $mainNavigation.find('> .tab-nav > .tab-button').first().addClass('active');
                }
                
                var activeMainTabId = $mainNavigation.find('> .tab-nav > .tab-button.active').data('target');
                $mainNavigation.siblings('.tab-content')
                    .find('> #' + activeMainTabId).addClass('active');
                
                // Handle sub-tabs within the active main tab
                var $subNavigation = $('#' + activeMainTabId + ' .sub-tab-navigation');
                if ($subNavigation.length) {
                    if ($subNavigation.find('> .tab-nav > .tab-button.active').length === 0) {
                        $subNavigation.find('> .tab-nav > .tab-button').first().addClass('active');
                    }
                    
                    var activeSubTabId = $subNavigation.find('> .tab-nav > .tab-button.active').data('target');
                    $subNavigation.find('> .tab-content > .tab-pane').removeClass('active');
                    $subNavigation.find('> .tab-content > #' + activeSubTabId).addClass('active');
                }
            });
        })();

        // Add Tooltip functionality for map links
        (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() {
            $('.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', '');
            });
        })();

        // Improve Mobile Experience
        (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);
                    });
                });
            }
        })();
    });
});