MediaWiki:Gadget-tierListHover.js

"use strict";

$(document).ready(function () {

    // Polyfill for `NodeList.prototype.forEach` for IE and Edge
    if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = function (callback, thisArg) {
            thisArg = thisArg || window;
            for (var i = 0; i < this.length; i++) {
                callback.call(thisArg, this[i], i, this);
            }
        };
    }

    // Polyfill for `ChildNode.remove()` for IE
    (function (arr) {
        arr.forEach(function (item) {
            if (item.hasOwnProperty('remove')) {
                return;
            }
            Object.defineProperty(item, 'remove', {
                configurable: true,
                enumerable: true,
                writable: true,
                value: function remove() {
                    if (this.parentNode !== null)
                        this.parentNode.removeChild(this);
                }
            });
        });
    })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

    // Go up in the DOM Tree until we find .tierlist
    function getParentTierlistElement(child) {
        var parent = child.parentElement;
        if (!parent) return false;
        if (parent.classList.contains("tierlist")) return parent;
        return getParentTierlistElement(parent);
    }

    // Go up in the DOM Tree until we find tr
    function getParentTableRowElement(child) {
        var parent = child.parentElement;
        if (!parent) return false;
        if (parent.tagName == "TR") return parent;
        return getParentTableRowElement(parent);
    }

    function insertHoverDetails(el) {
        var refId           = el.getAttribute("refId");
        var tierlist        = getParentTierlistElement(el);
        var tierlistDetails = $(".tierlist-details")[0];
        var detailsIcon     = tierlistDetails.querySelector("#ref" + refId);
        var details         = getParentTableRowElement(detailsIcon);
        var hoverDetails    = '<div class="tierlist-hover-detail"><table class="wikitable">' + details.outerHTML + '</table></div>';
        el.insertAdjacentHTML("beforeend", hoverDetails);
    }

    function removeHoverDetails() {
        var details = document.querySelectorAll(".tierlist-hover-detail");
        if (details) details.forEach(function (d) {
            d.remove();
        });
    }

    function updateLink(el) {
        var refId           = el.href.match(/ref(\d+)$/)[1];
        var tierlist        = getParentTierlistElement(el);
        var tierlistDetails = $(".tierlist-details")[0];
        var url             = tierlistDetails.querySelector("#ref" + refId + " > a").href;

        el.setAttribute("refId", refId);
        el.href = "javascript:void(0)";
        el.setAttribute("oncontextmenu", "window.open('" + url + "', '_blank')");
    }

    var items = document.querySelectorAll(".tierlist a");
    items.forEach(function (item) {
        updateLink(item);
        item.addEventListener("mouseenter", function() { insertHoverDetails(this); });
        item.addEventListener("mouseleave", function() { removeHoverDetails(); });
    });

    document.addEventListener("touchstart", function() { removeHoverDetails(); });
});