MediaWiki: Common.js

Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* Any JavaScript here will be loaded for all users on every page load. */
// Table Headers
$(function () {
    var scrollableDivsByClass = {};

    $(window).on("resize", function () {
        syncHeaders();
    });
    $(document).ready(function () {
        setSyncElements();
        createStickyHeaders();
        resetSyncElements();
        syncHeaders();
    });

    function resetSyncElements() {
        clearSyncElements();
        setSyncElements();
    }

    function clearSyncElements() {
        scrollableDivsByClass = {};
    }
    
    function setSyncElements() {
        $("[class*=\"syncscroll sync-name-\"]").each(function (i, thing) {
            var fullClassName = $(this).attr("class");
            var classInstancesArrayLength = (fullClassName in scrollableDivsByClass ? scrollableDivsByClass[fullClassName].length : 0);
            if (classInstancesArrayLength === 0)
                scrollableDivsByClass[fullClassName] = [];
            scrollableDivsByClass[fullClassName][classInstancesArrayLength] = $(this);
        });
    }

    function createStickyHeaders() {
        Object.keys(scrollableDivsByClass).forEach(function(key) {
            if (scrollableDivsByClass[key].length != 1) // Ignore duplicated keys
                    return;
            
            var elem = scrollableDivsByClass[key][0];
            if(elem.parent(".table").length === 1) {
                var headersClones = elem.find("tr").eq(0).clone()
                var parentDiv = elem.parent(".table").eq(0).prepend("<div class=\""+key+"\"><table><tbody></tbody></table></div>")
                parentDiv.find("tbody").eq(0).prepend(headersClones)
            }
        });
    }

    function syncHeaders() {
        Object.keys(scrollableDivsByClass).forEach(function(key) {
            if (scrollableDivsByClass[key].length != 2) // Ignore a potential usecase other than tables
                return;

            var syncscrollTableHeaderDiv = scrollableDivsByClass[key][0];
            var syncscrollTableDiv = scrollableDivsByClass[key][1];

            // Set table widths
            syncscrollTableHeaderDiv.find("table").eq(0).width(syncscrollTableDiv.find("table").eq(0).width());

            // Resize header tags to match
            var syncscrollTableHeaders = syncscrollTableHeaderDiv.find("th");
            syncscrollTableDiv.find("tr").eq(0).children().each(function (index, cell) {
                syncscrollTableHeaders.eq(index).width($(this).width())
            });

            // Setup scroll events for syncing scroll positions
            syncscrollTableDiv.on("scroll", function() {
                syncscrollTableHeaderDiv.scrollLeft($(this).scrollLeft());
            }); 
        });
    }
}());

// Frontpage Game Blocks
$(function () {
    var gamePanels;
    $(document).ready(function () {
        var mainGamesDiv = $("div.games-list")
        if(mainGamesDiv.length < 1) {
            return;
        }

        gamePanels = $("div.games-list div.game-block-panel")
        initializeBlocks();

        $(window).on("resize", function () {
            setBlockSizes();
        });
    });

    function initializeBlocks() {
        gamePanels.each(function (i, thing) {
            var elem = $(this);
            elem.height(elem.width());

            var artDiv = elem.find("div.game-block-art");
            var link = elem.find("div.game-block-name a").attr('href');
            var image = artDiv.find("img").attr('src');

            if(link!==undefined) {
                elem.wrap("<a href=\"" + link + "\"></a>");
            }
            if (image!==undefined) {
                elem.css("background-image", "url(" + image + ")");
            }
            artDiv.remove();
        });
    }

    function setBlockSizes() {
        gamePanels.each(function (i, thing) {
            var elem = $(this);
            elem.height(elem.width());
        });
    }
}());

// Frontpage News
$(function () {
    $(document).ready(function () {
        var newsDiv = $("div.wordpress-news div.flex-row.row")
        if(newsDiv.length < 1) {
            return;
        }

        $.getJSON("https://serenesforest.net/wp-json/wp/v2/posts?per_page=3", function(data) {
            newsDiv.empty();
            var items = [];
            var newsItemCount = 1;
            $.each( data, function( key, val ) {
                items.push(
                    "<div class=\"col-xs-12 col-sm-4\">\n" +
                    "<a href=\"" + val.link + "\">\n" +
                    "<div class=\"panel panel-default news-panel\" style=\"background-image: url(" + val.jetpack_featured_media_url + ")\">\n" +
                    "<div class=\"news-heading\">" + val.title.rendered + "</div>\n" +
                    "</div><!-- End of pan -->\n" +
                    "</a>\n" +
                    "</div><!-- end of col " + newsItemCount + "-->\n");
                newsItemCount++;
            });

            newsDiv.append(items.join(""))
        });
    });
}());