MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */

/**
 * Switcher utility
 * * Dynamically switches between multiple elements (like maps, images, etc.)
 * based on user selection via radio buttons.
 */
$(function () {
    $('.switcher-container').each(function () {
        var $container = $(this);
        var $elements = $container.children('div');
        if ($elements.length < 2) {
            return;
        }

        var $radioContainer = $('<div class="switcher-options"></div>');
        var name = 'switcher-' + Math.floor(Math.random() * 1000000);
        var hasDefault = false;

        $elements.each(function (i) {
            var $el = $(this);
            var labelText = $el.find('.switcher-label').text() || ('Option ' + (i + 1));
            
            // Create radio button
            var $radio = $('<input type="radio">')
                .attr('name', name)
                .attr('id', name + '-' + i)
                .prop('checked', i === 0)
                .on('change', function () {
                    if (this.checked) {
                        $elements.hide();
                        $el.show();
                    }
                });

            var $label = $('<label></label>')
                .attr('for', name + '-' + i)
                .text(' ' + labelText);

            var $optionDiv = $('<div></div>').append($radio, $label);
            $radioContainer.append($optionDiv);

            // Handle default element if specified
            if ($el.find('[data-switcher-default]').length) {
                $radio.prop('checked', true);
                $elements.hide();
                $el.show();
                hasDefault = true;
            } else if (!hasDefault && i > 0) {
                $el.hide(); // Hide non-first elements by default if no explicit default
            }
        });

        $container.append($radioContainer);
    });
});