MediaWiki:Gadget-Tabber.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Adapted from ZeldaWiki: https://zeldawiki.wiki/wiki/MediaWiki:Gadget-Tabs.js
Edited by Vish */
$(document).ready(function() {
    var globalHashSet = new Set();

    // Function to update hashes globally, considering existing Lua-generated counters
    function updateGlobalHashes() {
        $('.tab').each(function() {
            var $this = $(this);
            var originalHash = $this.attr('data-tab-hash');
            var hashBase = originalHash;
            var existingCounterMatch = originalHash.match(/-(\d+)$/);

            if (existingCounterMatch) {
                // If there's an existing counter, strip it to get the base hash
                hashBase = originalHash.substring(0, originalHash.lastIndexOf('-'));
            }

            if (!globalHashSet.has(hashBase)) {
                globalHashSet.add(hashBase);
            } else {
                var counter = 1;
                while (globalHashSet.has(hashBase + '-' + counter)) {
                    counter++;
                }
                var newHash = hashBase + '-' + counter;
                globalHashSet.add(newHash);
                $this.attr('data-tab-hash', newHash);
            }
        });
    }

    // When a tab is clicked
    $(".tab").click(function () {
        var $siblings = $(this).parent().children();
        var $alltabs = $(this).closest(".tabcontainer");
        var $content = $alltabs.parent().children(".tabcontents");

        // Switch all tabs off
        $siblings.removeClass("active");
        $content.children().removeClass("jw-tabs-content--active");

        // Switch this tab on
        $(this).addClass("active");
        var index = $siblings.index(this);
        $content.children().eq(index).addClass("jw-tabs-content--active");

        // Update hash for the active tab
        var hash = $(this).attr('data-tab-hash');
        history.replaceState(null, null, '#' + hash);
    });

    // Function to activate the tab containing the reference link
    function activateTabForReference(hash) {
        var $refLink = $(hash);
        if ($refLink.length) {
            var $targetTabContent = $refLink.closest('.jw-tabs-content');
            if ($targetTabContent.length) {
                var tabIndex = $targetTabContent.index();
                var $targetTab = $targetTabContent.closest('.jw-tabs')
                    .find('.tab')
                    .eq(tabIndex);
                if ($targetTab.length) {
                    $targetTab.click();

                    // Scroll to the reference link
                    $('html, body').scrollTop($refLink.offset().top);
                    return true;
                }
            }
        }
        return false;
    }

    // When a section link is clicked or a page is loaded with a section link,
    // we select the tab containing the section anchor or reference link
    function selectAnchorTab() {
        if (window.location.hash) {
            var hash = window.location.hash;
            var $targetTab = $('[data-tab-hash="' + hash.substring(1) + '"]');
            if ($targetTab.length) {
                $targetTab.click();

                // Scroll to the tab container
                $('html, body').scrollTop($targetTab.closest(".jw-tabs").offset().top);
            } else {
                // Try to activate the tab for the reference link
                activateTabForReference(hash);
            }
        }
    }

    // Update hashes globally based on existing tabs
    updateGlobalHashes();

    // Select tab based on the current hash in the URL
    selectAnchorTab();

    // Add event listener for hash change
    addEventListener("hashchange", function() {
        selectAnchorTab();
    });
});