Difference between revisions of "MediaWiki:Common.js"
From Game Logs
(add routines for JS-highlighting column cells for hoverable tables.) |
(Autogenerate an additional direct link to a Grimoire spell in case a tooltip don't fit.) |
||
Line 8: | Line 8: | ||
if ((wgCategories || []).indexOf("DnD 5") === -1) | if ((wgCategories || []).indexOf("DnD 5") === -1) | ||
return; | return; | ||
+ | |||
+ | // Convert readable spell name into a Grimoire link. | ||
+ | var grimTextToURL = function(text) { | ||
+ | var spell = link.text().trim().toLowerCase() | ||
+ | .replace(/[^\w\d\ \-]/g, '') | ||
+ | .replace(/\ +/g, '-'); | ||
+ | return spell ? ("//thebombzen.com/grimoire/spells/" + spell) : false | ||
+ | }; | ||
+ | |||
$(".dnd5-grimoire").on("mouseover", function(e) { | $(".dnd5-grimoire").on("mouseover", function(e) { | ||
Line 14: | Line 23: | ||
var link = $(e.target).closest(".dnd5-grimoire"), | var link = $(e.target).closest(".dnd5-grimoire"), | ||
− | embed = link.find(".dnd5-grimoire-embed"); | + | embed = link.find(".dnd5-grimoire-embed"), |
+ | spellURL = grimTextToURL(link.text().trim()); | ||
// Toggle visibility of the info div if it's already been populated. | // Toggle visibility of the info div if it's already been populated. | ||
Line 21: | Line 31: | ||
embed.parent().show(); | embed.parent().show(); | ||
return; | return; | ||
− | |||
− | // | + | if (!spellURL.length) |
− | + | return; | |
− | + | ||
− | + | // Insert an external link to the Grimoire page on first hover. | |
+ | if (!link.find("a")) | ||
+ | link.html($("<a></a>").text(link.text()).attr("href", spellURL).prop("target", "_blank")); | ||
− | |||
− | |||
var wrapper = $("<div></div>").addClass("dnd5-grimoire-wrapper").appendTo(link), | var wrapper = $("<div></div>").addClass("dnd5-grimoire-wrapper").appendTo(link), | ||
Line 38: | Line 47: | ||
// no Promises, damn. | // no Promises, damn. | ||
$.ajax({ | $.ajax({ | ||
− | "url": | + | "url": spellURL, |
"type": "get", | "type": "get", | ||
"cache": true | "cache": true |
Revision as of 21:53, 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; // Convert readable spell name into a Grimoire link. var grimTextToURL = function(text) { var spell = link.text().trim().toLowerCase() .replace(/[^\w\d\ \-]/g, '') .replace(/\ +/g, '-'); return spell ? ("//thebombzen.com/grimoire/spells/" + spell) : false }; $(".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"), spellURL = grimTextToURL(link.text().trim()); // Toggle visibility of the info div if it's already been populated. if (embed.length) { if (embed.not(":visible")) embed.parent().show(); return; if (!spellURL.length) return; // Insert an external link to the Grimoire page on first hover. if (!link.find("a")) link.html($("<a></a>").text(link.text()).attr("href", spellURL).prop("target", "_blank")); 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": spellURL, "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 */