Revert 292 ritm1344510

_config.yml

@@ -195,6 +195,7 @@ searchgov:
 
   # This renders the results within the page instead of sending to user to search.gov.
   inline: true
+  #inline: false
 
   # This allows Search.gov to present relevant type-ahead search suggestions in your website's search box.
   # If you do not want to present search suggestions, set this value to false.

_includes/meta.html

@@ -59,4 +59,4 @@
     <!-- CSS
       ================================================== -->
     <link type="text/css" href="{{site.baseurl}}/assets/css/styles.css" rel="stylesheet" />
-</head>
+</head>

_includes/scripts.html

@@ -21,6 +21,7 @@
 </script>
 {% endif %}
 
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
 <script src="{{ site.baseurl }}/assets/js/app.js"></script>
 <script src="{{ site.baseurl }}/assets/js/carousel.js"></script>
 <script src="{{site.baseurl}}/assets/js/uswds.min.js"></script>

assets/css/style.css

@@ -29,7 +29,35 @@ C:/Program Files/Adobe/Adobe Dreamweaver 2021/ruby/lib/ruby/gems/2.7.0/gems/sass
 C:/Program Files/Adobe/Adobe Dreamweaver 2021/ruby/bin/sass:23:in `load'
 C:/Program Files/Adobe/Adobe Dreamweaver 2021/ruby/bin/sass:23:in `<main>'
 */
+
 body:before {
   white-space: pre;
   font-family: monospace;
   content: "Error: Invalid CSS after \"    }\": expected selector or at-rule, was \"}\"\A         on line 4446 of M:\icsp\fcsm\assets\css\style.scss\A \A 4441:         height: 100%;\A 4442:         z-index: -1;\A 4443:         \A 4444:         };\A 4445:     }\A 4446: }\A 4447: .page-title-content {\A 4448:     text-align: center;\A 4449: \A 4450:     h2 {\A 4451:         color: $white-color;"; }
