MediaWiki:Gadget-Tabber.js

/* Adapted from ZeldaWiki: https://zeldawiki.wiki/wiki/MediaWiki:Gadget-Tabs.js
Edited by Vish */
$(document).ready(function() {
    // Function to generate unique hash for each tab
    function generateTabHash($tab, index) {
        var baseHash = $tab.attr('data-hash') || $tab.text().replace(/\s+/g, '_');
        var hash = baseHash;
        var counter = 1;

        // Ensure the hash is unique within the page
        while ($('[data-tab-hash="' + hash + '"]').not($tab).length > 0) {
            hash = baseHash + '-' + counter;
            counter++;
        }

        $tab.attr('data-tab-hash', hash);
        return hash;
    }

    // Initialize tab hashes
    $(".tab").each(function(index) {
        generateTabHash($(this), index);
    });

    // 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("content--active");

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

        // Generate and update hash for the active tab
        var hash = generateTabHash($(this), index);
        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('.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);
            }
        }
    }

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

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