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() {
        console.log('Tab navigation script loaded');

        function initializeTabs() {
            try {
                // Main tabs (Race selection)
                $('.tab-button').on('click', function(e) {
                    e.preventDefault();
                    console.log('Tab clicked:', $(this).data('target'));
                    
                    var targetId = $(this).data('target');
                    if (!targetId) {
                        console.error('No target ID found for tab');
                        return;
                    }

                    // Handle main tab navigation
                    if ($(this).closest('.tab-navigation').length) {
                        // Remove active class from all main tabs and contents
                        $('.tab-navigation .tab-button').removeClass('active');
                        $('.tab-navigation').siblings('.tab-content').children('.tab-pane').removeClass('active');
                        
                        // Activate clicked tab and its content
                        $(this).addClass('active');
                        $('#' + targetId).addClass('active');
                    }
                    // Handle sub-tab navigation
                    else if ($(this).closest('.sub-tab-navigation').length) {
                        var $subNav = $(this).closest('.sub-tab-navigation');
                        
                        // Remove active class from sibling tabs and contents
                        $subNav.find('.tab-button').removeClass('active');
                        $subNav.find('.tab-pane').removeClass('active');
                        
                        // Activate clicked tab and its content
                        $(this).addClass('active');
                        $('#' + targetId).addClass('active');
                    }
                });

                // Set initial active states if not already set
                $('.tab-navigation, .sub-tab-navigation').each(function() {
                    var $nav = $(this);
                    var $buttons = $nav.find('.tab-button');
                    var $activeButton = $buttons.filter('.active');
                    
                    // If no active button, set first one active
                    if ($activeButton.length === 0) {
                        $activeButton = $buttons.first().addClass('active');
                    }
                    
                    // Activate corresponding content
                    if ($activeButton.length) {
                        var targetId = $activeButton.data('target');
                        if (targetId) {
                            $('#' + targetId).addClass('active');
                        }
                    }
                });
                
                console.log('Tab initialization complete');
            } catch (error) {
                console.error('Error initializing tabs:', error);
            }
        }

        // Initialize tabs
        initializeTabs();
        
        // Add Tooltip functionality for map links
        try {
            $('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>');
                }
            });
        } catch (error) {
            console.error('Error setting up tooltips:', error);
        }

        // Enhanced Image Previews
        try {
            $('.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': ''
                });
            });
        } catch (error) {
            console.error('Error setting up image previews:', error);
        }

        // Improve Mobile Experience
        try {
            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);
                    });
                });
            }
        } catch (error) {
            console.error('Error setting up mobile experience:', error);
        }
    });
});