cv-site/static/js/cv-functions.js

/**
 * 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)