commit 960f6ecdad1bd07846fe3fbdcdb58bca75d22b49 Author: Felix W. Dekker Date: Sat Mar 14 13:25:55 2020 +0100 Import old code into git diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c334afe --- /dev/null +++ b/LICENSE @@ -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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..cd8b2f1 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# _Guild Wars 2_ tooltips +A library that provides tooltips for _Guild Wars 2_ items. diff --git a/css/GW2Tooltip.css b/css/GW2Tooltip.css new file mode 100644 index 0000000..a311c51 --- /dev/null +++ b/css/GW2Tooltip.css @@ -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; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..da163e6 --- /dev/null +++ b/css/main.css @@ -0,0 +1,8 @@ + +body { + padding-top : 50px; +} + +.contents { + padding : 40px 15px; +} \ No newline at end of file diff --git a/docs.html b/docs.html new file mode 100644 index 0000000..e34a39b --- /dev/null +++ b/docs.html @@ -0,0 +1,214 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GW2 Item tooltip + + + + + + +
+ +
+ +
    +
  1. Home
    2. +
  2. Documentation
    3. +
+ + + +
+

Guild Wars 2 Item tooltip

+
+ + +
+ +

Methods of adding tooltips

+

+ 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. +


+ + + +
+

ItemTooltip.addNow(e, itemId)

+ + + + + + + + + +
eAny DOM element
itemIdThe id of the item
+ +
+

+ By far the simplest method, addNow adds a tooltip by fetching the item information from the API. This happens as soon as the page loads. +


+ +

Example

+ 
+                                <a id="addNow">The tooltip for this item is loaded when the page is loaded.</a>
+                                <script>
+                                    ItemTooltip.addNow(document.getElementById("addNow"), 76193);
+                                </script>
+
+ +

Result

+ The tooltip for this item is loaded when the page is loaded. + +
+

+ + + +
+

ItemTooltip.addLater(e, itemId)

+ + + + + + + + + +
eAny DOM element
itemIdThe id of the item
+ +
+

+ This method works almost exactly the same as addNow, but the main difference is that addLater 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.
+ This method makes use of the onmouseover event. If another function is already assigned to this event, ItemTooltip will first call that function and then execute its own function.
+


+ +

Example

+ 
+                                <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>
+
+ +

Result

+ The tooltip for this item is only loaded when you hover over it. + +
+

+ + + +
+

ItemTooltip.addAllNow()

+
+

+ The addAllNow method looks for all the DOM elements with the data-itemid attribute and puts them together into a single API request to save bandwidth. This happens as soon as the page is loaded.
+


+ +

Example

+ 
+                                <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>
+
+ +

Result

+ The tooltip for this item is added automatically when the page is loaded.
+ addAllNow() adds all the tooltips at once. + +
+

+ + + +
+

ItemTooltip.addDirect(e, json)

+ + + + + + + + + +
eAny DOM element
jsonThe object representing the item. This object should be conform the Guild Wars 2 API specfication about items
+ +
+

+ addDirect 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.
+


+ +

Example

+ 
+                                <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>
+
+ +

Result

+ The tooltip for this item is also loaded when the page is loaded, but the data is static. +
+
+

+ +
+ + +
    +
  1. Home
    2. +
  2. Documentation
    3. +
