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';
    
    // Initialize when document is ready
    $(document).ready(function() {
        // Small delay to ensure everything is rendered
        setTimeout(function() {
            initializeTabs();
            initializeSubTabs();
            
            // Make sure at least one tab is active
            enforceActiveTabsOnLoad();
        }, 200);
    });
    
    // Make sure there's always an active tab
    function enforceActiveTabsOnLoad() {
        // Ensure main tabs have active tab
        $('.tab-navigation').each(function() {
            var $container = $(this);
            if ($container.find('> .tab-nav > .tab-button.active').length === 0) {
                $container.find('> .tab-nav > .tab-button').first().addClass('active');
                var firstTabId = $container.find('> .tab-nav > .tab-button').first().data('target');
                $container.find('#' + firstTabId).addClass('active');
            }
        });
        
        // Ensure sub tabs have active tab
        $('.sub-tab-navigation').each(function() {
            var $container = $(this);
            if ($container.find('> .tab-nav > .tab-button.active').length === 0) {
                $container.find('> .tab-nav > .tab-button').first().addClass('active');
                var firstTabId = $container.find('> .tab-nav > .tab-button').first().data('target');
                $container.find('#' + firstTabId).addClass('active');
            }
        });
    }
    
    function initializeTabs() {
        // Find all tab containers on the page
        $('.tab-navigation').each(function(index) {
            var tabContainerId = 'tab-container-' + index;
            $(this).attr('id', tabContainerId);
            
            var $container = $('#' + tabContainerId);
            var $tabButtons = $container.find('> .tab-nav > .tab-button');
            var $tabPanes = $container.find('> .tab-content > .tab-pane');
            
            // Add click handlers to tab buttons
            $tabButtons.off('click').on('click', function(e) {
                e.preventDefault();
                var $this = $(this);
                var targetId = $this.data('target');
                
                // Remove active class from all buttons and panes in this container
                $container.find('> .tab-nav > .tab-button').removeClass('active');
                $container.find('> .tab-content > .tab-pane').removeClass('active');
                
                // Add active class to clicked button and corresponding pane
                $this.addClass('active');
                $container.find('#' + targetId).addClass('active');
                
                // If this tab has a sub-tab that's active, ensure it's visible
                var $activeSubTab = $container.find('#' + targetId + ' .sub-tab-navigation .tab-button.active');
                if ($activeSubTab.length) {
                    $activeSubTab.trigger('click');
                }
                
                return false;
            });
        });
    }
    
    // Initialize nested sub-tabs
    function initializeSubTabs() {
        $('.sub-tab-navigation').each(function(index) {
            var subTabContainerId = 'sub-tab-container-' + index;
            $(this).attr('id', subTabContainerId);
            
            var $container = $('#' + subTabContainerId);
            var $tabButtons = $container.find('> .tab-nav > .tab-button');
            var $tabPanes = $container.find('> .tab-content > .tab-pane');
            
            // Add click handlers to tab buttons
            $tabButtons.off('click').on('click', function(e) {
                e.preventDefault();
                var $this = $(this);
                var targetId = $this.data('target');
                
                // Remove active class from all buttons and panes in this container
                $container.find('> .tab-nav > .tab-button').removeClass('active');
                $container.find('> .tab-content > .tab-pane').removeClass('active');
                
                // Add active class to clicked button and corresponding pane
                $this.addClass('active');
                $container.find('#' + targetId).addClass('active');
                
                // Store the active tab state in session storage for persistence
                try {
                    sessionStorage.setItem('activeSubTab-' + subTabContainerId, targetId);
                } catch (e) {
                    console.log('Unable to save tab state to session storage');
                }
                
                return false;
            });
            
            // Check if there's a stored active tab
            try {
                var activeTabId = sessionStorage.getItem('activeSubTab-' + subTabContainerId);
                if (activeTabId && $container.find('#' + activeTabId).length > 0) {
                    $container.find('.tab-button[data-target="' + activeTabId + '"]').trigger('click');
                }
            } catch (e) {
                console.log('Unable to retrieve tab state from session storage');
            }
        });
    }
})();

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