Difference between revisions of "MediaWiki:Common.js"
From Game Logs
(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 */