Image Zoom & Keyboard Navigation
Relevant source files
The following files were used as context for generating this wiki page:
The Image Zoom and Keyboard Navigation systems provide accessibility and enhanced visual inspection for the GestaltView visual story. These features enable readers to view high-resolution PDF page crops in detail and navigate the narrative structure without relying solely on pointer interactions. The system operates entirely client-side within a self-contained static HTML environment.
Sources: README.md:1-24, story_template.html:1-10
Image Zoom Subsystem
The Image Zoom subsystem manages a modal interface that displays enlarged versions of diagrams and figures. It uses a centralized modal structure to preserve system resources and ensure consistent behavior across all 54 visuals in the inventory.
Modal Components and Styling
The interface utilizes a hidden-by-default fixed position div with high z-index. The open class toggles visibility using display: flex.
| Component | Selector | Purpose |
|---|---|---|
| Modal Container | #image-modal | High-z-index overlay using rgba(0,0,0,.86) background. |
| Image Display | #modal-image | Displays the src and alt text of the selected visual. |
| Caption Area | #modal-caption | Renders the title and source reference for the visual. |
| Close Button | #modal-close | A sticky button that returns focus to the previous element. |
Sources: story_template.html:129-145, story_template.html:171-174
Zoom Execution Logic
The openModal function initializes the zoom sequence by capturing the state of the active element before transferring focus to the modal interface.
The diagram shows the logic flow when a user interacts with a visual element to trigger the zoom effect.
Sources: story_template.html:212-220
Close and Cleanup
The closeModal function removes the open class and restores focus to previousFocus. This ensures a seamless transition for keyboard users returning to the main story card.
Sources: story_template.html:221-224
Keyboard Navigation Controller
The Keyboard Navigation Controller listens for global keydown events to provide rapid traversal of the visual story. It manages transitions between items, chapters, and the zoom modal.
Navigation Rules and Constraints
Navigation actions depend on the current state of the application. The system ignores arrow key inputs if the user focuses an INPUT or TEXTAREA element to prevent interference with search functions.
| Key | Context | Action |
|---|---|---|
ArrowRight | Main View | Navigates to the next visual in the sorted items list. |
ArrowLeft | Main View | Navigates to the previous visual in the sorted items list. |
Escape | Modal Open | Triggers closeModal to return to the story view. |
Enter / Space | Image Focused | Triggers openModal for the focused image. |
Sources: story_template.html:230-247
Event Handling Flow
The following sequence diagram illustrates how the document handles keyboard events to trigger navigation changes.
The sequence diagram details the conditional checks performed by the global listener before executing navigation or modal commands.
Sources: story_template.html:240-247
Data Integration and Sorting
Navigation order is determined during the build process in build_story_artifact.py. Visuals are sorted by chapter order, curated status, page number, and title.
Sort Hierarchy
- Chapter Order: Matches the sequence defined in the
CHAPTERSlist (Foundation → Governance → Topology). - Curated Status: Curated opening diagrams (1-13) appear first within their respective chapters.
- Page Number: Captioned figures follow in ascending order of the source PDF page.
- Title: Alphabetical sorting for items sharing the same page and status.
Sources: build_story_artifact.py:263-267, diagram_inventory.json:11-20
Item Traversal State
The renderItem function calculates the prev and next items based on the global items array. It updates the story navigation UI, including the progress indicator (e.g., "1 of 54 overall").
const storyIndex = items.findIndex(item => item.id === id);
const prev = items[storyIndex - 1];
const next = items[storyIndex + 1];
Sources: story_template.html:187-190
Implementation Summary
Image Zoom and Keyboard Navigation serve as the primary interactive layer for the index.html artifact. By using standard DOM events and CSS transitions, the system maintains a "no-build" requirement for hosting while providing features typically found in complex single-page applications.
Sources: README.md:5-15, story_template.html:248-250