CDPT-2079 Focus first new result after (infinite) pagination.

public/app/themes/clarity/src/globals/js/ajax-templating.js

@@ -5,11 +5,24 @@
  * @see https://stackoverflow.com/a/39065147/6671505
  *
  * @example
+ * Template:
+ * <script type="text/template" data-template="results-template">
+ *  <div class="result">
+ *    <h2>${title}</h2>
+ *    <p>${content}</p>
+ *    ${?imgSrc}
+ *      <img src="${imgSrc}" alt="${title}" />
+ *    ${/?imgSrc}
+ * </div>
+ *
+ * Implementation:
  * const template = new AjaxTemplating("results-template");
  * const html = template.renderHtml({
  *  title: "Hello World",
- *  content: "This is a test."
+ *  content: "This is a test.",
+ *  imgSrc: "https://example.com/image.jpg",
  * });
+ *
  */
 
 export default class AjaxTemplating {
@@ -19,23 +32,16 @@ export default class AjaxTemplating {
    * @param {string} templateName
    */
   constructor(templateName) {
-    this.resultsTemplate = this.loadTemplate(templateName);
-  }
-
-  /**
-   * Load the template from the DOM.
-   *
-   * Returns an array of strings where:
-   * - every odd index is a template variable
-   * - every even is a string of html text
-   *
-   * @param {string} templateName
-   * @returns {string[]}
-   */
-
-  loadTemplate(templateName) {
-    // do this without jQuery
-    return document
+    /**
+     * The template from the DOM.
+     *
+     * An array of strings where:
+     * - every odd index is a template variable
+     * - every even is a string of html text
+     *
+     * @type {string[]}
+     */
+    this.resultsTemplate = document
       .querySelector(`script[data-template="${templateName}"]`)
       .textContent.split(/\$\{(.+?)\}/g);
   }
@@ -50,39 +56,28 @@ export default class AjaxTemplating {
   renderHtml(props) {
     // Keep track of the conditional blocks
     // If a conditional block is not met, we skip the block
-    let skip = false;
-
-    let parts = [];
-
-    for (let i = 0; i < this.resultsTemplate.length; i++) {
-      const tok = this.resultsTemplate[i];
-
-      // Handle the html text - even indexes
-
-      if (i % 2 === 0 && !skip) {
-        parts.push(tok);
-        continue;
-      }
+    let skip = 0;
 
-      if (i % 2 === 0) {
-        continue;
-      }
+    return this.resultsTemplate
+      .map((tok, i) => {
+        // Handle the html text - even indexes
 
-      // Handle the template variables - odd indexes
+        if (i % 2 === 0) {
+          return skip ? "" : tok;
+        }
 
-      if (tok.startsWith("?") && !props[tok.substring(1)]) {
-        skip = true;
-      }
+        // Handle the template variables - odd indexes
 
-      if (tok.startsWith("/?") && !props[tok.substring(2)]) {
-        skip = false;
-      }
+        if (tok.startsWith("?") && !props[tok.substring(1)]) {
+          skip++;
+        }
 
-      if (!skip) {
-        parts.push(props[tok]);
-      }
-    }
+        if (tok.startsWith("/?") && !props[tok.substring(2)]) {
+          skip--;
+        }
 
-    return parts.join("");
+        return skip ? "" : props[tok];
+      })
+      .join("");
   }
 }

public/app/themes/clarity/src/globals/js/ajax-utils.js

@@ -74,7 +74,7 @@
 
 export const renderResults = ({
   results: { posts, templateName },
-  aggregates: { currentPage, totalResults },
+  aggregates: { currentPage, resultsPerPage, totalResults },
 }) => {
   // Remove all articles if page is 1.
   if (currentPage === 1) {
@@ -88,24 +88,34 @@
   const resultsHtml = posts.map((props) => t.renderHtml(props));
 
   // Append the html to the content section.
   $("#content").append(resultsHtml);
 
   // Update the title.
   $("#title-section").text(`${totalResults} search results`);
+
+  // If we are on a page greater than 1, focus on the first new result.
+  if (currentPage > 1) {
+    const index = (currentPage - 1) * resultsPerPage;
+    $("#content").children().eq(index).find("div.content a").focus();
+  }
 };
 
 /**
  * Render pagination to the page.
- * 
+ *
  * @param {Object} props
  * @param {number} props.currentPage
  * @param {number} props.resultsPerPage
  * @param {number} props.totalResults
- * 
+ *
  * @returns {void}
  */
 
-export const renderPagination = ({ currentPage, resultsPerPage, totalResults }) => {
+export const renderPagination = ({
+  currentPage,
+  resultsPerPage,
+  totalResults,
+}) => {
   if (resultsPerPage === undefined || resultsPerPage === -1) {
     return;
   }
@@ -135,7 +145,7 @@
     totalPages: !totalResults ? 1 : Math.ceil(totalResults / resultsPerPage),
   });
 
   $(".c-pagination").html(paginationHtml);
 
   // Update the page number on the pagination element.
   if (!isLastPage) {