+ +
+ +
+ + + diff --git a/fonts/Day Roman.eot b/fonts/Day Roman.eot new file mode 100644 index 0000000..55bcf3d Binary files /dev/null and b/fonts/Day Roman.eot differ diff --git a/fonts/Day Roman.svg b/fonts/Day Roman.svg new file mode 100644 index 0000000..d004910 --- /dev/null +++ b/fonts/Day Roman.svg @@ -0,0 +1,3700 @@ + + + + +Created by FontForge 20150824 at Wed Feb 3 05:56:55 2016 + By Everything Fonts +2002, Fredrick Nader. All rights reserved. apostrophe@apostrophiclab.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/Day Roman.ttf b/fonts/Day Roman.ttf new file mode 100644 index 0000000..e2e813a Binary files /dev/null and b/fonts/Day Roman.ttf differ diff --git a/fonts/Day Roman.woff b/fonts/Day Roman.woff new file mode 100644 index 0000000..31b1dde Binary files /dev/null and b/fonts/Day Roman.woff differ diff --git a/fonts/Day Roman.woff2 b/fonts/Day Roman.woff2 new file mode 100644 index 0000000..41b9b9e Binary files /dev/null and b/fonts/Day Roman.woff2 differ diff --git a/fonts/Legacy Sans LT Medium Regular.eot b/fonts/Legacy Sans LT Medium Regular.eot new file mode 100644 index 0000000..4c90006 Binary files /dev/null and b/fonts/Legacy Sans LT Medium Regular.eot differ diff --git a/fonts/Legacy Sans LT Medium Regular.svg b/fonts/Legacy Sans LT Medium Regular.svg new file mode 100644 index 0000000..aa6116d --- /dev/null +++ b/fonts/Legacy Sans LT Medium Regular.svg @@ -0,0 +1,1010 @@ + + + + +Created by FontForge 20150824 at Wed Feb 3 05:56:58 2016 + By Everything Fonts +Copyright (c) 1993 Adobe Systems Incorporated. All Rights Reserved.ITC Legacy Sans is a trademark of International Typeface Corporation. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/Legacy Sans LT Medium Regular.ttf b/fonts/Legacy Sans LT Medium Regular.ttf new file mode 100644 index 0000000..b949a66 Binary files /dev/null and b/fonts/Legacy Sans LT Medium Regular.ttf differ diff --git a/fonts/Legacy Sans LT Medium Regular.woff b/fonts/Legacy Sans LT Medium Regular.woff new file mode 100644 index 0000000..89eacfd Binary files /dev/null and b/fonts/Legacy Sans LT Medium Regular.woff differ diff --git a/fonts/Legacy Sans LT Medium Regular.woff2 b/fonts/Legacy Sans LT Medium Regular.woff2 new file mode 100644 index 0000000..c2ab6bf Binary files /dev/null and b/fonts/Legacy Sans LT Medium Regular.woff2 differ diff --git a/img/tooltipBackground.png b/img/tooltipBackground.png new file mode 100644 index 0000000..ce3b9c0 Binary files /dev/null and b/img/tooltipBackground.png differ diff --git a/img/tooltipBackground.xcf b/img/tooltipBackground.xcf new file mode 100644 index 0000000..6695707 Binary files /dev/null and b/img/tooltipBackground.xcf differ diff --git a/img/tooltipBackgroundGreen.png b/img/tooltipBackgroundGreen.png new file mode 100644 index 0000000..3ecd57f Binary files /dev/null and b/img/tooltipBackgroundGreen.png differ diff --git a/img/tooltipBackgroundGreen.xcf b/img/tooltipBackgroundGreen.xcf new file mode 100644 index 0000000..eea634b Binary files /dev/null and b/img/tooltipBackgroundGreen.xcf differ diff --git a/img/tooltipBackgroundNew.png b/img/tooltipBackgroundNew.png new file mode 100644 index 0000000..190b842 Binary files /dev/null and b/img/tooltipBackgroundNew.png differ diff --git a/img/tooltipBackgroundNew.xcf b/img/tooltipBackgroundNew.xcf new file mode 100644 index 0000000..d251948 Binary files /dev/null and b/img/tooltipBackgroundNew.xcf differ diff --git a/img/tooltipBackgroundNewTrans.png b/img/tooltipBackgroundNewTrans.png new file mode 100644 index 0000000..85c2179 Binary files /dev/null and b/img/tooltipBackgroundNewTrans.png differ diff --git a/img/tooltipBackgroundNewTrans.xcf b/img/tooltipBackgroundNewTrans.xcf new file mode 100644 index 0000000..c45c03b Binary files /dev/null and b/img/tooltipBackgroundNewTrans.xcf differ diff --git a/img/tooltipBackgroundNewer.png b/img/tooltipBackgroundNewer.png new file mode 100644 index 0000000..efde452 Binary files /dev/null and b/img/tooltipBackgroundNewer.png differ diff --git a/img/tooltipBackgroundNewer.xcf b/img/tooltipBackgroundNewer.xcf new file mode 100644 index 0000000..1eefaf6 Binary files /dev/null and b/img/tooltipBackgroundNewer.xcf differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..568033e --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GW2 Item tooltip + + + +
+
+ +
    +
  1. Home
    2. +
+ + +
+

Guild Wars 2 Item tooltip

+
+ + Download
+ +
+

About

+

