Preserve QueryString for more navigation

Breadcrumb links now have query string preserved

Update preview site to test parameters nested into links

Slight optimizations in queryString preservation
   - don't attempt preservation or replacement if there is no string
   - consolidate all selectorQueries into one

preview-src/index.adoc

@@ -26,6 +26,7 @@ You need to https://console.openshift.com[login,role=userfied-link]
 
 I like %COLOR% color
 
+[#link-testing]
 == Link Testing
 
 Here is a link:index.html?USER=%USER%#liber-recusabo[link^] containing a query string item that should open to "Liber recusabo" in a new window

preview-src/ui-model.yml

@@ -105,6 +105,9 @@ page:
       - content: Brand’s Hardware & Software Requirements
         url: /xyz/5.2/index.html
         urlType: internal
+      - content: Link Testing
+        url: '/xyz/5.2/index.html#link-testing'
+        urlType: internal
       - content: Cu Solet
         url: '/xyz/5.2/index.html#cu-solet'
         urlType: internal

src/js/07-userparams-behaviour.js

@@ -1,27 +1,33 @@
 document.addEventListener('DOMContentLoaded', function () {
 
-  //Handle links
-  var allQueryPramLinks = document.querySelectorAll('.query-params-link')
-  if (allQueryPramLinks) {
-    allQueryPramLinks.forEach(appendQueryStringToHref)
+  // If there is a query string, we need to fix up the page to make sure the query string is properly preserved
+  var desiredQueryString = new URLSearchParams(window.location.search)
+  if (desiredQueryString.toString()) {
+    preserveQueryString(desiredQueryString)
+    // If there are query parameters (searchparams) in the current window location
+    // then iterate over all them replacing text and link-hrefs that contain them
+    for (var k of desiredQueryString.keys()) {
+      replaceParamsInNodes(document.body, k, desiredQueryString.get(k))
+    }
   }
 
-  var pramLinks = document.querySelectorAll('.params-link')
-  if (pramLinks) {
-    pramLinks.forEach(appendQueryStringToHref)
-  }
+  function preserveQueryString (desiredQueryString) {
+    //Handle links
+    var allQueryParamLinks = document.querySelectorAll('.query-params-link, .home-link, .params-link, .nav-link')
+    if (allQueryParamLinks) {
+      allQueryParamLinks.forEach(appendQueryStringToHref)
+    }
 
-  var allNavLinks = document.querySelectorAll('.nav-link')
-  if (allNavLinks) {
-    allNavLinks.forEach(appendQueryStringToHref)
+    // Handle breadcrumb navigation links
+    var paramLinks = document.querySelectorAll('.breadcrumbs ul li a')
+    if (paramLinks) {
+      paramLinks.forEach(appendQueryStringToHref)
+    }
   }
 
   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) {
+    // NOTE: desiredQueryString captured from above
+    if (desiredQueryString.toString()) {
       var hrefURL = new URL(el.href)
       for (var k of desiredQueryString.keys()) {
         hrefURL.searchParams.set(k, desiredQueryString.get(k))
@@ -57,13 +63,6 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
-  // 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' +