Add keyboard navigation to theological resource pages

- Biblical angels, covenants, festivals, maps, prophets
- Names of God, twelve apostles, women of the Bible
- Up/down/j/k to navigate entries, left/h to go back, Enter to open

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-29 18:53:04 -05:00
parent 98a899a59e
commit e7683ecd9e
8 changed files with 298 additions and 0 deletions
@@ -272,6 +272,43 @@ document.addEventListener('DOMContentLoaded', function() {
li.appendChild(a);
tocList.appendChild(li);
});
// Keyboard navigation
const entries = Array.from(document.querySelectorAll('.angel-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.angel-name a');
if (link) window.location.href = link.href;
}
});
});
</script>
{% endblock %}
@@ -270,6 +270,43 @@ document.addEventListener('DOMContentLoaded', function() {
li.appendChild(a);
tocList.appendChild(li);
});
// Keyboard navigation
const entries = Array.from(document.querySelectorAll('.covenant-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.covenant-name a');
if (link) window.location.href = link.href;
}
});
});
</script>
{% endblock %}
@@ -270,6 +270,43 @@ document.addEventListener('DOMContentLoaded', function() {
li.appendChild(a);
tocList.appendChild(li);
});
// Keyboard navigation
const entries = Array.from(document.querySelectorAll('.festival-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.festival-name a');
if (link) window.location.href = link.href;
}
});
});
</script>
{% endblock %}
+39
View File
@@ -349,6 +349,45 @@
</section>
<script>
// Keyboard navigation for location entries
(function() {
const entries = Array.from(document.querySelectorAll('.location-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.location-verses a');
if (link) window.location.href = link.href;
}
});
})();
function initializeMap() {
const locations = [
// Holy Land
@@ -268,6 +268,43 @@ document.addEventListener('DOMContentLoaded', function() {
li.appendChild(a);
tocList.appendChild(li);
});
// Keyboard navigation
const entries = Array.from(document.querySelectorAll('.prophet-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.prophet-name a');
if (link) window.location.href = link.href;
}
});
});
</script>
{% endblock %}
+37
View File
@@ -268,6 +268,43 @@ document.addEventListener('DOMContentLoaded', function() {
li.appendChild(a);
tocList.appendChild(li);
});
// Keyboard navigation
const entries = Array.from(document.querySelectorAll('.name-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.name-name a');
if (link) window.location.href = link.href;
}
});
});
</script>
{% endblock %}
@@ -270,6 +270,43 @@ document.addEventListener('DOMContentLoaded', function() {
li.appendChild(a);
tocList.appendChild(li);
});
// Keyboard navigation
const entries = Array.from(document.querySelectorAll('.apostle-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.apostle-name a');
if (link) window.location.href = link.href;
}
});
});
</script>
{% endblock %}
@@ -270,6 +270,43 @@ document.addEventListener('DOMContentLoaded', function() {
li.appendChild(a);
tocList.appendChild(li);
});
// Keyboard navigation
const entries = Array.from(document.querySelectorAll('.woman-entry'));
if (entries.length === 0) return;
let selectedIndex = -1;
function selectEntry(index) {
if (selectedIndex >= 0 && selectedIndex < entries.length) {
entries[selectedIndex].style.outline = '';
entries[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, entries.length - 1));
entries[selectedIndex].style.outline = '2px solid #4a7c59';
entries[selectedIndex].style.outlineOffset = '4px';
entries[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectEntry(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectEntry(0);
else selectEntry(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
history.back();
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
const link = entries[selectedIndex].querySelector('.woman-name a');
if (link) window.location.href = link.href;
}
});
});
</script>
{% endblock %}