juanatsap
925a95c1b4
- 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)
114 lines
3.6 KiB
JavaScript
114 lines
3.6 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 + ')');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Scroll to Section
|
|
* @param {Event} event - The click event (for preventDefault)
|
|
* @param {string} sectionId - The ID of the section to scroll to
|
|
*/
|
|
function scrollToSection(event, sectionId) {
|
|
if (event) {
|
|
event.preventDefault();
|
|
}
|
|
const element = document.getElementById(sectionId);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
window.scrollToSection = scrollToSection;
|
|
|
|
// Note: handleGlobalKeydown() is defined in keyboard._hs as reference only
|
|
// The actual keyboard handler is inline in templates/index.html (body tag)
|