Import old code into git
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2016 Felix W. Dekker
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
|
@ -0,0 +1,2 @@
|
||||||
|
# _Guild Wars 2_ tooltips
|
||||||
|
A library that provides tooltips for _Guild Wars 2_ items.
|
|
@ -0,0 +1,160 @@
|
||||||
|
/*/ Fonts /*/
|
||||||
|
/* Not Eason Pro but Day Roman (1) */
|
||||||
|
@font-face {
|
||||||
|
font-family : eason;
|
||||||
|
|
||||||
|
src : url("../fonts/Day Roman.eot");
|
||||||
|
src : local('O'),
|
||||||
|
url("../fonts/Day Roman.woff2") format("woff2"),
|
||||||
|
url("../fonts/Day Roman.woff") format("woff"),
|
||||||
|
url("../fonts/Day Roman.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Not Cronos but Legacy Sans (2) */
|
||||||
|
@font-face {
|
||||||
|
font-family : cronos;
|
||||||
|
|
||||||
|
src : url("../fonts/Legacy Sans LT Medium Regular.eot");
|
||||||
|
src : local('O'),
|
||||||
|
url("../fonts/Legacy Sans LT Medium Regular.woff2") format("woff2"),
|
||||||
|
url("../fonts/Legacy Sans LT Medium Regular.woff") format("woff"),
|
||||||
|
url("../fonts/Legacy Sans LT Medium Regular.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2Tooltip {
|
||||||
|
position : absolute;
|
||||||
|
display : none;
|
||||||
|
z-index : 100;
|
||||||
|
box-sizing : border-box;
|
||||||
|
|
||||||
|
min-height : 210px;
|
||||||
|
width : 379px;
|
||||||
|
margin-top : -2em;
|
||||||
|
padding : 5px;
|
||||||
|
|
||||||
|
-webkit-box-sizing : border-box;
|
||||||
|
-moz-box-sizing : border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipContents {
|
||||||
|
padding : 15px;
|
||||||
|
|
||||||
|
background : url("../img/tooltipBackgroundNewTrans.png") 0 0 no-repeat;
|
||||||
|
/* http://cloud.gw2skills.net/img/sb_bg_top_350.png */
|
||||||
|
background-color : rgba(50, 64, 56, 0.9);
|
||||||
|
font-family : cronos;
|
||||||
|
color : #FFFFFF;
|
||||||
|
text-shadow : #000000 0px 0px 3px;
|
||||||
|
border : 2px solid #000000;
|
||||||
|
box-shadow : 0 0 20px #757575;
|
||||||
|
|
||||||
|
-webkit-box-shadow : 0 0 20px #757575;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipLink:hover + .GW2Tooltip {
|
||||||
|
display : inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2Tooltip:hover {
|
||||||
|
display : inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipImage {
|
||||||
|
height : 40px;
|
||||||
|
width : 40px;
|
||||||
|
|
||||||
|
border : 1px solid #EEEEEE;
|
||||||
|
border-top : 1px solid #AAACAF;
|
||||||
|
border-right : 1px solid #686B6D;
|
||||||
|
border-bottom : 1px solid #686B6D;;
|
||||||
|
border-left : 1px solid #AAACAF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityJunk {
|
||||||
|
color : #AAAAAA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityBasic {
|
||||||
|
color : #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityFine {
|
||||||
|
color : #62A4DA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityMasterwork {
|
||||||
|
color : #1A9306;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityRare {
|
||||||
|
color : #FCD00B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityExotic {
|
||||||
|
color : #FFA405;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityAscended {
|
||||||
|
color : #FB3E8D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipRarityLegendary {
|
||||||
|
color : #4C139D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipValueIcon {
|
||||||
|
height : 1em;
|
||||||
|
width : 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipDescFlavor {
|
||||||
|
color : #99EEDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipValueGold {
|
||||||
|
color : #A18238;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipValueSilver {
|
||||||
|
color : #838383;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GW2TooltipValueCopper {
|
||||||
|
color : #724419;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ItemTooltipConsumableDescriptionIndent {
|
||||||
|
margin-left : 35px;
|
||||||
|
color : #CCCCCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SkillTooltipBeige {
|
||||||
|
color : #FFCC77;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SkillTooltipIconSmall {
|
||||||
|
vertical-align : text-top;
|
||||||
|
height : 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SkillTooltipIconLarge {
|
||||||
|
float : left;
|
||||||
|
|
||||||
|
width : 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SkillTooltipInfoSection {
|
||||||
|
display : table;
|
||||||
|
width : 335px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SkillTooltipInfoSection > div {
|
||||||
|
display : table-cell;
|
||||||
|
vertical-align : middle;
|
||||||
|
|
||||||
|
width : 303px;
|
||||||
|
padding-left : 5px;
|
||||||
|
|
||||||
|
font-size : 90%;
|
||||||
|
color : #CCCCCC;
|
||||||
|
}
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding-top : 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contents {
|
||||||
|
padding : 40px 15px;
|
||||||
|
}
|
|
@ -0,0 +1,214 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="description" content="A JavaScript plugin to add informative item tooltips for Guild Wars 2." />
|
||||||
|
<meta name="keywords" content="Guild Wars 2 gw2 item tooltip information hover" />
|
||||||
|
<meta name="author" content="Felix Dekker" />
|
||||||
|
<meta name="application-name" content="GW2 item tooltip" />
|
||||||
|
|
||||||
|
<!-- JQuery / Bootstrap -->
|
||||||
|
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
|
||||||
|
|
||||||
|
<!-- Syntax highlighter -->
|
||||||
|
<!-- http://alexgorbatchev.com/SyntaxHighlighter/ -->
|
||||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
|
||||||
|
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css"/>
|
||||||
|
<script type="text/javascript">SyntaxHighlighter.all();</script>
|
||||||
|
|
||||||
|
<!-- Custom scripts and styling -->
|
||||||
|
<script src="js/ItemTooltip.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/ItemTooltip.css" />
|
||||||
|
|
||||||
|
<title>GW2 Item tooltip</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<a class="navbar-brand" href="#">FWDekker</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Wrapper -->
|
||||||
|
<div class="container">
|
||||||
|
<!-- Contents -->
|
||||||
|
<div class="contents">
|
||||||
|
<!-- Breadcrumbs (top) -->
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li><a href="./">Home</a></li>
|
||||||
|
<li class="active">Documentation</li>
|
||||||
|
</ol>
|
||||||
|
<!-- /Breadcrumbs (top) -->
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Guild Wars 2 Item tooltip</h1>
|
||||||
|
</div>
|
||||||
|
<!-- /Header -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- Intro -->
|
||||||
|
<h2>Methods of adding tooltips</h2>
|
||||||
|
<p>
|
||||||
|
There is a variety of methods to add tooltips. Those methods are listed below with a short explanation and an example or a link to an example. To simplify the examples, the including of the script and stylesheet is left out.
|
||||||
|
</p><br />
|
||||||
|
<!-- /Intro -->
|
||||||
|
|
||||||
|
<!-- addNow -->
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addNow(e, itemId)</h3></div>
|
||||||
|
<table class="table">
|
||||||
|
<tr>
|
||||||
|
<th class="col-md-1">e</th>
|
||||||
|
<td>Any DOM element</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>itemId</th>
|
||||||
|
<td>The id of the item</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>
|
||||||
|
By far the simplest method, <code>addNow</code> adds a tooltip by fetching the item information from the API. This happens as soon as the page loads.
|
||||||
|
</p><br />
|
||||||
|
|
||||||
|
<h4>Example</h4>
|
||||||
|
<pre class="brush: html; toolbar: false;">
|
||||||
|
<a id="addNow">The tooltip for this item is loaded when the page is loaded.</a>
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addNow(document.getElementById("addNow"), 76193);
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>Result</h4>
|
||||||
|
<a id="demoAddNow">The tooltip for this item is loaded when the page is loaded.</a>
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addNow(document.getElementById("demoAddNow"), 76193);
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div><br />
|
||||||
|
<!-- /addNow -->
|
||||||
|
|
||||||
|
<!-- addLater -->
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addLater(e, itemId)</h3></div>
|
||||||
|
<table class="table">
|
||||||
|
<tr>
|
||||||
|
<th class="col-md-1">e</th>
|
||||||
|
<td>Any DOM element</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>itemId</th>
|
||||||
|
<td>The id of the item</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>
|
||||||
|
This method works almost exactly the same as <code>addNow</code>, but the main difference is that <code>addLater</code> first fetches the item information from the API when the user hovers their mouse over the tooltip. This results in a faster page loading time, but a slower tooltip loading time.<br />
|
||||||
|
This method makes use of the <code>onmouseover</code> event. If another function is already assigned to this event, ItemTooltip will first call that function and then execute its own function.<br />
|
||||||
|
</p><br />
|
||||||
|
|
||||||
|
<h4>Example</h4>
|
||||||
|
<pre class="brush: html; toolbar: false;">
|
||||||
|
<a id="addLater">The tooltip for this item is only loaded when you hover over it.</a>
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addLater(document.getElementById("addLater"), 6910);
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>Result</h4>
|
||||||
|
<a id="demoAddLater">The tooltip for this item is only loaded when you hover over it.</a>
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addLater(document.getElementById("demoAddLater"), 6910);
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div><br />
|
||||||
|
<!-- /addLater -->
|
||||||
|
|
||||||
|
<!-- addAllNow -->
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addAllNow()</h3></div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>
|
||||||
|
The <code>addAllNow</code> method looks for all the DOM elements with the <code>data-itemid</code> attribute and puts them together into a single API request to save bandwidth. This happens as soon as the page is loaded.<br />
|
||||||
|
</p><br />
|
||||||
|
|
||||||
|
<h4>Example</h4>
|
||||||
|
<pre class="brush: html; toolbar: false;">
|
||||||
|
<a data-itemid="4019">The tooltip for this item is added automatically when the page is loaded.</a><br />
|
||||||
|
<a data-itemid="1020">addAllNow() adds all the tooltips at once.
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addAllNow();
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>Result</h4>
|
||||||
|
<a data-itemid="4019">The tooltip for this item is added automatically when the page is loaded.</a><br />
|
||||||
|
<a data-itemid="1020">addAllNow() adds all the tooltips at once.</a>
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addAllNow();
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div><br />
|
||||||
|
<!-- /addAllNow -->
|
||||||
|
|
||||||
|
<!-- addDirect -->
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading"><h3 class="panel-title">ItemTooltip.addDirect(e, json)</h3></div>
|
||||||
|
<table class="table">
|
||||||
|
<tr>
|
||||||
|
<th class="col-md-1">e</th>
|
||||||
|
<td>Any DOM element</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>json</th>
|
||||||
|
<td>The object representing the item. This object should be conform the <a href="https://wiki.guildwars2.com/wiki/API:2/items">Guild Wars 2 API specfication about items</a></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>
|
||||||
|
<code>addDirect</code> can be used to create a tooltip without querying the API. This method should be used when the tooltip should not reflect up-to-date item information.<br />
|
||||||
|
</p><br />
|
||||||
|
|
||||||
|
<h4>Example</h4>
|
||||||
|
<pre class="brush: html; toolbar: false;">
|
||||||
|
<a id="addDirect">The tooltip for this item is also loaded when the page is loaded, but the data is static.</a>
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addDirect(document.getElementById("addDirect"), '{"name":"Strong Swindler Pants of Vampirism","description":"","type":"Armor","level":32,"rarity":"Masterwork","vendor_value":90,"default_skin":28,"game_types":["Activity","Wvw","Dungeon","Pve"],"flags":["SoulBindOnUse"],"restrictions":[],"id":1449,"chat_link":"[&AgGpBQAA]","icon":"https://render.guildwars2.com/file/51EBE5BAF9640A9250D90F5DAC1458A9B8F1390D/61051.png","details":{"type":"Leggings","weight_class":"Medium","defense":59,"infusion_slots":[],"infix_upgrade":{"attributes":[{"attribute":"Power","modifier":21},{"attribute":"Precision","modifier":15}]},"suffix_item_id":24709,"secondary_suffix_item_id":""}}');
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>Result</h4>
|
||||||
|
<a id="demoAddDirect">The tooltip for this item is also loaded when the page is loaded, but the data is static.</a>
|
||||||
|
<script>
|
||||||
|
ItemTooltip.addDirect(document.getElementById("demoAddDirect"), '{"name":"Strong Swindler Pants of Vampirism","description":"","type":"Armor","level":32,"rarity":"Masterwork","vendor_value":90,"default_skin":28,"game_types":["Activity","Wvw","Dungeon","Pve"],"flags":["SoulBindOnUse"],"restrictions":[],"id":1449,"chat_link":"[&AgGpBQAA]","icon":"https://render.guildwars2.com/file/51EBE5BAF9640A9250D90F5DAC1458A9B8F1390D/61051.png","details":{"type":"Leggings","weight_class":"Medium","defense":59,"infusion_slots":[],"infix_upgrade":{"attributes":[{"attribute":"Power","modifier":21},{"attribute":"Precision","modifier":15}]},"suffix_item_id":24709,"secondary_suffix_item_id":""}}');
|
||||||
|
</script><br />
|
||||||
|
</div>
|
||||||
|
</div><br />
|
||||||
|
<!-- /addDirect -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Breadcrumbs (bottom) -->
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li><a href="./">Home</a></li>
|
||||||
|
<li class="active">Documentation</li>
|
||||||
|
</ol>
|
||||||
|
<!-- /Breadcrumbs (bottom) -->
|
||||||
|
</div>
|
||||||
|
<!-- /Contents -->
|
||||||
|
</div>
|
||||||
|
<!-- /Wrapper -->
|
||||||
|
</body>
|
||||||
|
</html>
|
After Width: | Height: | Size: 288 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 230 KiB |
After Width: | Height: | Size: 236 KiB |
After Width: | Height: | Size: 366 KiB |
After Width: | Height: | Size: 312 KiB |
After Width: | Height: | Size: 150 KiB |
|
@ -0,0 +1,122 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="description" content="A JavaScript plugin to add informative item tooltips for Guild Wars 2." />
|
||||||
|
<meta name="keywords" content="Guild Wars 2 gw2 item tooltip information hover" />
|
||||||
|
<meta name="author" content="Felix Dekker" />
|
||||||
|
<meta name="application-name" content="GW2 item tooltip" />
|
||||||
|
|
||||||
|
<!-- JQuery / Bootstrap -->
|
||||||
|
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
|
||||||
|
|
||||||
|
<!-- Syntax highlighter -->
|
||||||
|
<!-- http://alexgorbatchev.com/SyntaxHighlighter/ -->
|
||||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
|
||||||
|
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css"/>
|
||||||
|
<script type="text/javascript">SyntaxHighlighter.all();</script>
|
||||||
|
|
||||||
|
<!-- Custom scripts and styling -->
|
||||||
|
<script src="js/GW2Tooltip.js"></script>
|
||||||
|
<script src="js/ItemTooltip.js"></script>
|
||||||
|
<script src="js/SkillTooltip.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/ItemTooltip.css" />
|
||||||
|
|
||||||
|
<title>GW2 Item tooltip</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<a class="navbar-brand" href="#">FWDekker</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="container">
|
||||||
|
<div class="contents">
|
||||||
|
<!-- Breadcrumbs (top) -->
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="active">Home</li>
|
||||||
|
</ol>
|
||||||
|
<!-- /Breadcrumbs (top) -->
|
||||||
|
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Guild Wars 2 Item tooltip</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="https://waflix.stackstorage.com/index.php/s/g7S5ESbmJJLAG5w/download"><span class="glyphicon glyphicon-download-alt"></span> Download</a><br />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>About</h2>
|
||||||
|
<p>
|
||||||
|
<b>Guild Wars 2 item tooltip</b> is a JavaScript utility to add tooltips for Guild Wars 2 items to display information about them. No frameworks required and simple to use.
|
||||||
|
</p>
|
||||||
|
</div><br />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>How it works</h2>
|
||||||
|
<p>
|
||||||
|
Tooltips can be added in two ways:<br />
|
||||||
|
<ul>
|
||||||
|
<li>by supplying the information to be displayed directly (using <code>ItemTooltip.addDirect</code>); or</li>
|
||||||
|
<li>by giving the ID of the item (using <code>ItemTooltip.addNow</code>).</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
With the latter option the <a href="https://wiki.guildwars2.com/wiki/API:2">Guild Wars 2 API</a> is accessed and up-to-date information is retrieved and used to create the tooltip. Note that this option does <i>not</i> work in Internet Explorer versions 9 and below; it does, however, work on every other major browser.<br />
|
||||||
|
|
||||||
|
For more information you can refer to the <a href="docs.html">documentation</a>.
|
||||||
|
</p>
|
||||||
|
</div><br />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>Demo</h2>
|
||||||
|
<h3>Code</h3>
|
||||||
|
<pre class="brush: html; toolbar: false;">
|
||||||
|
<head>
|
||||||
|
<!-- Include the script and style -->
|
||||||
|
<script src="js/ItemTooltip.js"></script>
|
||||||
|
<link rel="stylesheet" href="css/ItemTooltip.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Add the tooltip to an element -->
|
||||||
|
<a id="demoItemTooltip">This is an item tooltip.</a>
|
||||||
|
<script>
|
||||||
|
GW2Tooltip.addNow(document.getElementById("demoItemTooltip"), 46762, ItemTooltip);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>Result</h3>
|
||||||
|
<a id="demoItemTooltip">This is an item tooltip.</a> (it may take a second to appear if you just loaded this page)
|
||||||
|
<script>
|
||||||
|
GW2Tooltip.addNow(document.getElementById("demoItemTooltip"), 46762, ItemTooltip);
|
||||||
|
</script>
|
||||||
|
</div><br />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>Q&A</h2>
|
||||||
|
<h3>Q: Does it work with traits/skills/waypoints too?</h3>
|
||||||
|
<p>A: At the moment it works for items only, but I'm planning on adding this functionality later on.</p>
|
||||||
|
|
||||||
|
<h3>Q: Why don't crafting materials display the required crafting disciplines and their levels?</h3>
|
||||||
|
<p>A: The Guild Wars 2 API does currently not offer a way to retrieve this information, or at least not directly from the item itself.</p>
|
||||||
|
|
||||||
|
<h3>Q: Does it work with JQuery, Underscore, Backbone, Angular etc.?</h3>
|
||||||
|
<p>A: Yes. It does not require any framework and it should not collide with any framework either.</p>
|
||||||
|
</div><br />
|
||||||
|
|
||||||
|
<!-- Breadcrumbs (top) -->
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="active">Home</li>
|
||||||
|
</ol>
|
||||||
|
<!-- /Breadcrumbs (top) -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"predef" : [
|
||||||
|
"ActiveXObject",
|
||||||
|
"JSON4",
|
||||||
|
"JSON3",
|
||||||
|
"JSON2"
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,597 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tooltip.
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
*/
|
||||||
|
var GW2Tooltip = (function()
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Private functions for DOM interaction.
|
||||||
|
*
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
|
var Element =
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Converts a string to a DOM element and returns this. If the string
|
||||||
|
* contains more than one element on the highest level, only the
|
||||||
|
* first node is returned.
|
||||||
|
*
|
||||||
|
* @method stringToNode
|
||||||
|
* @param {string} string the string.
|
||||||
|
* @return {object} a DOM element.
|
||||||
|
*/
|
||||||
|
stringToNode : function(string)
|
||||||
|
{
|
||||||
|
var parent = document.createElement("div");
|
||||||
|
parent.innerHTML = string;
|
||||||
|
return parent.firstChild;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inserts an element in the DOM after another element.
|
||||||
|
*
|
||||||
|
* @method insertAfter
|
||||||
|
* @param {object} e1 the element after which is to be
|
||||||
|
* inserted.
|
||||||
|
* @param {object} e2 the element to be inserted.
|
||||||
|
*/
|
||||||
|
insertAfter : function(e1, e2)
|
||||||
|
{
|
||||||
|
e1.parentNode.insertBefore(e2, e1.nextSibling);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* API access.
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
*/
|
||||||
|
var APIAccess = (function()
|
||||||
|
{
|
||||||
|
var queue = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a cross-domain request object, or undefined if the browser
|
||||||
|
* sucks.
|
||||||
|
*
|
||||||
|
* @method getCORSRequest
|
||||||
|
* @return {(XMLHttpRequest|ActiveXObject)} a cross-domain request
|
||||||
|
* object, or undefined
|
||||||
|
* if the browser
|
||||||
|
* sucks.
|
||||||
|
*/
|
||||||
|
var getCORSRequest = (function()
|
||||||
|
{
|
||||||
|
var validFactory = -1,
|
||||||
|
factories = [
|
||||||
|
//function() { return new XDomainRequest(); },
|
||||||
|
function() { return new XMLHttpRequest(); },
|
||||||
|
function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
|
||||||
|
function() { return new ActiveXObject("Msxml3.XMLHTTP"); },
|
||||||
|
function()
|
||||||
|
{
|
||||||
|
return new ActiveXObject("Microsoft.XMLHTTP");
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Try out all factories and save index of first factory that works.
|
||||||
|
var factory,
|
||||||
|
i, length = factories.length;
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
factory = factories[i]();
|
||||||
|
validFactory = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
catch(e)
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return a function that returns the cross-domain request object.
|
||||||
|
return function()
|
||||||
|
{
|
||||||
|
if(validFactory >= 0)
|
||||||
|
return factories[validFactory]();
|
||||||
|
else
|
||||||
|
return undefined;
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reads JSON from the given URL and passes this to the callback.
|
||||||
|
*
|
||||||
|
* @method getJSONP
|
||||||
|
* @param {string} url the URL of the JSON.
|
||||||
|
* @param {Function} callback the function to pass the JSON to.
|
||||||
|
*/
|
||||||
|
var getJSONP = function(url, callback)
|
||||||
|
{
|
||||||
|
var _baseURL = "https://api.guildwars2.com/";
|
||||||
|
var xmlhttp = getCORSRequest();
|
||||||
|
|
||||||
|
xmlhttp.onreadystatechange = function()
|
||||||
|
{
|
||||||
|
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
|
||||||
|
if(typeof callback === "function")
|
||||||
|
callback(Polyfill.JSONParse(xmlhttp.response));
|
||||||
|
};
|
||||||
|
|
||||||
|
xmlhttp.open("GET", _baseURL + url, true);
|
||||||
|
xmlhttp.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Public functions.
|
||||||
|
*
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
|
var exports = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Requests data for a single tooltip from the API right away.
|
||||||
|
*
|
||||||
|
* @method requestData
|
||||||
|
* @param {number} id the id of the data.
|
||||||
|
* @param {class} generator the generator to use for the
|
||||||
|
* tooltip.
|
||||||
|
* @param {Function} callback the function to pass the JSON to.
|
||||||
|
*/
|
||||||
|
exports.requestData = function(id, generator, callback)
|
||||||
|
{
|
||||||
|
getJSONP("/v2/" + generator.type + "/" + id, callback);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds the id for a single tooltip to the request queue.
|
||||||
|
*
|
||||||
|
* @method queueData
|
||||||
|
* @param {object} e the element to add the tooltip to
|
||||||
|
* after completing the queue.
|
||||||
|
* @param {number} id the id of the data.
|
||||||
|
* @param {class} generator the generator to use for the
|
||||||
|
* tooltip.
|
||||||
|
*/
|
||||||
|
exports.queueData = function(e, id, generator)
|
||||||
|
{
|
||||||
|
var type = generator.type;
|
||||||
|
|
||||||
|
if(queue[type] === undefined)
|
||||||
|
queue[type] = [];
|
||||||
|
queue[type].push([e, id]);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Executes the queue and adds all tooltips to the right elements, and
|
||||||
|
* then empties the queue.
|
||||||
|
*
|
||||||
|
* @method executeQueue
|
||||||
|
* @param {class} generator the generator to use for the
|
||||||
|
* tooltip.
|
||||||
|
* @param {Function} callback the function to pass the JSONs to.
|
||||||
|
*/
|
||||||
|
exports.executeQueue = function(generator, options, callback)
|
||||||
|
{
|
||||||
|
var type = generator.type;
|
||||||
|
|
||||||
|
if(queue.length === 0)
|
||||||
|
return;
|
||||||
|
if(queue[type] === undefined)
|
||||||
|
return;
|
||||||
|
if(queue[type].length === 0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Build URL
|
||||||
|
var url = [],
|
||||||
|
i, length = queue[type].length;
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
url.push(queue[type][i][1]);
|
||||||
|
|
||||||
|
// Get JSON and add respective tooltips
|
||||||
|
getJSONP("/v2/" + type + "?ids=" + url.join(","), function(json)
|
||||||
|
{
|
||||||
|
var i, length1 = queue[type].length,
|
||||||
|
j, length2 = json.length;
|
||||||
|
|
||||||
|
for(i = 0; i < length1; i++)
|
||||||
|
for(j = 0; j < length2; j++)
|
||||||
|
if(json[j].id == queue[type][i][1])
|
||||||
|
callback(queue[type][i][0], json[j], generator,
|
||||||
|
options);
|
||||||
|
|
||||||
|
queue[type] = [];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return exports;
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
var exports = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds a tooltip to the given element.
|
||||||
|
*
|
||||||
|
* @method addDirect
|
||||||
|
* @param {object} e the element to add the tooltip to.
|
||||||
|
* @param {object} json the data. Should have the structure as
|
||||||
|
* specified in the Guild Wars 2 API
|
||||||
|
* version 2 documentation.
|
||||||
|
* @param {class} generator the generator to use for the tooltip.
|
||||||
|
* @param {class} options additional parameters for the tooltip.
|
||||||
|
* Options starting with "link" are
|
||||||
|
* used to manipulate the contents of
|
||||||
|
* the tooltip link, which is the
|
||||||
|
* element to which the tooltip is
|
||||||
|
* added. These options can be applied
|
||||||
|
* together. Use option "linkReplace"
|
||||||
|
* to indicate whether the contents of
|
||||||
|
* the link should be replaced with the
|
||||||
|
* new information or should be
|
||||||
|
* prepended instead.
|
||||||
|
* The following options are
|
||||||
|
* recognised:
|
||||||
|
* "linkIcon" :
|
||||||
|
* true if the link info should
|
||||||
|
* contain an <img />
|
||||||
|
* element with the
|
||||||
|
* tooltip's icon; should
|
||||||
|
* be false or undefined
|
||||||
|
* otherwise.
|
||||||
|
* Use option
|
||||||
|
* "linkIconClass" to
|
||||||
|
* optionally set the class
|
||||||
|
* of these images.
|
||||||
|
* "linkIconClass":
|
||||||
|
* if "linkIcon" is true, the
|
||||||
|
* added icons will have
|
||||||
|
* the class defined in
|
||||||
|
* this option.
|
||||||
|
* "linkInfo" :
|
||||||
|
* false or undefined if no
|
||||||
|
* info should be added to
|
||||||
|
* the link; should be a
|
||||||
|
* string to add info from
|
||||||
|
* the tooltip (e.g.
|
||||||
|
* "name", "id",
|
||||||
|
* "chat_link" etc.). See
|
||||||
|
* the Guild Wars 2 API for
|
||||||
|
* all possible values.
|
||||||
|
* "linkReplace" :
|
||||||
|
* true to replace the link's
|
||||||
|
* contents with the
|
||||||
|
* content defined with
|
||||||
|
* other options starting
|
||||||
|
* with "link"; false to
|
||||||
|
* prepend this content to
|
||||||
|
* the link instead. If no
|
||||||
|
* new content is defined,
|
||||||
|
* an empty string will
|
||||||
|
* replace or prepend the
|
||||||
|
* link's contents.
|
||||||
|
*/
|
||||||
|
exports.addDirect = function(e, json, generator, options)
|
||||||
|
{
|
||||||
|
// Default parameter values
|
||||||
|
options = (options || {});
|
||||||
|
options.linkIcon = (options.linkIcon || false);
|
||||||
|
options.linkIconClass = (options.linkIconClass || "");
|
||||||
|
options.linkInfo = (options.linkInfo || false);
|
||||||
|
// If no link contents are generated, prepend with empty string
|
||||||
|
options.linkReplace = (options.linkReplace || false);
|
||||||
|
|
||||||
|
// Parse JSON if needed
|
||||||
|
if(typeof json === "string")
|
||||||
|
json = Polyfill.JSONParse(json);
|
||||||
|
|
||||||
|
|
||||||
|
Polyfill.addClass(e, "GW2TooltipLink");
|
||||||
|
var tooltip = new generator(json);
|
||||||
|
|
||||||
|
// Remove current tooltip if it is there
|
||||||
|
if(e.nextSibling !== null &&
|
||||||
|
Polyfill.hasClass(e.nextSibling, "GW2Tooltip"))
|
||||||
|
e.parentNode.removeChild(e.nextSibling);
|
||||||
|
|
||||||
|
|
||||||
|
// Change tooltip link if needed
|
||||||
|
var innerHTML = (options.linkReplace ? "" : e.innerHTML);
|
||||||
|
|
||||||
|
// Addition should be in reversed order of appearance
|
||||||
|
if(options.linkInfo !== false)
|
||||||
|
{
|
||||||
|
innerHTML = json[options.linkInfo] + innerHTML;
|
||||||
|
}
|
||||||
|
if(options.linkIcon === true)
|
||||||
|
{
|
||||||
|
innerHTML = "" +
|
||||||
|
"<img src=\"" +
|
||||||
|
json.icon +
|
||||||
|
"\" class=\"" +
|
||||||
|
options.linkIconClass +
|
||||||
|
"\" /> " +
|
||||||
|
innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.innerHTML = innerHTML;
|
||||||
|
|
||||||
|
|
||||||
|
// Insert tooltip
|
||||||
|
Element.insertAfter(e,
|
||||||
|
Element.stringToNode(tooltip.getTooltip()));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds a tooltip to the given element.
|
||||||
|
*
|
||||||
|
* @method addNow
|
||||||
|
* @param {object} e the element to add the tooltip to.
|
||||||
|
* @param {number} id the id of the data.
|
||||||
|
* @param {class} generator the generator to use for the tooltip.
|
||||||
|
*/
|
||||||
|
exports.addNow = function(e, id, generator, options)
|
||||||
|
{
|
||||||
|
APIAccess.requestData(id, generator, function(json)
|
||||||
|
{
|
||||||
|
exports.addDirect(e, json, generator, options);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds a tooltip to the given element as soon as the user hovers over the
|
||||||
|
* link. Decreases page load time and increases tooltip appear time.
|
||||||
|
*
|
||||||
|
* @method addLater
|
||||||
|
* @param {object} e the element to add the tooltip to.
|
||||||
|
* @param {number} id the id of the data.
|
||||||
|
* @param {class} generator the generator to use for the tooltip.
|
||||||
|
*/
|
||||||
|
exports.addLater = function(e, dataId, generator, options)
|
||||||
|
{
|
||||||
|
var curEvent = e.onmouseover;
|
||||||
|
|
||||||
|
e.onmouseover = function()
|
||||||
|
{
|
||||||
|
if(typeof curEvent === "function")
|
||||||
|
curEvent();
|
||||||
|
|
||||||
|
APIAccess.requestData(dataId, generator, function(json)
|
||||||
|
{
|
||||||
|
exports.addDirect(e, json, generator, options);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds tooltips for all elements with the data-[type]id tag. This is
|
||||||
|
* usually done directly after loading the page.
|
||||||
|
*
|
||||||
|
* @method addAllNow
|
||||||
|
* @param {class} generator the generator to use for the tooltip.
|
||||||
|
*/
|
||||||
|
exports.addAllNow = function(generator, options)
|
||||||
|
{
|
||||||
|
var eList,
|
||||||
|
i, length;
|
||||||
|
|
||||||
|
// Get all elements with proper data attribute.
|
||||||
|
if(document.querySelectorAll)
|
||||||
|
{
|
||||||
|
eList = document.querySelectorAll("[data-" + generator.attr + "]");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// Custom polyfill
|
||||||
|
var e, eAll = document.getElementsByTagName("*");
|
||||||
|
length = eAll.length;
|
||||||
|
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
{
|
||||||
|
e = eAll[i];
|
||||||
|
if(e.dataset !== undefined &&
|
||||||
|
e.dataset[generator.attr] !== undefined)
|
||||||
|
{
|
||||||
|
eList.push(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Queue tooltips
|
||||||
|
length = eList.length;
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
{
|
||||||
|
APIAccess.queueData(
|
||||||
|
eList[i],
|
||||||
|
eList[i].dataset[generator.attr],
|
||||||
|
generator
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add tooltips
|
||||||
|
APIAccess.executeQueue(generator, options, exports.addDirect);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Static tooltip data. Used by other Tooltip classes.
|
||||||
|
*
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
|
exports.TooltipData =
|
||||||
|
{
|
||||||
|
// List of icons.
|
||||||
|
icons :
|
||||||
|
{
|
||||||
|
base :
|
||||||
|
"https://render.guildwars2.com/file/",
|
||||||
|
ui_coin_gold :
|
||||||
|
"090A980A96D39FD36FBB004903644C6DBEFB1FFB/156904.png",
|
||||||
|
ui_coin_silver :
|
||||||
|
"E5A2197D78ECE4AE0349C8B3710D033D22DB0DA6/156907.png",
|
||||||
|
ui_coin_copper :
|
||||||
|
"6CF8F96A3299CFC75D5CC90617C3C70331A1EF0E/156902.png",
|
||||||
|
ui_infusion_slot_offensive :
|
||||||
|
"FD212A4A36BEA799E3BDCDFFDC55DEC2A50FE19D/517203.png",
|
||||||
|
ui_infusion_slot_defensive :
|
||||||
|
"3D941C5F3C0BE9FFAFE27A2C4AE70ABC94AAE724/517202.png",
|
||||||
|
ui_infusion_slot_utility :
|
||||||
|
"0B5F38D94AAA1539EC6009F4CF37DF5673C81DA0/517204.png",
|
||||||
|
ui_infusion_slot_agony :
|
||||||
|
"F54BC4283FFAB7531073FF08F470A9730E47FB4D/683590.png"
|
||||||
|
},
|
||||||
|
|
||||||
|
// List of attribute names.
|
||||||
|
attributes :
|
||||||
|
{
|
||||||
|
BoonDuration : "Concentration",
|
||||||
|
ConditionDamage : "Condition Damage",
|
||||||
|
ConditionDutation : "Expertise",
|
||||||
|
CritDamage : "Ferocity",
|
||||||
|
Healing : "Healing Power",
|
||||||
|
Power : "Power",
|
||||||
|
Precision : "Precision",
|
||||||
|
Toughness : "Toughness",
|
||||||
|
Vitality : "Vitality"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Polyfill functions for browser compatibility. Used by other Tooltip
|
||||||
|
* classes.
|
||||||
|
*
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
|
var Polyfill =
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Sets the JSON parser to JSON4 if present, or falls back to JSON3,
|
||||||
|
* then to JSON2, then to default JSON and then to eval.
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
* @return {method} sets the JSON parser.
|
||||||
|
*/
|
||||||
|
JSONParse : function()
|
||||||
|
{
|
||||||
|
if(typeof JSON4 !== "undefined")
|
||||||
|
return JSON4.parse;
|
||||||
|
else if(typeof JSON3 !== "undefined")
|
||||||
|
return JSON3.parse;
|
||||||
|
else if(typeof JSON2 !== "undefined")
|
||||||
|
return JSON2.parse;
|
||||||
|
else if(typeof JSON !== "undefined")
|
||||||
|
return JSON.parse;
|
||||||
|
else
|
||||||
|
return function(sJSON)
|
||||||
|
{
|
||||||
|
// Provide a JSON library to prevent this eval from
|
||||||
|
// executing.
|
||||||
|
return eval("(" + sJSON + ")");
|
||||||
|
};
|
||||||
|
}(),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the first index at which a given element can be found in the
|
||||||
|
* object, or -1 if it is not present.
|
||||||
|
*
|
||||||
|
* @method indexOf
|
||||||
|
* @param {object} object the object to traverse.
|
||||||
|
* @param {object} searchElement the element to locate in the
|
||||||
|
* object.
|
||||||
|
* @param {number} fromIndex the index to start the search
|
||||||
|
* at.
|
||||||
|
* @return {number} the first index at which a given element can be
|
||||||
|
* found in the object, or -1 if it is not
|
||||||
|
* present.
|
||||||
|
*/
|
||||||
|
indexOf : function(object, searchElement, fromIndex)
|
||||||
|
{
|
||||||
|
var k;
|
||||||
|
|
||||||
|
//if(object == null)
|
||||||
|
if(object === undefined || object === null)
|
||||||
|
throw new TypeError("\"this\" is null or not defined");
|
||||||
|
|
||||||
|
var o = Object(object),
|
||||||
|
len = o.length >>> 0;
|
||||||
|
|
||||||
|
if(len === 0)
|
||||||
|
return -1;
|
||||||
|
|
||||||
|
var n = +fromIndex || 0;
|
||||||
|
if(Math.abs(n) === Infinity)
|
||||||
|
n = 0;
|
||||||
|
if(n >= len)
|
||||||
|
return -1;
|
||||||
|
|
||||||
|
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
|
||||||
|
|
||||||
|
while(k < len)
|
||||||
|
{
|
||||||
|
if(k in o && o[k] === searchElement)
|
||||||
|
return k;
|
||||||
|
k++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return -1;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns true if the element has the given class.
|
||||||
|
*
|
||||||
|
* @method hasClass
|
||||||
|
* @param {object} element the element.
|
||||||
|
* @param {string} cls the class.
|
||||||
|
* @return {string} true if the element has the given class.
|
||||||
|
*/
|
||||||
|
hasClass : function(element, cls)
|
||||||
|
{
|
||||||
|
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds a class to the given element.
|
||||||
|
*
|
||||||
|
* @method addClass
|
||||||
|
* @param {object} element the element.
|
||||||
|
* @param {string} cls the class.
|
||||||
|
*/
|
||||||
|
addClass : function(element, cls)
|
||||||
|
{
|
||||||
|
if(!Polyfill.hasClass(element, cls))
|
||||||
|
element.className += (" " + cls);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the comma-separated string of a number.
|
||||||
|
*
|
||||||
|
* @method commaSeparate
|
||||||
|
* @param {number} val the number to separate.
|
||||||
|
* @return {string} the comma-separated string of a number.
|
||||||
|
*/
|
||||||
|
commaSeparate : function(val)
|
||||||
|
{
|
||||||
|
val = val.toString();
|
||||||
|
var str = val,
|
||||||
|
dif = str.length - (3 * Math.floor(str.length / 3));
|
||||||
|
|
||||||
|
if(dif !== 0)
|
||||||
|
str = str.substr(dif, str.length);
|
||||||
|
|
||||||
|
var arr = str.match(/.{3}/g);
|
||||||
|
if(dif !== 0)
|
||||||
|
arr.unshift(val.substr(0, dif));
|
||||||
|
|
||||||
|
return arr.join(",");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
exports.Polyfill = Polyfill;
|
||||||
|
|
||||||
|
return exports;
|
||||||
|
})();
|
|
@ -0,0 +1,713 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ItemTooltip.
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
* @param {object} item the item's data. Should have the structure as
|
||||||
|
* specified in the Guild Wars 2 API version 2
|
||||||
|
* documentation.
|
||||||
|
*/
|
||||||
|
function ItemTooltip(item)
|
||||||
|
{
|
||||||
|
// Shortcut references to main Tooltip objects.
|
||||||
|
var Data = GW2Tooltip.TooltipData;
|
||||||
|
var Polyfill = GW2Tooltip.Polyfill;
|
||||||
|
|
||||||
|
var _item = item;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the header for the tooltip, with image and item name.
|
||||||
|
*
|
||||||
|
* @method getHeader
|
||||||
|
* @return {string} the header for the tooltip.
|
||||||
|
*/
|
||||||
|
var getHeader = function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
"<img class=\"GW2TooltipImage\" src=\"" + _item.icon + "\" /> " +
|
||||||
|
"<span class=\"GW2TooltipTitle GW2TooltipRarity" +
|
||||||
|
_item.rarity + "\">" +
|
||||||
|
_item.name +
|
||||||
|
"</span><br />";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the attributes of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getAttributes
|
||||||
|
* @param {boolean} newline true if an extra <br /> should
|
||||||
|
* be added to the end of the
|
||||||
|
* string.
|
||||||
|
* @return {string} the attributes of the item for the
|
||||||
|
* tooltip.
|
||||||
|
*/
|
||||||
|
var getAttributes = function(newline)
|
||||||
|
{
|
||||||
|
if(!_item.details.infix_upgrade)
|
||||||
|
return "";
|
||||||
|
|
||||||
|
var part = "",
|
||||||
|
attributes = _item.details.infix_upgrade.attributes,
|
||||||
|
i, length = attributes.length;
|
||||||
|
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
part += "" +
|
||||||
|
"+" + attributes[i].modifier +
|
||||||
|
" " + Data.attributes[attributes[i].attribute] +
|
||||||
|
"<br />";
|
||||||
|
|
||||||
|
return (part !== "" && newline ? part + "<br />" : part);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the buffs of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getBuffs
|
||||||
|
* @return {string} the buffs of the item for the tooltip.
|
||||||
|
*/
|
||||||
|
var getBuffs = function()
|
||||||
|
{
|
||||||
|
if(_item.details.infix_upgrade.buff === undefined)
|
||||||
|
return "";
|
||||||
|
|
||||||
|
var part = "",
|
||||||
|
buffs = _item.details.infix_upgrade.buff.description;
|
||||||
|
|
||||||
|
if(buffs.length === 0)
|
||||||
|
return "";
|
||||||
|
|
||||||
|
part += "<span style=\"color:#5599ff\">" +
|
||||||
|
buffs.replace(/(?:\r\n|\r|\n)/g, "<br />") +
|
||||||
|
"</span><br />";
|
||||||
|
|
||||||
|
return part;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the URL to the icon of the specified infusion slot type.
|
||||||
|
*
|
||||||
|
* @method getInfusionIcon
|
||||||
|
* @param {string} type the infusion slot type. Should be one of
|
||||||
|
* following values: "Agony", "Defense",
|
||||||
|
* "Utility" or "Offense". The URL to the
|
||||||
|
* Agony icon is returned otherwise.
|
||||||
|
* @return {string} the URL to the icon of the specified infusion slot
|
||||||
|
* type.
|
||||||
|
*/
|
||||||
|
var getInfusionIcon = function(type)
|
||||||
|
{
|
||||||
|
switch(type)
|
||||||
|
{
|
||||||
|
case "Defense":
|
||||||
|
return Data.icons.base +
|
||||||
|
Data.icons.ui_infusion_slot_defensive;
|
||||||
|
case "Offense":
|
||||||
|
return Data.icons.base +
|
||||||
|
Data.icons.ui_infusion_slot_offensive;
|
||||||
|
case "Utility":
|
||||||
|
return Data.icons.base +
|
||||||
|
Data.icons.ui_infusion_slot_utility;
|
||||||
|
default:
|
||||||
|
return Data.icons.base +
|
||||||
|
Data.icons.ui_infusion_slot_agony;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the infusion slots of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getInfusionSlots
|
||||||
|
* @param {boolean} newline true if an extra <br /> should be added
|
||||||
|
* to the end of the string.
|
||||||
|
* @return {string} the infusion slots part of the tooltip.
|
||||||
|
*/
|
||||||
|
var getInfusionSlots = function(newline)
|
||||||
|
{
|
||||||
|
var part = "",
|
||||||
|
infusionSlotType,
|
||||||
|
infusionSlots = _item.details.infusion_slots,
|
||||||
|
i, length = infusionSlots.length;
|
||||||
|
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
{
|
||||||
|
infusionSlotType = infusionSlots[i].flags[0];
|
||||||
|
part += "" +
|
||||||
|
"<img class=\"GW2TooltipInfusionSlotImage\" src=\"" +
|
||||||
|
getInfusionIcon(infusionSlotType) +
|
||||||
|
"\" /> " +
|
||||||
|
"Unused " + infusionSlotType + " Infusion Slot<br />";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (part !== "" && newline ? part + "<br />" : part);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the type of the item if it is an armor piece, or "" otherwise.
|
||||||
|
*
|
||||||
|
* @method getArmorType
|
||||||
|
* @return {string} the type of the item if it is an armor piece, or ""
|
||||||
|
* otherwise.
|
||||||
|
*/
|
||||||
|
var getArmorType = function()
|
||||||
|
{
|
||||||
|
if(_item.type !== "Armor")
|
||||||
|
return "";
|
||||||
|
|
||||||
|
switch(_item.details.type)
|
||||||
|
{
|
||||||
|
case "Boots":
|
||||||
|
return "Foot";
|
||||||
|
case "Coat":
|
||||||
|
return "Chest";
|
||||||
|
case "Gloves":
|
||||||
|
return "Hand";
|
||||||
|
case "Helm":
|
||||||
|
case "HelmAquatic":
|
||||||
|
return "Helm";
|
||||||
|
case "Leggings":
|
||||||
|
return "Leg";
|
||||||
|
case "Shoulders":
|
||||||
|
return "Shoulder";
|
||||||
|
default:
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the type of the item if it is a weapon, or "" otherwise.
|
||||||
|
*
|
||||||
|
* @method getWeaponType
|
||||||
|
* @return {string} the type of the item if it is a weapon, or ""
|
||||||
|
* otherwise.
|
||||||
|
*/
|
||||||
|
var getWeaponType = function()
|
||||||
|
{
|
||||||
|
if(_item.type !== "Weapon")
|
||||||
|
return "";
|
||||||
|
|
||||||
|
switch(_item.details.type)
|
||||||
|
{
|
||||||
|
case "Axe":
|
||||||
|
case "Dagger":
|
||||||
|
case "Mace":
|
||||||
|
case "Pistol":
|
||||||
|
case "Scepter":
|
||||||
|
case "Sword":
|
||||||
|
return "Main Hand";
|
||||||
|
case "Focus":
|
||||||
|
case "Shield":
|
||||||
|
case "Torch":
|
||||||
|
case "Warhorn":
|
||||||
|
return "Off Hand";
|
||||||
|
case "Greatsword":
|
||||||
|
case "Hammer":
|
||||||
|
case "LongBow":
|
||||||
|
case "Rifle":
|
||||||
|
case "ShortBow":
|
||||||
|
case "Staff":
|
||||||
|
return "Two-Handed";
|
||||||
|
case "Harpoon":
|
||||||
|
case "Speargun":
|
||||||
|
case "Trident":
|
||||||
|
return "Aquatic";
|
||||||
|
case "LargeBundle":
|
||||||
|
case "SmallBundle":
|
||||||
|
case "Toy":
|
||||||
|
case "TwoHandedToy":
|
||||||
|
return "Other";
|
||||||
|
default:
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the description of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getDescription
|
||||||
|
* @return {string} the description of the item for the tooltip.
|
||||||
|
*/
|
||||||
|
var getDescription = function()
|
||||||
|
{
|
||||||
|
if(!_item.hasOwnProperty("description"))
|
||||||
|
return "";
|
||||||
|
|
||||||
|
var desc = _item.description.replace(/<c=@.+?>/, function(match)
|
||||||
|
{
|
||||||
|
match = match.substring(4, match.length - 1);
|
||||||
|
match = match.charAt(0).toUpperCase() + match.slice(1);
|
||||||
|
return "<span class=\"GW2TooltipDesc" + match + "\">";
|
||||||
|
});
|
||||||
|
desc = desc.replace(/<\/c>/, "</span>");
|
||||||
|
return (desc !== "" ? desc + "<br />" : desc);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the description for the tooltip if the item is a consumable, or
|
||||||
|
* "" otherwise.
|
||||||
|
*
|
||||||
|
* @method getConsumableDescription
|
||||||
|
* @return {string} the description for the tooltip if the item is a
|
||||||
|
* consumable, or "" otherwise.
|
||||||
|
*/
|
||||||
|
var getConsumableDescription = function()
|
||||||
|
{
|
||||||
|
if(_item.type !== "Consumable")
|
||||||
|
return "";
|
||||||
|
|
||||||
|
var desc = _item.description;
|
||||||
|
if(desc === undefined || desc === "")
|
||||||
|
if(_item.details.description !== undefined &&
|
||||||
|
_item.details.description !== "")
|
||||||
|
desc = _item.details.description;
|
||||||
|
else
|
||||||
|
desc = "";
|
||||||
|
|
||||||
|
switch(_item.details.type)
|
||||||
|
{
|
||||||
|
case "Booze":
|
||||||
|
return "Double-click to consume.<br />" +
|
||||||
|
"Excessive alcohol consumption will result in" +
|
||||||
|
"intoxication.<br />";
|
||||||
|
case "Food":
|
||||||
|
case "Utility":
|
||||||
|
return "Double-click to consume.<br />" +
|
||||||
|
"<div class=\"ItemTooltipConsumableDescriptionIndent\">" +
|
||||||
|
"Nourishment(" + _item.details.duration_ms / 60000 +
|
||||||
|
"m): " +
|
||||||
|
desc.replace(/(?:\r\n|\r|\n)/g,
|
||||||
|
"<br />") + "</div>";
|
||||||
|
case "Generic":
|
||||||
|
return "Double-click to consume.<br />" +
|
||||||
|
desc.replace(/(?:\r\n|\r|\n)/g,
|
||||||
|
"<br />") + "<br />";
|
||||||
|
default:
|
||||||
|
return "Double-click to consume.<br />" +
|
||||||
|
getDescription();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the level of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getLevel
|
||||||
|
* @return {string} the level of the item for the tooltip.
|
||||||
|
*/
|
||||||
|
var getLevel = function()
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
_item.level > 0 ?
|
||||||
|
"Required Level: " + _item.level + "<br />" :
|
||||||
|
""
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the flags of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getFlags
|
||||||
|
* @return {string} the flags of the item for the tooltip.
|
||||||
|
*/
|
||||||
|
var getFlags = function()
|
||||||
|
{
|
||||||
|
var part = "",
|
||||||
|
flags = _item.flags;
|
||||||
|
|
||||||
|
// Unique
|
||||||
|
if(Polyfill.indexOf(flags, "Unique") >= 0)
|
||||||
|
part += "Unique<br />";
|
||||||
|
|
||||||
|
// Account bound
|
||||||
|
if(Polyfill.indexOf(flags, "AccountBound") >= 0)
|
||||||
|
if(Polyfill.indexOf(flags, "AccountBindOnUse") >= 0)
|
||||||
|
part += "Account Bound on Acquire or Use<br />";
|
||||||
|
else
|
||||||
|
part += "Account Bound on Acquire<br />";
|
||||||
|
else if(Polyfill.indexOf(flags, "AccountBindOnUse") >= 0)
|
||||||
|
part += "Account Bound on Use<br />";
|
||||||
|
|
||||||
|
// Soul bound
|
||||||
|
if(Polyfill.indexOf(flags, "SoulbindOnAcquire") >= 0)
|
||||||
|
if(Polyfill.indexOf(flags, "SoulbindOnUse") >= 0)
|
||||||
|
part += "Soulbound on Acquire or Use<br />";
|
||||||
|
else
|
||||||
|
part += "Soulbound on Acquire<br />";
|
||||||
|
else if(Polyfill.indexOf(flags, "SoulbindOnUse") >= 0)
|
||||||
|
part += "Soulbound on Use<br />";
|
||||||
|
|
||||||
|
/* Not actually used in-game
|
||||||
|
// Sold or salvaged
|
||||||
|
if(Polyfill.indexOf(flags, "NoSalvage") >= 0)
|
||||||
|
if(Polyfill.indexOf(flags, "NoSell") >= 0)
|
||||||
|
part += "Can\'t be sold or salvaged<br />";
|
||||||
|
else
|
||||||
|
part += "Can\'t be salvaged<br />";
|
||||||
|
else
|
||||||
|
part += "Can\'t be sold<br />";*/
|
||||||
|
|
||||||
|
return part;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the rarity of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getRarity
|
||||||
|
* @return {string} the rarity of the item for the tooltip.
|
||||||
|
*/
|
||||||
|
var getRarity = function()
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
_item.rarity == "Basic" ?
|
||||||
|
"" :
|
||||||
|
_item.rarity + "<br />"
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the value of the item for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getValue
|
||||||
|
* @return {string} the value of the item for the tooltip.
|
||||||
|
*/
|
||||||
|
var getValue = function()
|
||||||
|
{
|
||||||
|
if(Polyfill.indexOf(_item.flags, "NoSell") > -1)
|
||||||
|
return "";
|
||||||
|
|
||||||
|
var part = "",
|
||||||
|
value = item.vendor_value,
|
||||||
|
multiplier;
|
||||||
|
|
||||||
|
if(value >= 10000)
|
||||||
|
{
|
||||||
|
multiplier = Math.floor(value / 10000);
|
||||||
|
value -= multiplier * 10000;
|
||||||
|
part += "" +
|
||||||
|
"<span class=\"GW2TooltipValueGold\">" +
|
||||||
|
multiplier +
|
||||||
|
"</span> " +
|
||||||
|
"<img class=\"GW2TooltipValueIcon\" src=\"" +
|
||||||
|
Data.icons.base + Data.icons.ui_coin_gold +
|
||||||
|
"\" /> ";
|
||||||
|
}
|
||||||
|
if(value >= 100 || part.length > 0)
|
||||||
|
{
|
||||||
|
multiplier = Math.floor(value / 100);
|
||||||
|
value -= multiplier * 100;
|
||||||
|
part += "" +
|
||||||
|
"<span class=\"GW2TooltipValueSilver\">" +
|
||||||
|
multiplier +
|
||||||
|
"</span> " +
|
||||||
|
"<img class=\"GW2TooltipValueIcon\" src=\"" +
|
||||||
|
Data.icons.base + Data.icons.ui_coin_silver +
|
||||||
|
"\" /> ";
|
||||||
|
}
|
||||||
|
if(value >= 1 || part.length > 0)
|
||||||
|
{
|
||||||
|
part += "" +
|
||||||
|
"<span class=\"GW2TooltipValueCopper\">" +
|
||||||
|
value +
|
||||||
|
"</span> " +
|
||||||
|
"<img class=\"GW2TooltipValueIcon\" src=\"" +
|
||||||
|
Data.icons.base + Data.icons.ui_coin_copper +
|
||||||
|
"\" />";
|
||||||
|
}
|
||||||
|
|
||||||
|
return part;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* List of tooltip generators for subtypes.
|
||||||
|
*
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
var tooltipString =
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for an armor piece.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for an armor piece.
|
||||||
|
*/
|
||||||
|
Armor : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
"Defense: " + _item.details.defense + "<br />" +
|
||||||
|
getAttributes(true) +
|
||||||
|
|
||||||
|
getInfusionSlots(true) +
|
||||||
|
|
||||||
|
getRarity() +
|
||||||
|
_item.details.weight_class + "<br />" +
|
||||||
|
getArmorType() + " Armor<br />" +
|
||||||
|
getLevel() +
|
||||||
|
getDescription() +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a back item.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a back item.
|
||||||
|
*/
|
||||||
|
Back : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
"<br />" +
|
||||||
|
|
||||||
|
getRarity() +
|
||||||
|
"Back Item<br />" +
|
||||||
|
getDescription() +
|
||||||
|
getLevel() +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a bag.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a bag.
|
||||||
|
*/
|
||||||
|
Bag : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
"<br />" +
|
||||||
|
|
||||||
|
getDescription() +
|
||||||
|
getLevel() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a consumable.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a consumable.
|
||||||
|
*/
|
||||||
|
Consumable : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getConsumableDescription() +
|
||||||
|
"<br />" +
|
||||||
|
|
||||||
|
"Consumable<br />" +
|
||||||
|
getLevel() +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a container.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a container.
|
||||||
|
*/
|
||||||
|
Container : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getDescription() +
|
||||||
|
"<br />" +
|
||||||
|
|
||||||
|
"Consumable<br />" +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a gathering tool.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a gathering tool.
|
||||||
|
*/
|
||||||
|
Gathering : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getDescription() +
|
||||||
|
(_item.level > 0 ? "<br />" : "") +
|
||||||
|
|
||||||
|
getLevel() +
|
||||||
|
getFlags();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a gizmo.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a gizmo.
|
||||||
|
*/
|
||||||
|
Gizmo : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getDescription() +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a miniature.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a miniature.
|
||||||
|
*/
|
||||||
|
MiniPet : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getDescription() +
|
||||||
|
"<br />" +
|
||||||
|
|
||||||
|
"Miniature<br />" +
|
||||||
|
getFlags();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a salvage kit.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a salvage kit.
|
||||||
|
*/
|
||||||
|
Tool : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() + "<br />" +
|
||||||
|
getRarity() +
|
||||||
|
"Consumable<br />" +
|
||||||
|
getDescription() +
|
||||||
|
getFlags();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a trinket.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a trinket.
|
||||||
|
*/
|
||||||
|
Trinket : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getAttributes(true) +
|
||||||
|
|
||||||
|
getInfusionSlots(true) +
|
||||||
|
|
||||||
|
getRarity() +
|
||||||
|
_item.details.type + "<br />" +
|
||||||
|
getLevel() +
|
||||||
|
getDescription() +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a trophy.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a trophy.
|
||||||
|
*/
|
||||||
|
Trophy : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getDescription() +
|
||||||
|
"<br />" +
|
||||||
|
"Trophy<br />" +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for an upgrade component.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for an upgrade component.
|
||||||
|
*/
|
||||||
|
UpgradeComponent : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
"<br />" +
|
||||||
|
getBuffs() +
|
||||||
|
getDescription() +
|
||||||
|
getLevel() +
|
||||||
|
(_item.details.type === "Gem" ? "<br />" : "") +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a weapon.
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a weapon.
|
||||||
|
*/
|
||||||
|
Weapon : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
"Weapon Strength: " +
|
||||||
|
Polyfill.commaSeparate(_item.details.min_power) + " - " +
|
||||||
|
Polyfill.commaSeparate(_item.details.max_power) + "<br />" +
|
||||||
|
getAttributes(true) +
|
||||||
|
|
||||||
|
getInfusionSlots(true) +
|
||||||
|
|
||||||
|
getRarity() +
|
||||||
|
_item.details.type + "<br />" +
|
||||||
|
"(" + getWeaponType() + ")<br />" +
|
||||||
|
getLevel() +
|
||||||
|
getDescription() +
|
||||||
|
getFlags() +
|
||||||
|
getValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string for a generic item. Used for crafting
|
||||||
|
* materials( and traits).
|
||||||
|
*
|
||||||
|
* @method
|
||||||
|
* @return {string} the tooltip string for a generic item.
|
||||||
|
*/
|
||||||
|
Generic : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getDescription() +
|
||||||
|
getFlags() +
|
||||||
|
"<br />" +
|
||||||
|
getValue();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string appropriate for the item.
|
||||||
|
*
|
||||||
|
* @method getTooltip
|
||||||
|
* @return {string} the tooltip string appropriate for the item.
|
||||||
|
*/
|
||||||
|
this.getTooltip = function()
|
||||||
|
{
|
||||||
|
var tooltip = "<div class=\"GW2Tooltip\">" +
|
||||||
|
"<div class=\"GW2TooltipContents\">";
|
||||||
|
|
||||||
|
if(tooltipString.hasOwnProperty(_item.type))
|
||||||
|
tooltip += tooltipString[_item.type]();
|
||||||
|
else
|
||||||
|
tooltip += tooltipString.Generic();
|
||||||
|
|
||||||
|
tooltip += "</div></div>";
|
||||||
|
return tooltip;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
ItemTooltip.type = "items";
|
||||||
|
ItemTooltip.attr = "itemid";
|
|
@ -0,0 +1,250 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SkillTooltip.
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
* @param {object} skill the skill's data. Should have the structure as
|
||||||
|
* specified in the Guild Wars 2 API version 2
|
||||||
|
* documentation.
|
||||||
|
*/
|
||||||
|
function SkillTooltip(skill)
|
||||||
|
{
|
||||||
|
// Shortcut references to main Tooltip objects.
|
||||||
|
var Data = GW2Tooltip.TooltipData;
|
||||||
|
var Polyfill = GW2Tooltip.Polyfill;
|
||||||
|
|
||||||
|
var _skill = skill;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the header for the tooltip, with skill name, skill cast time and
|
||||||
|
* skill recharge time.
|
||||||
|
*
|
||||||
|
* @method getHeader
|
||||||
|
* @return {string} the header for the tooltip, with skill name, skill
|
||||||
|
* cast time and skill recharge time.
|
||||||
|
*/
|
||||||
|
var getHeader = function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
"<span class=\"SkillTooltipBeige\">" +
|
||||||
|
_skill.name +
|
||||||
|
"</span>" +
|
||||||
|
"<div style=\"float:right\">" +
|
||||||
|
// Casting time is not exposed in API
|
||||||
|
//getSmallFact("CastingTime", "value") +
|
||||||
|
getSmallFact("Recharge", "value") +
|
||||||
|
"</div><br />";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the description of the skill for the tooltip, or "" if it has
|
||||||
|
* none.
|
||||||
|
*
|
||||||
|
* @method getDescription
|
||||||
|
* @return {string} the description of the skill for the tooltip, or ""
|
||||||
|
* if it has none.
|
||||||
|
*/
|
||||||
|
var getDescription = function()
|
||||||
|
{
|
||||||
|
var desc;
|
||||||
|
if(_skill.desc !== undefined && _skill.desc !== "")
|
||||||
|
desc = _skill.desc;
|
||||||
|
else if(_skill.description !== undefined && _skill.description !== "")
|
||||||
|
desc = _skill.description;
|
||||||
|
else
|
||||||
|
return "";
|
||||||
|
|
||||||
|
return desc.replace(/^[^\s]+\./, function(val)
|
||||||
|
{
|
||||||
|
return "<span class=\"SkillTooltipBeige\">" + val + "</span>";
|
||||||
|
}) + "<br />";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the first fact with the given type.
|
||||||
|
*
|
||||||
|
* @method getRawFacts
|
||||||
|
* @param {string} type the type of the fact to return.
|
||||||
|
* @return {fact[]} the first fact with the given type.
|
||||||
|
*/
|
||||||
|
var getRawFacts = function(type)
|
||||||
|
{
|
||||||
|
var i, length = _skill.facts.length,
|
||||||
|
facts = [];
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
if(_skill.facts[i].type === type)
|
||||||
|
facts.push(_skill.facts[i]);
|
||||||
|
return facts;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the given sub-value followed by an icon of the first fact with
|
||||||
|
* the given type, or "" if the fact does not exist.
|
||||||
|
*
|
||||||
|
* @method getSmallFact
|
||||||
|
* @param {string} type the type of the fact to return.
|
||||||
|
* @param {string} val the key of the sub-value of the fact.
|
||||||
|
* @return {string} the given sub-value followed by an icon of the
|
||||||
|
* first fact with the given type, or "" if the
|
||||||
|
* fact does not exist.
|
||||||
|
*/
|
||||||
|
var getSmallFact = function(type, val)
|
||||||
|
{
|
||||||
|
var fact = getRawFacts(type)[0];
|
||||||
|
if(fact === undefined)
|
||||||
|
return "";
|
||||||
|
|
||||||
|
return "" +
|
||||||
|
fact[val] +
|
||||||
|
"<img " +
|
||||||
|
"class=\"SkillTooltipIconSmall\" " +
|
||||||
|
"src=\"" + (fact.icon || "") + "\" " +
|
||||||
|
"/>";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a large fact with the given icon and text.
|
||||||
|
*
|
||||||
|
* @method getLargeFact
|
||||||
|
* @param {string} icon the URL to the icon. Undefined values
|
||||||
|
* allowed.
|
||||||
|
* @param {string} text the text to be displayed next to the icon.
|
||||||
|
* @return {string} a large fact with the given icon and text.
|
||||||
|
*/
|
||||||
|
var getLargeFact = function(icon, text)
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
"<div class=\"SkillTooltipInfoSection\">" +
|
||||||
|
"<img " +
|
||||||
|
"class=\"SkillTooltipIconLarge\" " +
|
||||||
|
"src=\"" + (icon || "") + "\" " +
|
||||||
|
"/>" +
|
||||||
|
"<div>" +
|
||||||
|
"<div>" +
|
||||||
|
text +
|
||||||
|
"</div>" +
|
||||||
|
"</div>" +
|
||||||
|
"</div>";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns all large facts for the given type in undetermined order.
|
||||||
|
*
|
||||||
|
* @method getLargeFacts
|
||||||
|
* @param {string} type the type of the large facts.
|
||||||
|
* @param {string} val the key of the sub-value of the fact.
|
||||||
|
* @param {string} suffix a bit of text to append to the value.
|
||||||
|
* @return {string} all large facts for the given type in undetermined
|
||||||
|
* order.
|
||||||
|
*/
|
||||||
|
var getLargeFacts = function(type, val, suffix)
|
||||||
|
{
|
||||||
|
var facts = getRawFacts(type);
|
||||||
|
if(facts.length === 0)
|
||||||
|
return "";
|
||||||
|
|
||||||
|
var ret = [],
|
||||||
|
i, length = facts.length;
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
ret.push(getLargeFact(
|
||||||
|
facts[i].icon,
|
||||||
|
facts[i].text + ": " + facts[i][val] + (suffix || "")
|
||||||
|
));
|
||||||
|
|
||||||
|
return ret.join("");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the buffs of the skill for the tooltip.
|
||||||
|
*
|
||||||
|
* @method getBuffs
|
||||||
|
* @return {string} the buffs of the skill for the tooltip.
|
||||||
|
*/
|
||||||
|
var getBuffs = function()
|
||||||
|
{
|
||||||
|
var buff, buffs = getRawFacts("Buff"),
|
||||||
|
ret = [];
|
||||||
|
|
||||||
|
var i, length = buffs.length;
|
||||||
|
for(i = 0; i < length; i++)
|
||||||
|
{
|
||||||
|
buff = buffs[i];
|
||||||
|
ret.push(getLargeFact(
|
||||||
|
buff.icon,
|
||||||
|
buff.status +
|
||||||
|
(
|
||||||
|
buff.duration !== undefined && buff.duration != "0" ?
|
||||||
|
"(" + buff.duration + "s)" :
|
||||||
|
""
|
||||||
|
) +
|
||||||
|
": " + (buff.description || "")
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
return ret.join("");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a large fact if the skill is unblockable, or "" othwerise.
|
||||||
|
*
|
||||||
|
* @method getUnblockable
|
||||||
|
* @return {string} a large fact if the skill is unblockable, or ""
|
||||||
|
* othwerise.
|
||||||
|
*/
|
||||||
|
var getUnblockable = function()
|
||||||
|
{
|
||||||
|
var fact = getRawFacts("Unblockable")[0];
|
||||||
|
if(fact === undefined)
|
||||||
|
return "";
|
||||||
|
|
||||||
|
return getLargeFact(fact.icon, "Unblockable");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* List of tooltip generators for subtypes.
|
||||||
|
*
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
var tooltipString =
|
||||||
|
{
|
||||||
|
Generic : function()
|
||||||
|
{
|
||||||
|
return "" +
|
||||||
|
getHeader() +
|
||||||
|
getDescription() + "<br />" +
|
||||||
|
//getLargeFacts("Damage", "hit_count") +
|
||||||
|
getBuffs() +
|
||||||
|
getLargeFacts("Number", "value") +
|
||||||
|
getLargeFacts("Time", "duration", " seconds") +
|
||||||
|
getLargeFacts("Distance", "distance") +
|
||||||
|
getLargeFacts("ComboFinisher", "finisher_type") +
|
||||||
|
getLargeFacts("Range", "value") +
|
||||||
|
getUnblockable();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the tooltip string appropriate for the item.
|
||||||
|
*
|
||||||
|
* @method getTooltip
|
||||||
|
* @return {string} the tooltip string appropriate for the item.
|
||||||
|
*/
|
||||||
|
this.getTooltip = function()
|
||||||
|
{
|
||||||
|
var tooltip = "<div class=\"GW2Tooltip\">" +
|
||||||
|
"<div class=\"GW2TooltipContents\">";
|
||||||
|
|
||||||
|
if(tooltipString.hasOwnProperty(_skill.type))
|
||||||
|
tooltip += tooltipString[_skill.type]();
|
||||||
|
else
|
||||||
|
tooltip += tooltipString.Generic();
|
||||||
|
|
||||||
|
tooltip += "</div></div>";
|
||||||
|
return tooltip;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
SkillTooltip.type = "skills";
|
||||||
|
SkillTooltip.attr = "skillid";
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="js/GW2Tooltip.js"></script>
|
||||||
|
<script src="js/ItemTooltip.js"></script>
|
||||||
|
<script src="js/SkillTooltip.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/ItemTooltip.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<br /><br /><br />
|
||||||
|
<a data-skillid="14364">Sever Artery</a><br />
|
||||||
|
<a data-skillid="14366">Savage Leap</a><br />
|
||||||
|
<a data-skillid="14497">Final Thrust</a><br />
|
||||||
|
<a data-skillid="14393">Charge</a><br />
|
||||||
|
<a data-skillid="14394">Call to Arms</a><br />
|
||||||
|
<a data-skillid="21815">Defiant Stance</a><br />
|
||||||
|
<a data-skillid="14372">"Shake It Off!"</a><br />
|
||||||
|
<a data-skillid="14412">Balanced Stance</a><br />
|
||||||
|
<a data-skillid="14392">Endure Pain</a><br />
|
||||||
|
<a data-skillid="14419">Battle Standard</a><br />
|
||||||
|
<script>
|
||||||
|
GW2Tooltip.addAllNow(SkillTooltip);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|