txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Major hyperscript refactoring and JS elimination

Browse Source 
Inline Hyperscript Refactoring:
- Body tag keyboard handlers: 20→8 lines (using helper functions)
- Zoom control handlers: 85→35 lines (using zoom._hs)
- PDF modal card selection: 90→6 lines (3 identical blocks eliminated)

New Hyperscript Files:
- zoom._hs: handleZoomInput, handleZoomReset, initZoomControl
- pdf-modal._hs: selectPdfCard, handlePdfCardKey

JavaScript Elimination (232 lines removed):
- cv-functions.js: REMOVED - hyperscript defs are globally available
- scroll-at-bottom-handler.js: REMOVED - duplicate of handleScroll()
- footer-buttons-interaction.js: REMOVED - moved to hyperscript

Added Tests:
- 32-hyperscript-multi-src.test.mjs: Verifies multi-file loading
- 33-keyboard-shortcuts-refactored.test.mjs: Keyboard shortcuts
- 34-hyperscript-refactor-comprehensive.test.mjs: Full test suite

Key Findings:
- No hyperscript multi-file bug in 0.9.14
- Hyperscript def statements are globally accessible
- Previous refactoring failures were syntax errors, not library bugs
This commit is contained in:
juanatsap
2025-11-30 05:58:44 +00:00
parent 4a02c0a328
commit ba44b435e7
12 changed files with 841 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+12 -25
View File
@@ -65,24 +65,21 @@
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
<!-- CV Core Functions - Regular JavaScript (global reusable functions) -->
<script src="/static/js/cv-functions.js"></script>
<!-- Hyperscript Functions - Must load BEFORE hyperscript library -->
<!-- NOTE: cv-functions.js removed - hyperscript def statements are globally available -->
<!-- ✅ NO def limit with latest hyperscript - organized by category -->
<script type="text/hyperscript" src="/static/hyperscript/utils._hs"></script>
<script type="text/hyperscript" src="/static/hyperscript/toggles._hs"></script>
<script type="text/hyperscript" src="/static/hyperscript/hover-sync._hs"></script>
<script type="text/hyperscript" src="/static/hyperscript/keyboard._hs"></script>
<script type="text/hyperscript" src="/static/hyperscript/zoom._hs"></script>
<script type="text/hyperscript" src="/static/hyperscript/pdf-modal._hs"></script>
<!-- Color Theme System (JavaScript - hyperscript had parsing issues with colons in strings) -->
<script src="/static/js/color-theme.js"></script>
<!-- Footer and Button Bar Interaction - Makes buttons transparent when hovering footer -->
<script src="/static/js/footer-buttons-interaction.js"></script>
<!-- Scroll At-Bottom Handler - Adds 'at-bottom' class to buttons and footer when scrolled to bottom -->
<script src="/static/js/scroll-at-bottom-handler.js"></script>
<!-- NOTE: footer-buttons-interaction.js removed - moved to hyperscript on footer element -->
<!-- NOTE: scroll-at-bottom-handler.js removed - duplicate of handleScroll() in utils._hs -->
<!-- Hyperscript - Declarative event handling for enhanced interactivity -->
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
@@ -144,23 +141,13 @@
_="on load call initScrollBehavior()
on scroll from window call handleScroll()
on keydown
set tagName to event.target.tagName
set isInputField to (tagName is 'INPUT' or tagName is 'TEXTAREA')
if event.key is '?' and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
halt the event then set modal to #shortcuts-modal then if modal then call modal.showModal() end
end
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 then set lengthToggle to (#lengthToggle or #lengthToggleMenu)
then if lengthToggle then set lengthToggle's checked to (not lengthToggle's checked) then send change to lengthToggle end
end
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 then set iconToggle to (#iconToggle or #iconToggleMenu)
then if iconToggle then set iconToggle's checked to (not iconToggle's checked) then send change to iconToggle end
end
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 then set themeToggle to (#themeToggle or #themeToggleMenu)
then if themeToggle then set themeToggle's checked to (not themeToggle's checked) then send change to themeToggle end
end
set tag to event.target.tagName
set skip to (tag is 'INPUT' or tag is 'TEXTAREA')
set noMod to (not event.ctrlKey and not event.metaKey and not event.altKey)
if event.key is '?' and noMod and not skip then halt the event then call openModalShortcut('shortcuts-modal') end
if (event.key is 'l' or event.key is 'L') and noMod and not skip then halt the event then call handleToggleShortcut('lengthToggle', 'lengthToggleMenu') end
if (event.key is 'i' or event.key is 'I') and noMod and not skip then halt the event then call handleToggleShortcut('iconToggle', 'iconToggleMenu') end
if (event.key is 'v' or event.key is 'V') and noMod and not skip then halt the event then call handleToggleShortcut('themeToggle', 'themeToggleMenu') end
end">
<!-- Top anchor for back-to-top link -->
<div id="top"></div>