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. */
/* Tab Navigation System */
(function($) {
    'use strict';
    
    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');
            }
            
            return false;
        });
        
        // 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');
            
            return false;
        });
    }
    
    // Initialize tabs when document is ready
    $(document).ready(function() {
        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');
            }
        });
    });
})(jQuery);

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


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