FFTabberLoad.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.

/*
The purpose of this add-on is to better handle nested tabbers. Currently this isn't handled by default.
*/

$(function() {
    var queryParts = window.location.hash.substring(1);
    var articleContainer = $("#WikiaArticle");
    var chosenTabs = {}; // Lookup for chosen tabs per toplevel tabber.
    
    // Measurement to avoid mess-up for our jQuery selector statement, as it's influenced by user input.
    function escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/\\/g, "")
            .replace(/'/g, "&#039;");
    }
    
    // Gets the topmost tabber from the element. This is the tabber highest up towards the article.
    function getTopmostTabber(elem) {
        var tabber = elem;
        while (elem !== articleContainer && elem.length > 0) {
            elem = elem.parent(); // Traverse upwards.
            if (elem.hasClass("tabber")) // If the parent is a tabber, update our var.
                tabber = elem;
        }
        return tabber;
    }
    
    function buildDefaultTabs(tabber) {
        var list = [];
        var tabPages = $(tabber).find(">.tabbertab");
        while (tabPages.length > 0) {
            list.push($(tabPages[0]).attr("title"));
            tabPages = $($(tabPages[0]).find(">.tabber>.tabbertab"));
        }
        return list;
    }
    
    function getTabberLevel(elem) {
        var level = 0;
        while (elem !== articleContainer && elem.length > 0) {
            elem = elem.parent(); // Traverse upwards.
            if (elem.hasClass("tabber")) // If the parent is a tabber, increment level.
                level++;
        }
        return level;
    }
    
    function getHashFromButton(button) {
        var tabber = getTopmostTabber(button);
        
        if (!(tabber in chosenTabs)) {
            chosenTabs[tabber] = buildDefaultTabs(tabber);
        }
        
        var level = getTabberLevel(button);
        console.log("Changing", tabber, level, "to", button.attr("title"), "(full", chosenTabs[tabber], ")");
        chosenTabs[tabber][level] = button.attr("title");
        
        return chosenTabs[tabber].join("-");
    }
    
    if (queryParts.length > 0) {
        var currentTabber = $("#WikiaArticle>div");
        var anchorParts = queryParts.split("-");
        var hasFocused = false;
        for (var i = 0; i < anchorParts.length; i++) {
            var newTabber = $(currentTabber.find(">.tabber>.tabbertab[title='" + escapeHtml(anchorParts[i]) + "']"));
            if (newTabber.length > 0) {
                currentTabber = newTabber;
                // Focus in on the loaded tabber tab by automating a click.
                currentTabber.parent().find(".tabbernav a[title='" + escapeHtml(anchorParts[i]) + "']").click();
                hasFocused = true;
            }
        }
        if (hasFocused) // Keep the old hash.
            window.location.hash = "#" + queryParts;
        
        $(".tabbernav a[title]").each(function() {
            var button = $(this);
            
            button.click(function() {
                var newHash = getHashFromButton(button); // Update hash array for this tabber hierarchy.
                console.log(button, newHash);
                setTimeout(function() {
                    window.location.hash = "#" + newHash; // Update hash in URL.
                }, 5);
            });
        });
    }
});