Abstract getClosestHeading

nationalarchives · Feb 7, 2024 · 9d93286 · 9d93286
1 parent 0e063c0
commit 9d93286
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 36 deletions.
diff --git a/src/nationalarchives/components/picture/analytics.js b/src/nationalarchives/components/picture/analytics.js
@@ -1,3 +1,5 @@
+import { getClosestHeading } from "../../lib/analytics-helpers.mjs";
+
 export default [
   {
     scope: ".tna-picture",
@@ -18,31 +20,7 @@ export default [
           },
           // eslint-disable-next-line no-unused-vars
           value: ($el, $scope, event) => {
-            const includesAny = (arr, values) =>
-              values.some((v) => arr.includes(v));
-            let heading = "";
-            let $search = $scope;
-            do {
-              while ($search.previousElementSibling) {
-                $search = $search.previousElementSibling;
-                if (
-                  ["h1", "h2", "h3", "h4", "h5", "h6"].includes(
-                    $search.tagName,
-                  ) ||
-                  ($search.classList.length &&
-                    includesAny(Array.from($search.classList), [
-                      "tna-heading-xl",
-                      "tna-heading-l",
-                      "tna-heading-m",
-                      "tna-heading-s",
-                    ]))
-                ) {
-                  heading = $search.innerText;
-                  break;
-                }
-              }
-              $search = $search.parentElement;
-            } while ($search.parentElement && !heading);
+            const heading = getClosestHeading($scope);
             const image = $scope.querySelector(".tna-picture__image");
             const imageSrc = image.getAttribute("src");
             const imageAlt = image.getAttribute("alt");

diff --git a/src/nationalarchives/lib/analytics-helpers.mjs b/src/nationalarchives/lib/analytics-helpers.mjs
@@ -1,26 +1,54 @@
-const getXPathTo = (element) => {
-  if (element.id !== "") {
-    return 'id("' + element.id + '")';
+const getXPathTo = ($element) => {
+  if ($element.id !== "") {
+    return 'id("' + $element.id + '")';
   }
-  if (element === document.body) {
-    return element.tagName;
+  if ($element === document.body) {
+    return $element.tagName;
   }
   let ix = 0;
-  const siblings = element.parentNode.childNodes;
+  const siblings = $element.parentNode.childNodes;
   for (let i = 0; i < siblings.length; i++) {
     const sibling = siblings[i];
-    if (sibling === element)
+    if (sibling === $element)
       return (
-        getXPathTo(element.parentNode) +
+        getXPathTo($element.parentNode) +
         "/" +
-        element.tagName +
+        $element.tagName +
         "[" +
         (ix + 1) +
         "]"
       );
-    if (sibling.nodeType === 1 && sibling.tagName === element.tagName) ix++;
+    if (sibling.nodeType === 1 && sibling.tagName === $element.tagName) ix++;
   }
 };
+
+const includesAny = (arr, values) => values.some((v) => arr.includes(v));
+
+const getClosestHeading = ($element) => {
+  let heading = "";
+  let $search = $element;
+  do {
+    while ($search.previousElementSibling) {
+      $search = $search.previousElementSibling;
+      if (
+        ["h1", "h2", "h3", "h4", "h5", "h6"].includes($search.tagName) ||
+        ($search.classList.length &&
+          includesAny(Array.from($search.classList), [
+            "tna-heading-xl",
+            "tna-heading-l",
+            "tna-heading-m",
+            "tna-heading-s",
+          ]))
+      ) {
+        heading = $search.innerText;
+        break;
+      }
+    }
+    $search = $search.parentElement;
+  } while ($search.parentElement && !heading);
+  return heading;
+};
+
 const valueGetters = {
   // eslint-disable-next-line no-unused-vars
   text: ($el, $scope, event) => $el.innerText,
@@ -30,4 +58,4 @@ const valueGetters = {
   value: ($el, $scope, event) => $el.value,
 };
 
-export { getXPathTo, valueGetters };
+export { getXPathTo, getClosestHeading, valueGetters };