refactor: externalize navigation handlers and fix hyperscript syntax errors

- Created keyboard._hs as reference documentation (inline handler in body tag)
- Externalized 9 hamburger menu navigation links to scrollToSection()
- Added scrollToSection() as JavaScript function (CSP-safe, no eval needed)
- Restored original keyboard handler format in body tag (working correctly)
- Removed problematic navigation._hs (had syntax/CSP issues)
- Added Rule 4 to HYPERSCRIPT-RULES.md on event handler externalization
- Updated PROJECT-MEMORY.md with externalization guidelines

Key learnings:
- Complex event handlers that inspect event properties must stay inline
- JavaScript functions avoid CSP unsafe-eval restrictions
- Navigation successfully externalized: 9 links → 1 function (91% reduction)
This commit is contained in:
juanatsap
2025-11-20 09:17:09 +00:00
parent 27f5e8eb79
commit 925a95c1b4
6 changed files with 236 additions and 42 deletions
+41
View File
@@ -0,0 +1,41 @@
-- File: keyboard._hs
-- Purpose: Keyboard shortcut handlers for CV application
-- Last Updated: 2025-11-20
-- Main keyboard event dispatcher
-- Handles all keyboard shortcuts: '?', 'L', 'I', 'V'
-- NOTE: This file is kept as reference/documentation only.
-- The actual keyboard handler is implemented inline in templates/index.html (body tag)
-- because hyperscript event handlers need direct access to the event context.
def handleGlobalKeydown(event)
set tagName to event.target.tagName
set isInputField to (tagName is 'INPUT' or tagName is 'TEXTAREA')
-- Show shortcuts modal with '?'
if event.key is '?' and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
halt the event
set modal to #shortcuts-modal
if modal then call modal.showModal() end
end
-- Toggle CV length with 'L'
if (event.key is 'l' or event.key is 'L') and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
halt the event
set lengthToggle to (#lengthToggle or #lengthToggleMenu)
if lengthToggle then set lengthToggle's checked to (not lengthToggle's checked) then send change to lengthToggle end
end
-- Toggle icons with 'I'
if (event.key is 'i' or event.key is 'I') and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
halt the event
set iconToggle to (#iconToggle or #iconToggleMenu)
if iconToggle then set iconToggle's checked to (not iconToggle's checked) then send change to iconToggle end
end
-- Toggle theme with 'V'
if (event.key is 'v' or event.key is 'V') and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
halt the event
set themeToggle to (#themeToggle or #themeToggleMenu)
if themeToggle then set themeToggle's checked to (not themeToggle's checked) then send change to themeToggle end
end
end