16adda8c47
- Changed references in markup.md to update "data.html" to "data/" for clarity. - Updated metadata.md to correct the link to the general documentation. - Modified navbar.md to ensure stub values match the new permalink structure. - Adjusted tables.md to reflect the new permalink for the table visualization page. - Updated about.md to change the permalink from "/about.html" to "/about/" and revised content for clarity and impact. - Changed browse.md permalink from "/browse.html" to "/browse/" for consistency. - Added copyright.md page with copyright information and terms of use. - Updated data.md to change permalink from "/data.html" to "/data/" and added introductory content. - Created donate.md page to facilitate donations and acknowledge supporters. - Updated locations.md permalink from "/locations.html" to "/locations/" for consistency. - Changed map.md permalink from "/map.html" to "/map/" for uniformity. - Added erasure.md page discussing the historical context of Black queer Kansas Citians. - Updated out-there.md to correct the link to Lea Hopkins' interview. - Changed subjects.md permalink from "/subjects.html" to "/subjects/" for consistency. - Updated timeline.md permalink from "/timeline.html" to "/timeline/" for uniformity.
100 lines
2.9 KiB
HTML
100 lines
2.9 KiB
HTML
{% 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">« Previous</a>
|
|
<a class="btn btn-secondary" href="{{ '/browse/' | relative_url }}">Back to Browse</a>
|
|
<a class="btn btn-secondary" href="{{ page.next_item | relative_url }}" id="next-page-button">Next »</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 }}">«</a>
|
|
<a class="next btn btn-lg btn-secondary" href="{{ page.next_item | relative_url }}">»</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> |