Giter Club home page Giter Club logo

mtg-tooltip-js's Introduction

MTG Tooltip Js

A simple vanilla javascript plugin to create images tooltips for magic the gathering cards. No dependencies, no extra css, just a .js file and little bit of html.

You can check it working live here, along with some examples of usage and a "nicier" page. You can also see one example in production at mtgmeta.io.

I was inspired by Inline mtg and tried to do a new version with only vanilla javascript and cut some "fat".

Why should you use this? Here are some (good) reasons:

  • No libraries needed, just good old plain javascript

  • lazyload tooltip images

  • Low size (13kb and 7Kb minified and 2.3Kb gzipped).

  • You can select defaults set for shocklands, painlands, fetchlands, and basics (more can be added, make a pull request or ask me)

  • option to now load/start on mobile (you don't have a mouse to mover over the images/name to see the tooltip)

  • option to remove elements created and rescan the page

  • check them all bellow...

    **

API

mtgtooltip.start(); //starts, only used to rescan the page and load new items or when start is set to false
mtgtooltip.kill() // to remove all instances of the tooltip and addEventListeners.
option default options description
element body String The element you want to append the tooltips to (need to have position defined)
lazyload true bool (true/false) If you want to lazyload the tooltip images.
fadetime 300 integer (ms) If you want the tooltip to fade in X ms
opacity 1 float [0,1] The opacity for the tooltip to have.
log false bool (true/false) Verbose to the console what's going on.
start true bool (true/false) Start mtgtooltip on the instance creation.
wrap_in - String Inicial wrap for the tooltip (div, section, whatever you like)
wrap_out - String Final wrap for the tooltip (div, section, whatever you like)
specialImage - String link to use costumized image on request (for the data-specialimage attribute)
mobile true bool (true/false) Don't start the mtgtooltip on mobile/tablet devices.
basiclands ust String (ust,unh,ugl) unstable, unhinged and unglued respectively
shocklands exp String (old,new,exp) old: (dissension,ravnica), new: gatecrash, return to ravnica, exp: expeditions
fetchlands exp String (old,new,exp) old: zendikar, onslaught, new: modern master 3, khans of tarkir, exp: expeditions
painlands exp String (old,new,exp) old: ice age, apocalypse, new: magic origins, exp: tenth edition, sixth edition

Normal usage:

<span class='mtgtooltip'>Tarmogoyf</span>

Set name:

<span class='mtgtooltip' data-name="Bloodbraid Elf">i'm freeeee</span>

Set edition:

<span class='mtgtooltip' data-set='ZEN'>Arid Mesa</span>

Set multiverseid:

<span class='mtgtooltip' data-multiverseid='4562'>Tarmogoyf</span>

Specific image usage

<span class='mtgtooltip' data-specialimg="myimage.jpg">My altered Baneslayer Angel</span>

Quick Start:

<script src='https://raw.githubusercontent.com/giventofly/MTG-Tooltip-Js/dist/mtgtooltip.js'></script>
document.addEventListener('DOMContentLoaded', function () {
        tooltips = new mtgTooltip();
    });

Upgrades? Suggestions?

Open a issue/pull request or contact me.

mtg-tooltip-js's People

Contributors

giventofly avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

gre99ory o-nemet

mtg-tooltip-js's Issues

mtgtooltip.min.js

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: {} };

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.