+ Guild Wars 2 item tooltip is a JavaScript utility to add tooltips for Guild Wars 2 items to display information about them. No frameworks required and simple to use. +

+

+ +
+

How it works

+

+ Tooltips can be added in two ways:
+

    +
  • by supplying the information to be displayed directly (using ItemTooltip.addDirect); or
    • +
  • by giving the ID of the item (using ItemTooltip.addNow).
    • +
+ + With the latter option the Guild Wars 2 API is accessed and up-to-date information is retrieved and used to create the tooltip. Note that this option does not work in Internet Explorer versions 9 and below; it does, however, work on every other major browser.
+ + For more information you can refer to the documentation. +

+

+ +
+

Demo

+

Code

+ 
+                        <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>
+
+ +

Result

+ This is an item tooltip. (it may take a second to appear if you just loaded this page) + +

+ +
+

Q&A

+

Q: Does it work with traits/skills/waypoints too?

+

A: At the moment it works for items only, but I'm planning on adding this functionality later on.

+ +

Q: Why don't crafting materials display the required crafting disciplines and their levels?

+

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.

+ +

Q: Does it work with JQuery, Underscore, Backbone, Angular etc.?

+

A: Yes. It does not require any framework and it should not collide with any framework either.

+

+ + +
    +
  1. Home
    2. +
