-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
95 lines (91 loc) · 12.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>MTG Tooltip JS - mtg card toolips</title><meta name="description" content="MTG Tooltip Js, vanilla Javascript plugin to create magic the gathering card tooltips."><link rel="stylesheet" href="./assets/styles.css"><link rel="stylesheet" href="./assets/atom-one-dark.css"> <script src="./mtgtooltip.min.js"></script> <script src="./assets/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();document.addEventListener('DOMContentLoaded',function(){example=new mtgTooltip({});example2=new mtgTooltip({fadetime:2000,lazyload:false,myclass:'mtgtooltip2'});justaexample=new mtgTooltip({"opacity":0.8,myclass:"justaexample"});another=new mtgTooltip({wrap_in:"<div class='mynewclass'>",wrap_out:"</div>",myclass:'mtgtooltip4'});lastone=new mtgTooltip({specialImage:"./assets/",myclass:'mtgtooltip5'});lastone1=new mtgTooltip({myclass:'mtgtooltip6'});});</script> </head>
<body>
<header><div class="menu-wrap"><div class="top"><h1>MTG Tooltip JS</h1><h2>Vanilla Javascript plugin to create magic the gathering card tooltips.</h2></div><div class="bottom"> <a href="#examples">Examples</a> <a href="#quickstart">Quick start</a></div></div><div class="sub-menu-wrap"><div class="sub-menu"> <a href="#howtouse" title='how to use'>How to use</a> <a href="#options" title='live examples'>Options</a> <a href="#download" title='download'>download</a> <a href="https://github.com/giventofly/MTG-Tooltip-Js" title='mtg tooltip js github' rel='noopener' target='_blank'>Github</a></div></div> </header>
<section class='content'>
<h2>What is this?</h2>
<p>MTG Tooltip Js is a plain javascript plugin that creates tooltips of magic the gathering cards when the mouse is
over the selected element.</p>
<p>You can select a specific set to be shown (shocklands, fastlands, painlands and basic lands have also specific
options for them), see <a href="#options">options</a> for the configurations available, you can also specify image
to some cards that are not available on gatherer.</p>
<p>It's pretty fast to start using it. Check the <a href="#quickstart">quick start</a> or the <a href="#examples">examples</a>
to see it live.</p>
<h2 id='howtouse'>How to use</h2>
<p>You need to download or link to the minified or pretiffied version.</p>
<pre><code class='hljs xml'> <script src="./mtgtooltip.min.js"></script></code></pre>
<p>Then to each element you want to give the class mtgtooltip (you can also specify the class you want to use - <a
href="#options">see options</a>).</p>
<pre><code class="hljs xml">I always liked <span class='mtgtooltip'>Sliver Queen</span> since i've started playing in 2000.</code></pre>
<p>After that just create a new instance of mtgtooltips in javascript with your desired options and its done.</p>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { tooltips = new mtgTooltip(); }); </code></pre>
<h2 id='options'>Options</h2>
<p>You have this options available when starting an instance of mtgtooltip.js:</p>
<table><thead><tr><th>option</th><th>default</th><th>available options</th><th>description</th></tr></thead><tbody><tr><td>myclass</td><td>mtgtooltip</td><td>String</td><td>The class you want to use to invoke the tooltip</td></tr><tr><td>element</td><td>body</td><td>String</td><td>The element you want to append the tooltips to (need to have position defined)</td></tr><tr><td>lazyload</td><td>true</td><td>bool (true/false)</td><td>If you want to lazyload the tooltip images.</td></tr><tr><td>fadetime</td><td>300</td><td>integer (ms)</td><td>If you want the tooltip to fade in X ms</td></tr><tr><td>opacity</td><td>1</td><td>float [0,1]</td><td>The opacity for the tooltip to have.</td></tr><tr><td>log</td><td>false</td><td>bool (true/false)</td><td>Verbose to the console what's going on.</td></tr><tr><td>start</td><td>true</td><td>bool (true/false)</td><td>Start mtgtooltip on the instance creation.</td></tr><tr><td>wrap_in</td><td>-</td><td>String</td><td>Initial wrap for the tooltip (div, section, whatever you like)</td></tr><tr><td>wrap_out</td><td>-</td><td>String</td><td>Final wrap for the tooltip (div, section, whatever you like)</td></tr><tr><td>specialImage</td><td>-</td><td>String</td><td>Link to use costumized image on request (for the data-specialimage attribute)</td></tr><tr><td>mobile</td><td>true</td><td>bool (true/false)</td><td>Don't start the mtgtooltip on mobile/tablet devices.</td></tr><tr><td>basiclands</td><td>ust</td><td>String (ust,unh,ugl)</td><td>unstable, unhinged and unglued respectively</td></tr><tr><td>shocklands</td><td>exp</td><td>String (old,new,exp)</td><td>old: (dissension,ravnica), new: gatecrash, return to ravnica, exp: expeditions</td></tr><tr><td>fetchlands</td><td>exp</td><td>String (old,new,exp)</td><td>old: zendikar, onslaught, new: modern master 3, khans of tarkir, exp: expeditions</td></tr><tr><td>painlands</td><td>exp</td><td>String (old,new,exp)</td><td>old: ice age, apocalypse, new: magic origins, exp: tenth edition, sixth edition</td></tr></tbody></table>
<p>Also it has this api access:</p>
<pre><code class="javascript">
//starts, only used to rescan the page and load new items or when start is set to false
mtgtooltip.start();
// to remove all instances of the tooltip and EventListeners
mtgtooltip.kill(); </code></pre>
<p>And when identifying an element you can use the default value of the inner contents:</p>
<pre><code class="hljs xml"><span class='mtgtooltip' >Tarmogoyf</span></code></pre>
<p>Attribute the multiverseid from gatherer, it will ignore the content</p>
<pre><code class="hljs xml"><span class='mtgtooltip' data-multiverseid='4562'>Tarmogoyf</span></code></pre>
<p>Attribute with the setname (use the gatherer 2/3 word setname definition)</p>
<pre><code class="hljs xml"><span class='mtgtooltip' data-set='ZEN'>Arid Mesa</span></code></pre>
<p>Attribute with the name (in case you want to surprise someone)</p>
<pre><code class="hljs xml"><span class='mtgtooltip' data-name="urza's mine">No one wants to play against this</span></code></pre>
<p>Attribute with image name to use your special image (don't forget to include the url when creating the mtg
tooltip instance)</p>
<pre><code class="hljs xml"><span class='mtgtooltip' data-specialimg="myimage.jpg">My altered Baneslayer Angel</span></code></pre>
<h2 id='quickstart'>Quick start</h2>
<p>Its really simple to get it going with the minimal code.</p>
<p>You just need to load this javascript (even hosted on github) and have at least one elment with the mtgtooltip
class.</p>
<pre><code class="hljs xml"><script src='https://raw.githubusercontent.com/giventofly/MTG-Tooltip-Js/mtgtooltip.min.js'></script></code></pre>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { tooltips = new mtgTooltip(); }); </code></pre>
<h2 id='examples'>Examples</h2>
<h3>Normal usage, with default options:</h3>
<pre><code class="css"><style> .mtgtooltip { color: goldenrod; } </style></code></pre>
<pre><code class="hljs xml"><p>I used to be better that them all, I am <span class='mtgtooltip'>Jace, the mind sculptor</span></p></code></pre>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip(); });</code></pre>
<p>I used to be better that them all, I am <span class='mtgtooltip'>Jace, the mind sculptor</span></p>
<h3>Lazyload off, fadetime of 2s (2000ms) and set defined for modern masters:</h3>
<pre><code class="css"><style> .mtgtooltip { color: goldenrod; } </style></code></pre>
<pre><code class="hljs xml"><p>I'm a really expensive <span data-set='mma' class='mtgtooltip'>Tarmogoyf</span></p></code></pre>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip({ "lazyload": false, "fadetime": "2000" }); });</code></pre>
<p>I'm a really expensive <span class='mtgtooltip2' data-set='mma'>Tarmogoyf</span></p>
<h3>Opacity 0.8, myclass set to 'justaexample' using multiverse id</h3>
<pre><code class="css"><style> .justaexample { color: red; } </style></code></pre>
<pre><code class="hljs xml"><p>How will i be? I don't know, <span class='justaexample' data-multiverseid='1789'> put a random number</span></p></code></pre>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip({ "opacity": 0.8, myclass: "justaexample" }); });</code></pre>
<p>How will i be? I don't know, <span class='justaexample' data-multiverseid='1789'>put a random number</span></p>
<h3>wrappers and name set by attribute</h3>
<pre><code class="css"><style> .mtgtooltip { color: goldenrod; } .mynewclass { background-color: #ccc; padding: 15px; } </style></code></pre>
<pre><code class="hljs xml"><p>How will i be? I don't know, <span class='justaexample' data-multiverseid='1789'> put a random number</span></p></code></pre>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { example = new mtgTooltip({ wrap_in : "<div class='mynewclass'>", wrap_out : "</div>" }); });</code></pre>
<p>Can you help me? <span class='mtgtooltip4' data-name='Splinter Twin'>free me!!</span></p>
<h3>Special image attribute, the data attribute is specialimg and the option is specialImage.</h3>
<pre><code class="css"><style> .mtgtooltip { color: goldenrod; } </style></code></pre>
<pre><code class="hljs xml"><p>Will <span class='mtgtooltip5' data-specialimg='sliver.jpg'>I ever</span> be printed?</p></code></pre>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { var example = new mtgTooltip({ specialImage : './assets/' }); });</code></pre>
<p>Will <span class='mtgtooltip5' data-specialimg='sliver.jpg'>I ever</span> be printed?</p>
<h3>You can attach to anything that has the specified class</h3>
<pre><code class="hljs xml"><img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="1352"> <img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="1352"> <img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="1352"> <img src="./assets/b1.jpg" alt="example" class='mtgtooltip' data-multiverseid="220451"></p></code></pre>
<pre><code class="javascript">document.addEventListener('DOMContentLoaded', function () { var example = new mtgTooltip({}); });</code></pre>
<p><img src="./assets/b1.jpg" alt="example" class='mtgtooltip6' data-multiverseid="1352"><img src="./assets/b2.jpg"
alt="example" class='mtgtooltip6' data-multiverseid="1352"><img src="./assets/b3.jpg" alt="example" class='mtgtooltip6'
data-multiverseid="1352"><img src="./assets/b4.jpg" alt="example" class='mtgtooltip6' data-multiverseid="220451"></p>
<h2 id='download'>Download</h2>
<p>You can check the <a href="https://github.com/giventofly/MTG-Tooltip-Js" title='mtg tooltip js github' rel='noopener'
target='_blank'>Github</a> page for the links of the normal version (12.7Kb) or minified (6.9Kb) with babel js,
preset es2016, es2015, minify and >2% browsers.</p>
<h2 id='support'>Support</h2>
<p>If you want to improve feel free to open a pull request. Are you searching for help? You can contact me also, i might/can be able to give you a hand.</p>
<p>You want to support <strong>me</strong>? Nice you can have here my <a href="https://www.paypal.me/heyzeto"
target='_blank' rel='noopener'>paypal.me</a>. Or i would be very happy if you talk and spread this plugin!</p>
<footer> </footer>
</body>
</html>