reconnect

.github/_includes/item/browse-buttons.html

@@ -0,0 +1,100 @@
+{% comment %}
+
+  Adds previous and next button arrows to provide navigation between items.
+  Requires cb_page_gen plugin.
+  The item order follows the order in the metadata CSV, so pre-sort the CSV to the desired order.
+
+{%- endcomment -%}
+<div class="text-center">
+  <a class="btn btn-secondary" href="{{ page.previous_item | relative_url }}" id="prev-page-button">&laquo; Previous</a>
+  <a class="btn btn-secondary" href="{{ '/browse/' | relative_url }}">Back to The Archive</a>
+  <a class="btn btn-secondary" href="{{ page.next_item | relative_url }}" id="next-page-button">Next &raquo;</a>
+</div>
+<div id="item-nav">
+  <div class="d-none d-md-block">
+    <a class="previous btn btn-lg btn-secondary" href="{{ page.previous_item | relative_url }}">&laquo;</a>
+    <a class="next btn btn-lg btn-secondary" href="{{ page.next_item | relative_url }}">&raquo;</a>
+  </div>
+</div>
+<script>
+  function leftArrowPressed() {
+    location.href = document.getElementById("prev-page-button").href;
+  };
+
+  function rightArrowPressed() {
+    location.href = document.getElementById("next-page-button").href;
+  };
+
+  function leftModalArrowPressed() {
+    // Get the modal element.
+    var modalshow = document.querySelector(".modal.show");
+    // If the modal exists, get the prev button element.
+    if (modalshow) {
+      const prevButton = modalshow.querySelector(".prev-child-button");
+      // If the prev button exists, click it.
+      if (prevButton) {
+        prevButton.click();
+      }
+    }
+  };
+
+  function rightModalArrowPressed() {
+    // Get the modal element.
+    var modalshow = document.querySelector(".modal.show");
+    // If the modal exists, get the prev button element.
+    if (modalshow) {
+      const nextButton = modalshow.querySelector(".next-child-button");
+      // If the prev button exists, click it.
+      if (nextButton) {
+        nextButton.click();
+      }
+    }
+  };
+
+  function isModalShown() {
+    // Get the modal element.
+    const modal = document.querySelector(".modal.show");
+
+    // Check if the modal has the "show" class.
+    return modal && modal.classList.contains("show");
+  };
+
+  function isSpotlightModalShown() {
+    // Get the modal element.
+    const spotlight = document.getElementById("spotlight");
+    // Check if the modal has the "show" class.
+    return spotlight && spotlight.classList.contains("show");
+  };
+
+
+  document.onkeydown = function (evt) {
+    if (isSpotlightModalShown()) {
+
+
+    } else if (isModalShown()) {
+      // The modal is shown.
+      evt = evt || window.event;
+      switch (evt.keyCode) {
+        case 37:
+          leftModalArrowPressed();
+            break;
+        case 39:
+          rightModalArrowPressed();
+            break;
+      }
+    }
+    else {
+      // The modal is not shown.
+      evt = evt || window.event;
+      switch (evt.keyCode) {
+        case 37:
+          leftArrowPressed();
+            break;
+        case 39:
+          rightArrowPressed();
+            break;
+      }
+    }
+
+  };
+</script>