Add ability to generate deeplinks URL for chart

src/index.html

@@ -41,6 +41,15 @@
                             <option value="all">All Available</option>
                         </select>
                     </p>
+                    <div class="tooltip">
+                        <button id="copyURLButton">
+                            <span class="tooltiptext" id="urlTooltip">Copy to clipboard</span>
+                            Copy URL to this Chart
+                        </button>
+                    </div>
+                </div>
+                <details id="advanced">
+                    <summary>Advanced Options</summary>
                     <p>
                         <label for="aggregate">Aggregate Function:</label>
                         <select name="aggregate" id="aggregate">
@@ -53,7 +62,8 @@
                             <option id='agg_wavg' value="weekly_mean" disabled>Weekly Average</option>
                         </select>
                     </p>
-                </div>
+                    <em>More coming soon™</em>
+                </details>
                 <details id="about">
                     <summary>About this Site</summary>
                     This is a site developed to track the value of the World of Warcraft Token from various

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)

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;