mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
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:
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user