Merge pull request #561 from zapier/pde-4540/nav-linking-fix

PDE-4540 - Fix previous and next navigation links
zapier · Dec 13, 2023 · 75083ee · 75083ee
2 parents 26a7082 + fae6954
commit 75083ee
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/_includes/javascript.html b/_includes/javascript.html
@@ -120,4 +120,44 @@
   zoomClose.addEventListener("click", removeImageFocus);
   document.addEventListener("keydown", keyDownHandler);
 })();
-</script>
+</script>
+
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const sidebarLinks = document.querySelectorAll('.sidebar__list-link');
+    const currentUrl = window.location.pathname;
+    let currentIndex = -1;
+
+    const linksArray = Array.from(sidebarLinks);
+
+    linksArray.forEach((link, index) => {
+        if (link.getAttribute('href') === currentUrl) {
+            currentIndex = index;
+        }
+    });
+
+    if (currentIndex !== -1) {
+        const prevLink = linksArray[currentIndex - 1];
+        const nextLink = linksArray[currentIndex + 1];
+
+        if (prevLink) {
+            document.getElementById('previous_page').style.visibility = "visible"
+            document.getElementById('previous_page').href = prevLink.href;
+            document.getElementById('previous_page').textContent = "Previous: " + prevLink.textContent.trim();
+        } else {
+            document.getElementById('previous_page').style.visibility = "hidden"
+        }
+
+        if (nextLink) {
+            document.getElementById('next_page').style.visibility = "visible"
+            document.getElementById('next_page').href = nextLink.href;
+            document.getElementById('next_page').textContent = "Next: " + nextLink.textContent.trim();
+        } else {
+          document.getElementById('next_page').style.visibility = "hidden"
+
+        }
+    }
+});
+
+</script>
diff --git a/_includes/prev-next.html b/_includes/prev-next.html
@@ -15,5 +15,5 @@
 {% endfor %}
 
 <hr>
-{% if prev %}<a class="button blue" href="{{ site.baseurl }}{{ prev.url}}">Previous: {{ prev.title }}</a>{% endif %}
-{% if next %}<a class="button blue" href="{{ site.baseurl }}{{ next.url}}">Next: {{ next.title }}</a>{% endif %}
+{% if prev %}<a id="previous_page" class="button blue" href="{{ site.baseurl }}{{ prev.url}}">Previous: {{ prev.title }}</a>{% endif %}
+{% if next %}<a id="next_page" class="button blue" href="{{ site.baseurl }}{{ next.url}}">Next: {{ next.title }}</a>{% endif %}