Merge pull request #10 from hatmarch/master

Fix QueryStrings getting lost when clicking on links with anchors (#)
redhat-scholars · Jun 9, 2021 · 6ee3239 · 6ee3239
2 parents db18c1d + 955c555
commit 6ee3239
Showing 1 changed file with 42 additions and 59 deletions.
diff --git a/src/js/07-userparams-behaviour.js b/src/js/07-userparams-behaviour.js
@@ -1,29 +1,39 @@
 document.addEventListener('DOMContentLoaded', function () {
 
-  function hasQueryString (url) {
-    // regex pattern for detecting querystring
-    var pattern = new RegExp(/\?.+=.*/g)
-    return pattern.test(url)
+  //Handle links
+  var allQueryPramLinks = document.querySelectorAll('.query-params-link')
+  if (allQueryPramLinks) {
+    allQueryPramLinks.forEach(appendQueryStringToHref)
+  }
+
+  var pramLinks = document.querySelectorAll('.params-link')
+  if (pramLinks) {
+    pramLinks.forEach(appendQueryStringToHref)
+  }
+
+  var allNavLinks = document.querySelectorAll('.nav-link')
+  if (allNavLinks) {
+    allNavLinks.forEach(appendQueryStringToHref)
   }
 
-  /*
-   * Thanks to https://gomakethings.com/getting-all-query-string-values-from-a-url-with-vanilla-js/
-  */
-  function getParams (url) {
-    if (!url) url = window.location.href
-    var params = {}
-    var parser = document.createElement('a')
-    parser.href = url
-    var query = parser.search.substring(1)
-    var vars = query.split('&')
-    for (var i = 0; i < vars.length; i++) {
-      var pair = vars[i].split('=')
-      params[pair[0]] = decodeURIComponent(pair[1])
+  function appendQueryStringToHref(el) {
+    var desiredQueryString = new URLSearchParams(window.location.search)
+    var appendQueryString = el.classList.contains('query-params-link') ||
+      el.classList.contains('nav-link')
+
+    if (desiredQueryString.toString() && appendQueryString) {
+      var hrefURL = new URL(el.href);
+      for (var k of desiredQueryString.keys()) {
+        hrefURL.searchParams.append(k, desiredQueryString.get(k));
+      }
+
+      el.href = hrefURL.toString();
     }
-    return params
   }
 
-  function replaceParamsInNodes (node, key, value) {
+  // refreshing links
+
+  function replaceParamsInNodes(node, key, value) {
     if (node.parentElement) {
       //console.log('Parent element %s', node.parentElement.nodeName)
       if (node.parentElement.nodeName === 'code' ||
@@ -39,54 +49,27 @@ document.addEventListener('DOMContentLoaded', function () {
       for (var i = 0; i < node.childNodes.length; i++) {
         replaceParamsInNodes(node.childNodes[i], key, value)
       }
-    }
-  }
-
-  var allParams = getParams()
-  var keys = Object.keys(allParams)
-  for (var i = 0; i < keys.length; i++) {
-    replaceParamsInNodes(document.body, keys[i], allParams[keys[i]])
-  }
 
-  //Handle links
-  var allQueryPramLinks = document.querySelectorAll('.query-params-link')
-  if (allQueryPramLinks) {
-    allQueryPramLinks.forEach(appendQueryStringToHref)
-  }
-
-  var pramLinks = document.querySelectorAll('.params-link')
-  if (pramLinks) {
-    pramLinks.forEach(appendQueryStringToHref)
-  }
-
-  var allNavLinks = document.querySelectorAll('.nav-link')
-  if (allNavLinks) {
-    allNavLinks.forEach(appendQueryStringToHref)
-  }
-
-  function appendQueryStringToHref (el) {
-    var queryString = window.location.search
-    var appendQueryString = el.classList.contains('query-params-link') ||
-      el.classList.contains('nav-link')
-    if (!hasQueryString(el.href) && queryString) {
-      var href = el.href
-      for (var i = 0; i < keys.length; i++) {
-        href = applyPattern(href, keys[i], allParams[keys[i]])
+      // handle link elements
+      if (node.href) {
+        node.href = applyPattern(node.href, key, value);
       }
-      if (appendQueryString) {
-        el.href = href + queryString
-      } else {
-        el.href = href
-      }
-
     }
   }
 
-  function applyPattern (str, key, value) {
+  // If there are query parameters (searchparams) in the current window location then 
+  // Iterate over all them replacing text and link-hrefs that contain them
+  var params = new URLSearchParams(window.location.search);
+  for (var k of params.keys()) {
+    replaceParamsInNodes(document.body, k, params.get(k));
+  }
+
+  function applyPattern(str, key, value) {
     //(%25key%25|%key%) %25 is urlencode value of %
     var pattern = '(' + '%25' + key + '%25' +
       '|(?<!-)' + '%' + key + '%' + '(?!-))'
     var re = new RegExp(pattern, 'gi')
     return str.replace(re, value)
   }
-})
+
+});