giventofly / mtg-tooltip-js Goto Github PK

there's a bug with apostrophes (') in the f object for the innerHTML, I've put the bug in /* */ and my solution above.

mtgtooltip.min.js:

"use strict"; var mtgTooltip = function (a) { arguments.length ? this._settings = Object.assign({}, this._settings, a) : null, this._settings.log && console.log("mtgtooltip loaded"), this._settings.start ? this.start() : null }; mtgTooltip.prototype = { start: function start() { var d = this; if (this._settings.mobile && 600 >= window.innerWidth && 500 >= window.innerHeight) return void (this._settings.log && console.log("Possible Mobile mode detected, exiting...")); this._alltogether(), this._settings.log && console.log("mtgtooltip started"); var a = this._settings.myclass, b = document.querySelector(this._settings.element); this.mymousemove(b); var c = b.querySelectorAll("." + a + ":not(." + a + "mtgloaded)"); this._settings.log && console.log("found cards to create tooltip: ", c.length), c.forEach(function (e) { e.style.cursor = "pointer"; var f = e.dataset.name, g = e.dataset.set, h = e.dataset.multiverseid, i = e.dataset.specialimg, j = e.innerHTML, k = "http://gatherer.wizards.com/Handlers/Image.ashx?type=card", l = "", m = "", n = ""; if (!h && !i) { l = "undefined" != typeof f && 0 < f.length ? "&name=" + encodeURIComponent(f) : "&name=" + encodeURIComponent(j), "undefined" != typeof g && 0 < g.length && (m = "&set=" + g); var o = "undefined" != typeof f && 0 < f.length ? d.getSetLands(f) : d.getSetLands(j); o && (m = "&set=" + o) } "undefined" != typeof h && 0 < h.length && (n = "&multiverseid=" + h), "undefined" != typeof i && 0 < i.length && (k = d._settings.specialImage + i), k += l + m + n, d.run(e, k) }), this._settings.log && console.log("Created cards tooltips divs, starting creating the tooltips pairs") }, run: function run(a, b) { var c = this._settings.myclass, d = this._settings.id, e = document.querySelector(this._settings.element); a.id = c + "_p" + d; var f = document.createElement("span"); f.classList.add(c + "hover"), f.id = c + "_c" + d; var g = "src"; this._settings.lazyload && (g = "data-src"); var h = this._settings.wrap_in, i = this._settings.wrap_out; let image = new Image(); image.alt = 'mtgtooltip image'; image.setAttribute(g, b); f.innerHTML = h + image.outerHTML + i, /*f.innerHTML = h + <img + g +='+ b +' alt='mtgtooltip image' >+ i,*/ a.dataset.tooltipid = d, f.dataset.tooltipid = d, a.style.whiteSpace = "nowrap", e.appendChild(f), f.style.display = "none", f.style.opacity = "0", f.classList.add(c + "tooltipstarted"), this._settings.id = d + 1; var j = this; a.addEventListener("mouseover", function (k) { j.mouseenter(k) }), a.addEventListener("mouseleave", function (k) { j.mouseleave(k) }) }, mouseleave: function mouseleave(a) { var b = a.target.dataset.tooltipid, c = this._settings.myclass, d = document.getElementById(c + "_c" + b); if (this._settings.log && console.log("Mouse leave: ", a), 0 < this._settings.fadetime) { var e = this._settings.fadetime; d.style.transition = "all " + e + "ms ease-out", d.style.opacity = 0, setTimeout(function () { d.style.display = "none", d.style.transition = "" }, e) } else d.style.display = "none" }, mouseenter: function mouseenter(a) { var b = a.target.dataset.tooltipid, c = this._settings.myclass, d = document.getElementById(c + "_c" + b); if (this._settings.lazyload) { var e = d.querySelector("img"), f = e.dataset.src; e.setAttribute("src", f) } d.style.position = "absolute", d.style.opacity = this._settings.opacity, d.style.display = "inline-block"; var g = a.pageY, h = a.pageX, i = window.innerWidth, j = window.innerHeight, k = window.scrollY, l = window.scrollX, m = 0, n = 0, o = 258, p = 346; n = h, m = g + 25, h + o > i + l && (n = l + i - o), m + p > j + k && (m = g - p), d.style.left = n + "px", d.style.top = m + "px" }, mymousemove: function mymousemove(a) { var b = this; a.addEventListener("mousemove", function (c) { b._settings.mousex = c.pageX, b._settings.mousey = c.pageY }) }, kill: function kill() { myclass = this._settings.myclass; var a = document.querySelector(this._settings.element), b = a.querySelectorAll("." + myclass); b.forEach(function (c) { c.removeEventListener("mouseover", function (f) { that.mouseenter(f) }), c.removeEventListener("mouseleave", function (f) { that.mouseleave(f) }), c.classList.remove(myclass), c.classList.remove("mtgloaded"); var d = c.dataset.tooltipid, e = document.getElementById(myclass + "_c" + d); e.parentNode.removeChild(e), c.removeAttribute("data-tooltipid"), c.removeAttribute("id") }), this._settings.log && console.log(this._settings.name, "removed all instances of mtgtooltips") }, _settings: { name: "MTG Tooltip js", version: "1.0", element: "body", myclass: "mtgtooltip", lazyload: !0, fadetime: 300, opacity: 1, mousex: 0, mousey: 0, id: 0, log: !1, start: !0, wrap_in: "", wrap_out: "", specialImage: "", mobile: !0, basiclands: "ust", shocklands: "exp", fetchlands: "exp", painlands: "exp" }, getSetLands: function getSetLands(a) { var b = a.toLowerCase(); if (this._lands[b]) { var c = this._lands[b].type.toLowerCase(), d = this._settings[c].toLowerCase(), e = this._lands[b][d]; if (d && e) return e.toUpperCase(); var f = ""; Object.values(this._lands[b]).forEach(function (g) { g != c && (f += g + " ") }), console.log("MTG TOOLTIP: ERROR: Incorrect option on " + c + "!! options available are: " + f) } return null }, _shocklands: [{ "blood crypt": { type: "shocklands", old: "dis", "new": "rtr", exp: "exp" } }, { "breeding pool": { type: "shocklands", old: "dis", "new": "gtc", exp: "exp" } }, { "godless shrine": { type: "shocklands", old: "gpt", "new": "gtc", exp: "exp" } }, { "hallowed fountain": { type: "shocklands", old: "dis", "new": "rtr", exp: "exp" } }, { "overgrown tomb": { type: "shocklands", old: "rav", "new": "rtr", exp: "exp" } }, { "sacred foundry": { type: "shocklands", old: "rav", "new": "gtc", exp: "exp" } }, { "steam vents": { type: "shocklands", old: "gpt", "new": "rtr", exp: "exp" } }, { "stomping ground": { type: "shocklands", old: "gpt", "new": "gtc", exp: "exp" } }, { "temple garden": { type: "shocklands", old: "rav", "new": "rtr", exp: "exp" } }, { "watery grave": { type: "shocklands", old: "rav", "new": "gtc", exp: "exp" } }], _fetchlands: [{ "arid mesa": { type: "fetchlands", old: "zen", "new": "mm3", exp: "exp" } }, { "bloodstained mire": { type: "fetchlands", old: "ons", "new": "ktk", exp: "exp" } }, { "flooded strand": { type: "fetchlands", old: "ons", "new": "ktk", exp: "exp" } }, { "marsh flats": { type: "fetchlands", old: "zen", "new": "mm3", exp: "exp" } }, { "misty rainforest": { type: "fetchlands", old: "zen", "new": "mm3", exp: "exp" } }, { "polluted delta": { type: "fetchlands", old: "ons", "new": "ktk", exp: "exp" } }, { "scalding tarn": { type: "fetchlands", old: "zen", "new": "mm3", exp: "exp" } }, { "verdant catacombs": { type: "fetchlands", old: "zen", "new": "mm3", exp: "exp" } }, { "windswept heath": { type: "fetchlands", old: "ons", "new": "ktk", exp: "exp" } }, { "wooded foothills": { type: "fetchlands", old: "ons", "new": "ktk", exp: "exp" } }], _painlands: [{ "adarkar wastes": { type: "painlands", old: "ie", "new": "10e", exp: "6e" } }, { "battlefield forge": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }, { brushland: { type: "painlands", old: "ie", "new": "10e", exp: "6e" } }, { "caves of koilos": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }, { "karplusan forest": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }, { "llanowar wastes": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }, { "shivan reef": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }, { "yavimaya coast": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }, { "underground river": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }, { "sulfurous springs": { type: "painlands", old: "ap", "new": "ori", exp: "10e" } }], _basiclands: [{ mountain: { type: "basiclands", uhn: "unh", ust: "ust", ugl: "ug" } }, { plains: { type: "basiclands", uhn: "unh", ust: "ust", ugl: "ug" } }, { forest: { type: "basiclands", uhn: "unh", ust: "ust", ugl: "ug" } }, { swamp: { type: "basiclands", uhn: "unh", ust: "ust", ugl: "ug" } }, { island: { type: "basiclands", uhn: "unh", ust: "ust", ugl: "ug" } }], _alltogether: function _alltogether() { var b = this, a = [this._shocklands, this._fetchlands, this._painlands, this._basiclands]; a.forEach(function (c) { c.forEach(function (d, e) { Object.assign(b._lands, c[e]) }) }) }, _lands: {} };