Difference between revisions of "MediaWiki:Common.js"

From Game Logs
Jump to: navigation, search
(whitelist the dash symbol for Grimoire links.)
(add routines for JS-highlighting column cells for hoverable tables.)
Line 63: Line 63:
  
 
/* TEMPLATE:GRIMOIRE ENDS */
 
/* TEMPLATE:GRIMOIRE ENDS */
 +
 +
 +
/* COLUMN-HOVER TABLE ACTUATOR STARTS */
 +
 +
$(function() {
 +
 +
    // Given a jQ pointer to a table cell, get a list of all cells at that pos.
 +
    // Note: ignores rows that have merged cells.
 +
    var getColumnCells = function(cell) {
 +
        var items = [],
 +
            targetPos = cell.index();
 +
        if (parseInt(cell.prop("colspan") || 1, 10) != 1)
 +
            return items;
 +
 +
        cell.closest("table").find("tr").each(function() {
 +
            // Make this work only on rows with no merged cells.
 +
            if (parseInt($(this).find("[colspan]").prop("colspan") || 1, 10) != 1)
 +
                return;
 +
            var row = $(this).find("td:eq(" + targetPos + "), th:eq(" + targetPos + ")"); // either
 +
            row.each(function() {
 +
                items.push($(this));
 +
            });
 +
        });
 +
 +
        return items;
 +
    };
 +
 +
    $("table.columns").on("mouseenter mouseleave", "td, th", function(e) {
 +
        var cell = $(e.target).closest("td, th"),
 +
            vertSiblings = getColumnCells(cell),
 +
            method = e.type == "mouseenter" ? "addClass" : "removeClass";
 +
 +
        vertSiblings.forEach(function(el) { $(el)[method]("hovered"); });
 +
    });
 +
});
 +
 +
/* COLUMN-HOVER TABLE ACTUATOR ENDS */

Revision as of 21:41, 21 February 2018

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


/* TEMPLATE:GRIMOIRE STARTS */

$(function() {
    // Activate only on 5ed pages.
    if ((wgCategories || []).indexOf("DnD 5") === -1)
        return;
    $(".dnd5-grimoire").on("mouseover", function(e) {

        // Only one popup allowed.
        $(".dnd5-grimoire .dnd5-grimoire-wrapper").hide();

        var link = $(e.target).closest(".dnd5-grimoire"),
            embed = link.find(".dnd5-grimoire-embed");

        // Toggle visibility of the info div if it's already been populated.
        if (embed.length) {
        if (embed.not(":visible"))
            embed.parent().show();
        return;
        }

        // Otherwise load data externally.
        var spell = link.text().trim().toLowerCase()
            .replace(/[^\w\d\ \-]/g, '')
            .replace(/\ +/g, '-');

        if (!spell.length)
            return;

        var wrapper = $("<div></div>").addClass("dnd5-grimoire-wrapper").appendTo(link),
        embed = $("<div></div>").addClass("dnd5-grimoire-embed dnd5-grimoire-loader").appendTo(wrapper);

        // Show the block first, better with loader.

        // no Promises, damn.
        $.ajax({
            "url": "//thebombzen.com/grimoire/spells/" + spell,
            "type": "get",
            "cache": true
        })
        .then(function(data) {
            var doc = $(data);
            var article = doc.find("article");
            if (!article.length)
                return console.log("Failed to find the DOM chunk with spell description");
            embed.removeClass("dnd5-grimoire-loader").append(article);
        })
        .fail(function() {
            embed.removeClass("loading").html("<p>Failed to look up this spell :(</p>");
        });
    });
    
    $(".dnd5-grimoire").on("mouseout", function(e) {
        var target = $(e.target).closest(".dnd5-grimoire-wrapper");
        if (!target.length)
            return;
        target.hide();
    });
});

/* TEMPLATE:GRIMOIRE ENDS */


/* COLUMN-HOVER TABLE ACTUATOR STARTS */

$(function() {

    // Given a jQ pointer to a table cell, get a list of all cells at that pos.
    // Note: ignores rows that have merged cells.
    var getColumnCells = function(cell) {
        var items = [],
            targetPos = cell.index();
        if (parseInt(cell.prop("colspan") || 1, 10) != 1)
            return items;

        cell.closest("table").find("tr").each(function() {
            // Make this work only on rows with no merged cells.
            if (parseInt($(this).find("[colspan]").prop("colspan") || 1, 10) != 1)
                return;
            var row = $(this).find("td:eq(" + targetPos + "), th:eq(" + targetPos + ")"); // either
            row.each(function() {
                items.push($(this));
            });
        });

        return items;
    };

    $("table.columns").on("mouseenter mouseleave", "td, th", function(e) {
        var cell = $(e.target).closest("td, th"),
            vertSiblings = getColumnCells(cell),
            method = e.type == "mouseenter" ? "addClass" : "removeClass";

        vertSiblings.forEach(function(el) { $(el)[method]("hovered"); });
    });
});

/* COLUMN-HOVER TABLE ACTUATOR ENDS */