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', 'mediawiki.util'], function ($, util) {
    'use strict';

    // Wait for both DOM and stylesheets to be ready
    $(window).on('load', function() {
        console.log('Window fully loaded, initializing tabs');
        
        // Ensure we're running after all MediaWiki resources are ready
        mw.hook('wikipage.content').add(function($content) {
            console.log('Wiki content ready, setting up tabs');
            
            try {
                // Main tabs (Race selection)
                $content.find('.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-content .tab-pane').removeClass('active');
                        
                        // Activate clicked tab and its content
                        $(this).addClass('active');
                        $('#' + targetId).addClass('active');

                        // Reset sub-tabs
                        var $subNav = $('#' + targetId).find('.sub-tab-navigation');
                        if ($subNav.length) {
                            var $firstSubTab = $subNav.find('.tab-button').first();
                            var firstSubTargetId = $firstSubTab.data('target');
                            
                            // Activate first sub-tab
                            $subNav.find('.tab-button').removeClass('active');
                            $firstSubTab.addClass('active');
                            
                            // Activate first sub-tab content
                            $subNav.find('.tab-pane').removeClass('active');
                            $('#' + firstSubTargetId).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
                $content.find('.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');
                            
                            // Handle sub-tabs
                            var $subNav = $('#' + targetId).find('.sub-tab-navigation');
                            if ($subNav.length) {
                                var $firstSubTab = $subNav.find('.tab-button').first();
                                var firstSubTargetId = $firstSubTab.data('target');
                                
                                $firstSubTab.addClass('active');
                                $('#' + firstSubTargetId).addClass('active');
                            }
                        }
                    }
                });
                
                // Add Tooltip functionality for map links
                $content.find('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
                $content.find('.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
                if (window.matchMedia("only screen and (max-width: 768px)").matches) {
                    $content.find('.tab-nav').css({
                        'overflow-x': 'auto',
                        'white-space': 'nowrap',
                        '-webkit-overflow-scrolling': 'touch'
                    });
                    
                    $content.find('.tab-button').css({
                        'display': 'inline-block',
                        'float': 'none'
                    });
                    
                    $content.find('.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);
                        });
                    });
                }
                
                console.log('Tab initialization complete');
            } catch (error) {
                console.error('Error in tab initialization:', error);
            }
        });
    });
});