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

fix: add JavaScript wrappers for hyperscript functions to enable 'call' syntax

Browse Source 
Problem: Hover sync not working after migration to hyperscript
Root cause: Hyperscript 'call' command requires functions in global JavaScript scope
- Hyperscript def functions are NOT automatically exposed to window
- Templates use _="on mouseenter call syncPdfHover(true)"
- This syntax expects a JavaScript function

Solution: Thin JavaScript wrappers that delegate to hyperscript implementations
- Wrappers use _hyperscript.evaluate() API to call hyperscript defs
- Functions exposed to window.* for global access
- Implementation stays in hyperscript, wrappers just bridge the gap

Affected functions:
- toggleCVLength, toggleIcons, toggleTheme (toggles._hs)
- syncPdfHover, syncPrintHover, highlightZoomControl (hover-sync._hs)

Why test didn't catch this:
- Test 8 dispatches events programmatically in JavaScript
- This triggers hyperscript handlers directly
- Real browser hover calls JavaScript functions which were missing
This commit is contained in:
juanatsap
2025-11-17 16:40:29 +00:00
parent d2330f5d48
commit 491aa66920
1 changed files with 81 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/cv-functions.js
+81 -13
View File
@@ -1,12 +1,18 @@
/**
* CV Site - Core Functions
* =========================
* CV Site - JavaScript Wrappers for Hyperscript Functions
* =========================================================
*
* MIGRATION NOTICE (2025-11-17):
* ==============================
* Toggle and hover sync functions have been migrated to Hyperscript.
* ARCHITECTURE NOTE (2025-11-17):
* ===============================
* These are thin JavaScript wrappers that delegate to Hyperscript functions.
*
* Previous functions (now in hyperscript files):
* Why wrappers are needed:
* - Hyperscript `call` command requires functions in global JavaScript scope
* - Hyperscript `def` functions are NOT automatically exposed to window
* - Templates use `_="on mouseenter call syncPdfHover(true)"`
* - This syntax expects a JavaScript function, not a hyperscript def
*
* Implementation in Hyperscript:
* - toggleCVLength() → static/hyperscript/toggles._hs
* - toggleIcons() → static/hyperscript/toggles._hs
* - toggleTheme() → static/hyperscript/toggles._hs
@@ -14,11 +20,73 @@
* - syncPrintHover() → static/hyperscript/hover-sync._hs
* - highlightZoomControl() → static/hyperscript/hover-sync._hs
*
* Reason for migration:
* - Latest hyperscript version has NO def statement limit
* - Test verified: 5 def statements work perfectly
* - Better separation of concerns with organized hyperscript files
* - Server-side hypermedia pattern alignment
*
* This file is kept for future JavaScript-only functionality if needed.
* These wrappers call the hyperscript implementations via _hyperscript API.
*/
/**
* Toggle CV Length (Short/Long)
* @param {boolean} isLong - true for long CV, false for short
*/
function toggleCVLength(isLong) {
if (typeof _hyperscript !== 'undefined') {
_hyperscript.evaluate('toggleCVLength(' + isLong + ')');
}
}
/**
* Toggle Icons Display
* @param {boolean} showIcons - true to show icons, false to hide
*/
function toggleIcons(showIcons) {
if (typeof _hyperscript !== 'undefined') {
_hyperscript.evaluate('toggleIcons(' + showIcons + ')');
}
}
/**
* Toggle Theme (Default/Clean)
* @param {boolean} isClean - true for clean theme, false for default
*/
function toggleTheme(isClean) {
if (typeof _hyperscript !== 'undefined') {
_hyperscript.evaluate('toggleTheme(' + isClean + ')');
}
}
/**
* Sync PDF Button Hover State
* @param {boolean} show - true to add hover class, false to remove
*/
function syncPdfHover(show) {
if (typeof _hyperscript !== 'undefined') {
_hyperscript.evaluate('syncPdfHover(' + show + ')');
}
}
/**
* Sync Print Button Hover State
* @param {boolean} show - true to add hover class, false to remove
*/
function syncPrintHover(show) {
if (typeof _hyperscript !== 'undefined') {
_hyperscript.evaluate('syncPrintHover(' + show + ')');
}
}
/**
* Highlight Zoom Control
* @param {boolean} show - true to highlight, false to remove highlight
*/
function highlightZoomControl(show) {
if (typeof _hyperscript !== 'undefined') {
_hyperscript.evaluate('highlightZoomControl(' + show + ')');
}
}
// Make functions globally available for hyperscript `call` command
window.toggleCVLength = toggleCVLength;
window.toggleIcons = toggleIcons;
window.toggleTheme = toggleTheme;
window.syncPdfHover = syncPdfHover;
window.syncPrintHover = syncPrintHover;
window.highlightZoomControl = highlightZoomControl;