Import old code into git
This commit is contained in:
commit
960f6ecdad
GPG Key ID:
78B3EAF58145AF25
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2016 F.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="F.W. 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>
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 288 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
|
@ -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="F.W. 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>
|
||||
Reference in New Issue