diff --git a/src/index.html b/src/index.html
index a383cd7..d8b1eb0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -41,6 +41,15 @@
+
+
+
+
+
+ Advanced Options
-
+ More coming soon™
+
About this Site
This is a site developed to track the value of the World of Warcraft Token from various
diff --git a/src/index.js b/src/index.js
index 216d0e9..96dc8ce 100644
--- a/src/index.js
+++ b/src/index.js
@@ -203,6 +203,7 @@ function formatToken() {
function detectRegionQuery(urlSearchParams) {
const validRegions = ['us', 'eu', 'tw', 'kr'];
if (validRegions.includes(urlSearchParams.get('region').toLowerCase())) {
+ currentRegionSelection = urlSearchParams.get('region').toLowerCase();
let regionDDL = document.getElementById('region');
for (let i = 0; i < regionDDL.options.length; i++) {
if (regionDDL.options[i].value === currentRegionSelection) {
@@ -261,6 +262,37 @@ function detectURLQuery() {
}
}
+function buildDeepLinksURL() {
+ let url = "https://wowtoken.app/?"
+ if (currentTimeSelection !== '72h'){
+ url += `time=${currentTimeSelection}&`
+ }
+ if (currentRegionSelection !== 'us'){
+ url += `region=${currentRegionSelection}&`
+ }
+ if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
+ url += `aggregate=${currentAggregateSelection}`
+ }
+ return url
+}
+
+function copyURL() {
+ let toolTip = document.getElementById('urlTooltip');
+ navigator.clipboard.writeText(buildDeepLinksURL()).then(
+ () => {
+ toolTip.innerHTML= "Copied the URL";
+ },
+ () => {
+ toolTip.innerHTML = "Unable to copy URL to clipboard";
+ }
+ );
+}
+
+function toolTipMouseOut() {
+ let tooltip = document.getElementById("urlTooltip");
+ tooltip.innerHTML = "Copy to clipboard";
+}
+
$(document).ready(function() {
document.getElementById('region').addEventListener('change', function() {
updateRegionPreference(this.value);
@@ -273,6 +305,12 @@ $(document).ready(function() {
document.getElementById('aggregate').addEventListener('change', function () {
updateAggregatePreference(this.value);
})
+ document.getElementById('copyURLButton').addEventListener('click', function (event) {
+ copyURL();
+ })
+ document.getElementById('copyURLButton').addEventListener('mouseout', function (event) {
+ toolTipMouseOut();
+ })
currentAggregateSelection = document.getElementById('aggregate').value;
detectURLQuery();
Promise.all([callUpdateURL(), pullChartData()]).then(populateChart)
diff --git a/src/style.css b/src/style.css
index ee989f6..6aa87da 100644
--- a/src/style.css
+++ b/src/style.css
@@ -395,6 +395,44 @@ details[open] summary {
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
+
+.tooltip {
+ position: relative;
+ display: inline-block;
+}
+
+.tooltip .tooltiptext {
+ visibility: hidden;
+ width: 280px;
+ background-color: #555;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 5px;
+ position: absolute;
+ z-index: 1;
+ bottom: 80%;
+ left: -15%;
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+ visibility: visible;
+ opacity: 1;
+}
+
@keyframes lds-ripple {
0% {
top: 36px;