kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Include kids callout in story page keyboard navigation

Browse Source 
- Up/down now includes the kids version callout box
- Enter on kids callout navigates to kids version
- Added Escape to clear selection

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2025-11-29 23:55:56 -05:00
parent 11ec1a4095
commit b3545fd377
1 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/templates/story_detail.html
+25 -14
View File
@@ -350,23 +350,23 @@ hr.story-divider::before {
<script>
(function() {
// Collect paragraphs for up/down navigation
var paragraphs = Array.from(document.querySelectorAll('article section p'));
// Collect paragraphs and kids callout for up/down navigation
var elements = Array.from(document.querySelectorAll('article section p, .kids-callout'));
var selectedIndex = -1;
function selectParagraph(index) {
function selectElement(index) {
// Remove previous selection
if (selectedIndex >= 0 && selectedIndex < paragraphs.length) {
paragraphs[selectedIndex].style.outline = '';
paragraphs[selectedIndex].style.outlineOffset = '';
if (selectedIndex >= 0 && selectedIndex < elements.length) {
elements[selectedIndex].style.outline = '';
elements[selectedIndex].style.outlineOffset = '';
}
selectedIndex = Math.max(0, Math.min(index, paragraphs.length - 1));
selectedIndex = Math.max(0, Math.min(index, elements.length - 1));
// Add selection to new paragraph
paragraphs[selectedIndex].style.outline = '2px solid #4a7c59';
paragraphs[selectedIndex].style.outlineOffset = '8px';
paragraphs[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
// Add selection to new element
elements[selectedIndex].style.outline = '2px solid #4a7c59';
elements[selectedIndex].style.outlineOffset = '8px';
elements[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
}
document.addEventListener('keydown', function(e) {
@@ -374,11 +374,11 @@ hr.story-divider::before {
if (e.key === 'ArrowDown' || e.key === 'j') {
e.preventDefault();
selectParagraph(selectedIndex < 0 ? 0 : selectedIndex + 1);
selectElement(selectedIndex < 0 ? 0 : selectedIndex + 1);
} else if (e.key === 'ArrowUp' || e.key === 'k') {
e.preventDefault();
if (selectedIndex <= 0) selectParagraph(0);
else selectParagraph(selectedIndex - 1);
if (selectedIndex <= 0) selectElement(0);
else selectElement(selectedIndex - 1);
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
e.preventDefault();
window.location.href = '/stories';
@@ -386,6 +386,17 @@ hr.story-divider::before {
e.preventDefault();
var nextLink = document.querySelector('.nav-next .nav-title');
if (nextLink) window.location.href = nextLink.href;
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault();
var link = elements[selectedIndex].querySelector('a');
if (link) window.location.href = link.href;
} else if (e.key === 'Escape') {
e.preventDefault();
if (selectedIndex >= 0 && selectedIndex < elements.length) {
elements[selectedIndex].style.outline = '';
elements[selectedIndex].style.outlineOffset = '';
}
selectedIndex = -1;
}
});
})();