juanatsap
35a836adf3
Zoom level persistence was broken because hyperscript was setting the container's value instead of the slider's value on page load. Changes: - Fix zoom-control.html line 10: set #zoom-slider's value (not 'my value') - Add comprehensive zoom persistence test (10-zoom-persistence.test.mjs) - Update cv-functions.js documentation to clarify hyperscript interop - Add zoom control feature to README Test results: 5/5 tests pass - Zoom saves to localStorage when changed ✅ - Zoom restores correctly on page reload ✅ - Reset to 100% works and persists ✅ Architecture note: - Hyperscript 'call' within _="" attributes requires global JS scope - JavaScript wrappers bridge window exposure to hyperscript evaluate() - Pattern: window.fn() → _hyperscript.evaluate('hyperscriptFn()')
95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
/**
|
|
* CV Site - JavaScript Wrappers for Hyperscript Functions
|
|
* =========================================================
|
|
*
|
|
* ARCHITECTURE NOTE (2025-11-17):
|
|
* ===============================
|
|
* These are thin JavaScript wrappers that delegate to Hyperscript functions.
|
|
*
|
|
* Why wrappers are needed:
|
|
* - Hyperscript's `call` command within `_=""` attributes requires functions in global JS scope
|
|
* - While hyperscript docs state "global hyperscript functions can be called from JavaScript",
|
|
* the reverse (JS calling hyperscript via `call` in attributes) requires window exposure
|
|
* - Templates use `_="on mouseenter call syncPdfHover(true)"` syntax
|
|
* - Hyperscript `def` functions are accessible via _hyperscript.evaluate() but not window.functionName
|
|
* - These wrappers bridge the gap by exposing to window and delegating to hyperscript
|
|
*
|
|
* Implementation in Hyperscript:
|
|
* - toggleCVLength() → static/hyperscript/toggles._hs
|
|
* - toggleIcons() → static/hyperscript/toggles._hs
|
|
* - toggleTheme() → static/hyperscript/toggles._hs
|
|
* - syncPdfHover() → static/hyperscript/hover-sync._hs
|
|
* - syncPrintHover() → static/hyperscript/hover-sync._hs
|
|
* - highlightZoomControl() → static/hyperscript/hover-sync._hs
|
|
*
|
|
* Pattern: window.functionName() → _hyperscript.evaluate('hyperscriptFunction()')
|
|
*/
|
|
|
|
/**
|
|
* 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;
|