+ +
+
+ + diff --git a/js/.jshintrc b/js/.jshintrc new file mode 100644 index 0000000..ad04eca --- /dev/null +++ b/js/.jshintrc @@ -0,0 +1,8 @@ +{ + "predef" : [ + "ActiveXObject", + "JSON4", + "JSON3", + "JSON2" + ] +} diff --git a/js/GW2Tooltip.js b/js/GW2Tooltip.js new file mode 100644 index 0000000..b85989e --- /dev/null +++ b/js/GW2Tooltip.js @@ -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 + * 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 = "" + + " " + + 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; +})(); diff --git a/js/ItemTooltip.js b/js/ItemTooltip.js new file mode 100644 index 0000000..3029815 --- /dev/null +++ b/js/ItemTooltip.js @@ -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 "" + + " " + + "" + + _item.name + + "
"; + }; + + /** + * Returns the attributes of the item for the tooltip. + * + * @method getAttributes + * @param {boolean} newline true if an extra
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] + + "
"; + + return (part !== "" && newline ? part + "
" : 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 += "" + + buffs.replace(/(?:\r\n|\r|\n)/g, "
") + + "
"; + + 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
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 += "" + + " " + + "Unused " + infusionSlotType + " Infusion Slot
"; + } + + return (part !== "" && newline ? part + "
" : 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(//, function(match) + { + match = match.substring(4, match.length - 1); + match = match.charAt(0).toUpperCase() + match.slice(1); + return ""; + }); + desc = desc.replace(/<\/c>/, ""); + return (desc !== "" ? desc + "
" : 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.
" + + "Excessive alcohol consumption will result in" + + "intoxication.
"; + case "Food": + case "Utility": + return "Double-click to consume.
" + + "
" + + "Nourishment(" + _item.details.duration_ms / 60000 + + "m): " + + desc.replace(/(?:\r\n|\r|\n)/g, + "
") + "
"; + case "Generic": + return "Double-click to consume.
" + + desc.replace(/(?:\r\n|\r|\n)/g, + "
") + "
"; + default: + return "Double-click to consume.
" + + 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 + "
" : + "" + ); + }; + + /** + * 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
"; + + // Account bound + if(Polyfill.indexOf(flags, "AccountBound") >= 0) + if(Polyfill.indexOf(flags, "AccountBindOnUse") >= 0) + part += "Account Bound on Acquire or Use
"; + else + part += "Account Bound on Acquire
"; + else if(Polyfill.indexOf(flags, "AccountBindOnUse") >= 0) + part += "Account Bound on Use
"; + + // Soul bound + if(Polyfill.indexOf(flags, "SoulbindOnAcquire") >= 0) + if(Polyfill.indexOf(flags, "SoulbindOnUse") >= 0) + part += "Soulbound on Acquire or Use
"; + else + part += "Soulbound on Acquire
"; + else if(Polyfill.indexOf(flags, "SoulbindOnUse") >= 0) + part += "Soulbound on Use
"; + + /* 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
"; + else + part += "Can\'t be salvaged
"; + else + part += "Can\'t be sold
";*/ + + 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 + "
" + ); + }; + + /** + * 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 += "" + + "" + + multiplier + + " " + + " "; + } + if(value >= 100 || part.length > 0) + { + multiplier = Math.floor(value / 100); + value -= multiplier * 100; + part += "" + + "" + + multiplier + + " " + + " "; + } + if(value >= 1 || part.length > 0) + { + part += "" + + "" + + value + + " " + + ""; + } + + 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 + "
" + + getAttributes(true) + + + getInfusionSlots(true) + + + getRarity() + + _item.details.weight_class + "
" + + getArmorType() + " Armor
" + + 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() + + "
" + + + getRarity() + + "Back Item
" + + getDescription() + + getLevel() + + getFlags() + + getValue(); + }, + + /** + * Returns the tooltip string for a bag. + * + * @method + * @return {string} the tooltip string for a bag. + */ + Bag : function() + { + return "" + + getHeader() + + "
" + + + getDescription() + + getLevel() + + getValue(); + }, + + /** + * Returns the tooltip string for a consumable. + * + * @method + * @return {string} the tooltip string for a consumable. + */ + Consumable : function() + { + return "" + + getHeader() + + getConsumableDescription() + + "
" + + + "Consumable
" + + getLevel() + + getFlags() + + getValue(); + }, + + /** + * Returns the tooltip string for a container. + * + * @method + * @return {string} the tooltip string for a container. + */ + Container : function() + { + return "" + + getHeader() + + getDescription() + + "
" + + + "Consumable
" + + 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 ? "
" : "") + + + 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() + + "
" + + + "Miniature
" + + getFlags(); + }, + + /** + * Returns the tooltip string for a salvage kit. + * + * @method + * @return {string} the tooltip string for a salvage kit. + */ + Tool : function() + { + return "" + + getHeader() + "
" + + getRarity() + + "Consumable
" + + 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 + "
" + + 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() + + "
" + + "Trophy
" + + getFlags() + + getValue(); + }, + + /** + * Returns the tooltip string for an upgrade component. + * + * @method + * @return {string} the tooltip string for an upgrade component. + */ + UpgradeComponent : function() + { + return "" + + getHeader() + + "
" + + getBuffs() + + getDescription() + + getLevel() + + (_item.details.type === "Gem" ? "
" : "") + + 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) + "
" + + getAttributes(true) + + + getInfusionSlots(true) + + + getRarity() + + _item.details.type + "
" + + "(" + getWeaponType() + ")
" + + 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() + + "
" + + 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 = "
" + + "
"; + + if(tooltipString.hasOwnProperty(_item.type)) + tooltip += tooltipString[_item.type](); + else + tooltip += tooltipString.Generic(); + + tooltip += "
"; + return tooltip; + }; +} + +ItemTooltip.type = "items"; +ItemTooltip.attr = "itemid"; diff --git a/js/SkillTooltip.js b/js/SkillTooltip.js new file mode 100644 index 0000000..f638a92 --- /dev/null +++ b/js/SkillTooltip.js @@ -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 "" + + "" + + _skill.name + + "" + + "
" + + // Casting time is not exposed in API + //getSmallFact("CastingTime", "value") + + getSmallFact("Recharge", "value") + + "

"; + }; + + /** + * 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 "" + val + ""; + }) + "
"; + }; + + /** + * 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] + + ""; + }; + + /** + * 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 "" + + "
" + + "" + + "
" + + "
" + + text + + "
" + + "
" + + "
"; + }; + + /** + * 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() + "
" + + //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 = "
" + + "
"; + + if(tooltipString.hasOwnProperty(_skill.type)) + tooltip += tooltipString[_skill.type](); + else + tooltip += tooltipString.Generic(); + + tooltip += "
"; + return tooltip; + }; +} + +SkillTooltip.type = "skills"; +SkillTooltip.attr = "skillid"; diff --git a/test.html b/test.html new file mode 100644 index 0000000..ba612ad --- /dev/null +++ b/test.html @@ -0,0 +1,25 @@ + + + + + + + + + +


+ Sever Artery
+ Savage Leap
+ Final Thrust
+ Charge
+ Call to Arms
+ Defiant Stance
+ "Shake It Off!"
+ Balanced Stance
+ Endure Pain
+ Battle Standard
+ + +