+
+  .pager-button {
+    display: inline-block;
+    padding: 8px 12px;
+    margin: 6px;
+    border: 2px solid #0004ff; /* blue border color */
+    border-radius: 4px; /* rounded rectangle */
+    background-color: transparent; /* no background color */
+    color: #0004ff; /* blue text color */
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.pager-button-current {
+    display: inline-block;
+    padding: 8px 12px;
+    margin: 6px;
+    border: 2px solid #350111; /* blue border color */
+    border-radius: 4px; /* rounded rectangle */
+    background-color: transparent; /* no background color */
+    color: #000000; /* blue text color */
+    text-decoration: none;
+    cursor: initial;
+}
+.pager-button:hover {
+    background-color: #e2e6ea; /* light gray background color on hover */
+}

assets/css/styles-2.css

@@ -0,0 +1,29 @@
+
+    .pager-button {
+        display: inline-block;
+        padding: 8px 12px;
+        margin: 6px;
+        border: 2px solid #0004ff; /* blue border color */
+        border-radius: 4px; /* rounded rectangle */
+        background-color: transparent; /* no background color */
+        color: #0004ff; /* blue text color */
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .pager-button-current {
+        display: inline-block;
+        padding: 8px 12px;
+        margin: 6px;
+        border: 2px solid #350111; /* blue border color */
+        border-radius: 4px; /* rounded rectangle */
+        background-color: transparent; /* no background color */
+        color: #000000; /* blue text color */
+        text-decoration: none;
+        cursor: initial;
+    }
+    .pager-button:hover {
+        background-color: #e2e6ea; /* light gray background color on hover */
+    }
+
+

assets/js/search.js

@@ -0,0 +1,152 @@
+var urlParams = new URLSearchParams(window.location.search);
+var page = urlParams.get("page") ?? 1;
+var resultsPerPage = 20;
+var offset = (page - 1) * resultsPerPage;
+var totalResults = 0;
+
+// var searchEndpoint = new URL("{{site.searchgov.endpoint}}/api/v2/search/i14y");
+// params = { affiliate: "{{site.searchgov.affiliate}}", 
+//             access_key: "{{site.searchgov.access_key}}", 
+//             query: urlParams.get('query') ,
+//             offset: offset
+//           }
+
+var searchgovParams = document.getElementById("searchgov-params");
+console.log("searchgovParams is : " + searchgovParams);
+var currentURL = new URL(window.location.href);
+var searchEndpoint = new URL(
+    searchgovParams.dataset.endpoint + "/api/v2/search/i14y"
+);
+
+params = {
+    affiliate: searchgovParams.dataset.affiliate,
+    access_key: searchgovParams.dataset.accessKey,
+    query: urlParams.get("query"),
+    offset: offset
+};
+searchResults.setAttribute("start", offset + 1);
+
+var inputElement = document.getElementById("extended-search-field-small");
+    inputElement.value = urlParams.get("query");
+    inputElement.focus();
+
+
+
+Object.keys(params).forEach(key => searchEndpoint.searchParams.append(key, params[key]));
+
+
+fetch(searchEndpoint).then(function(res) {
+    return res.json()
+  }).then(function(posts) {
+    totalResults = posts.web.total;
+    //console.log("Total results are : " + totalResults);
+
+    document.getElementById('search-params').innerHTML = encodeHTML(urlParams.get('query'));
+    document.getElementById("search-keyword").innerHTML = urlParams.get("query");
+    document.getElementById("results-count").innerHTML = totalResults;
+
+    if (posts.web.results.length > 0) {
+      var searchResults = document.getElementById("search-results");
+      if (searchResults != null){
+        //console.log("searchResults are not null and offset is : " + offset);
+
+        searchResults.setAttribute("start", offset + 1);
+      }else{
+        console.log("searchResults are null.");
+      }
+      document.getElementById('search-results').classList.remove('display-none');
+      document.getElementById('no-results').classList.add('display-none');
+      for (item in posts.web.results){
+        render_result(`
+          <li class="padding-bottom-5 margin-top-4 usa-prose border-bottom-05 border-base-lightest">
+            <b class="title">
+              <a href="${posts.web.results[item]['url']}">
+                ${posts.web.results[item]['title']
+                .replace(/\uE000/g, '<span class="bg-yellow">')
+                .replace(/\uE001/g, '</span>')}</a>
+            </b>
+            <div> ${posts.web.results[item]['snippet'].replace(/\uE000/g, '<span class="bg-yellow">').replace(/\uE001/g, '</span>')} </div>
+          </li>
+          `, true)
+
+      }
+    }
+  }).catch(function(ex) {
+    console.log('parsing failed', ex);
+  }).finally(function(e){
+
+    if(document.getElementById('search-results').childNodes.length == 0){
+      document.getElementById('search-results').classList.add('display-none');
+      document.getElementById('no-results').classList.remove('display-none');
+      document.getElementById("results-header").classList.add("display-none");
+      document.getElementById("pager").classList.add("display-none");
+    }
+    document.getElementById("results-header").classList.remove("display-none");
+    update_pager();
+
+  })
+
+
+  function render_result(content, append = true){
+    const previous = document.getElementById('search-results').innerHTML;
+    document.getElementById('search-results').innerHTML = (append == true) ? previous + content : content;
+  }
+
+  function update_pager() {
+    var page = urlParams.get("page") ?? 1;
+      var pager = document.getElementById("pager");
+      var pagerLinks = "";
+      var totalPages = Math.ceil(totalResults / resultsPerPage);
+
+      pager.innerHTML = "";
+
+      if (page > 1){
+          pagerLinks += '<a href="' + getLinkToPage(1) + '" aria-label="First page" class="pager-button">First</a>';
+      }
+
+      if (totalPages > 5 && page > 5) {
+          pagerLinks += '<span style="font-weight: bold;" class="margin-2">...</span>';
+      }
+
+      var start = Math.max(2, page - 3);
+      for (var i = start; i < page; i++) {
+          pagerLinks += '<a href="' + getLinkToPage(i) + '" aria-label="Page ' + i + '" class="pager-button">' + i + '</a>';
+      }
+
+      pagerLinks += '<span class="margin-2, pager-button-current">Page ' + page + " of " + totalPages + "</span>";
+
+      var end = Math.min((totalPages - 1), ((1*page) + 3));
+      for (var j = (1*page) + 1; j <= end; j++) {
+          pagerLinks += '<a href="' + getLinkToPage(j) + '" aria-label="Page ' + j + '" class="pager-button">' + j + '</a>';
+      }
+
+      if (totalPages > 5 && page < totalPages - 4) {
+          pagerLinks += '<span style="font-weight: bold;" class="margin-2">...</span>';
+      }
+
+      if( totalPages > 1 && page < totalPages){
+          pagerLinks += '<a href="' + getLinkToPage(totalPages) + '" aria-label="Last page" class="pager-button">Last</a>';
+      }		
+
+      pagerLinks += '<div class="usa-footer__contact-info grid-row grid-gap"><div class="grid-col-auto"><p class="margin-top-0">Powered by <strong>Search.gov</strong></p></div></div>';
+
+      pager.innerHTML = pagerLinks;
+  }
+
+  function getLinkToPage(pageNumber) {
+      var searchParams = currentURL.searchParams;
+      if (searchParams.has("page")) {
+          searchParams.set("page", pageNumber);
+      } else {
+          searchParams.append("page", pageNumber);
+      }
+      return currentURL.toString();
+  }
+
+  function encodeHTML(str) {
+    return str.replace(/&/g, '&amp;')
+              .replace(/</g, '&lt;')
+              .replace(/>/g, '&gt;')
+              .replace(/"/g, '&quot;')
+              .replace(/'/g, '&#39;');
+  }