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'], function ($) {
    'use strict';
    
    // Wait for DOM to be ready using MediaWiki hook
    mw.hook('dom.ready').add(function() {
        // Tab Navigation System
        (function() {
            // Main Race Tab Navigation
            $(document).on('click', '.tab-navigation > .tab-nav > .tab-button', function(e) {
                e.preventDefault();
                var $this = $(this);
                var targetId = $this.data('target');
                
                // Remove active class from all main tab buttons
                $this.closest('.tab-nav').find('.tab-button').removeClass('active');
                // Add active class to clicked button
                $this.addClass('active');
                
                // Remove active class from all main tab panes
                $this.closest('.tab-navigation').next('.tab-content').find('> .tab-pane').removeClass('active');
                // Add active class to target pane
                $('#' + targetId).addClass('active');
                
                // Reset sub-tabs to first tab when changing main tab
                var $subTabNav = $('#' + targetId + ' .sub-tab-navigation');
                if ($subTabNav.length) {
                    // Reset sub-tab buttons
                    var $firstSubButton = $subTabNav.find('> .tab-nav > .tab-button').first();
                    $subTabNav.find('> .tab-nav > .tab-button').removeClass('active');
                    $firstSubButton.addClass('active');
                    
                    // Reset sub-tab panes
                    var firstSubTabId = $firstSubButton.data('target');
                    $subTabNav.find('> .tab-content > .tab-pane').removeClass('active');
                    $('#' + firstSubTabId).addClass('active');
                }
            });
            
            // Sub-Tab Navigation
            $(document).on('click', '.sub-tab-navigation > .tab-nav > .tab-button', function(e) {
                e.preventDefault();
                var $this = $(this);
                var targetId = $this.data('target');
                
                // Remove active class from all sub-tab buttons and add to clicked
                $this.closest('.tab-nav').find('.tab-button').removeClass('active');
                $this.addClass('active');
                
                // Remove active class from all sub-tab panes and add to target
                $this.closest('.sub-tab-navigation').find('.tab-content > .tab-pane').removeClass('active');
                $('#' + targetId).addClass('active');
            });
            
            // Ensure initial tab states are set
            $('.tab-navigation').each(function() {
                var $mainNav = $(this);
                var $mainButtons = $mainNav.find('> .tab-nav > .tab-button');
                
                // If no main tab is active, activate the first one
                if (!$mainButtons.filter('.active').length) {
                    $mainButtons.first().addClass('active');
                }
                
                // Get active main tab's target
                var activeMainTabId = $mainButtons.filter('.active').data('target');
                if (activeMainTabId) {
                    // Show active main tab's content
                    $('#' + activeMainTabId).addClass('active');
                    
                    // Handle sub-tabs within active main tab
                    var $subNav = $('#' + activeMainTabId + ' .sub-tab-navigation');
                    if ($subNav.length) {
                        var $subButtons = $subNav.find('> .tab-nav > .tab-button');
                        
                        // If no sub-tab is active, activate the first one
                        if (!$subButtons.filter('.active').length) {
                            $subButtons.first().addClass('active');
                        }
                        
                        // Show active sub-tab's content
                        var activeSubTabId = $subButtons.filter('.active').data('target');
                        if (activeSubTabId) {
                            $('#' + 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');
                    $(this).prepend('<span class="map-icon">🗺️ </span>');
                }
            });
        })();

        // Enhanced Image Previews
        (function() {
            $('.thumbimage').on('mouseenter', function() {
                $(this).css({
                    'transform': 'scale(1.05)',
                    'transition': 'transform 0.3s ease',
                    'box-shadow': '0 8px 16px rgba(0,0,0,0.2)'
                });
            }).on('mouseleave', function() {
                $(this).css({
                    'transform': '',
                    'box-shadow': ''
                });
            });
        })();

        // Improve Mobile Experience
        (function() {
            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'
                });
                
                $('.thumbimage').each(function() {
                    var $this = $(this);
                    $this.on('touchstart', function() {
                        $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);
                    });
                });
            }
        })();
    });
});