Files
cv-site/static/hyperscript/toggles._hs
T
juanatsap d2330f5d48 refactor: migrate toggle and hover sync functions from JavaScript to Hyperscript
BREAKING: Removed JavaScript toggle functions in favor of organized Hyperscript architecture

Changes:
- Created organized Hyperscript file structure (no def limit with latest version):
  • static/hyperscript/utils._hs (utility functions)
  • static/hyperscript/toggles._hs (CV length, icons, theme toggles)
  • static/hyperscript/hover-sync._hs (PDF/Print hover sync + zoom highlight)

- Removed functions._hs (renamed to utils._hs for better organization)

- Emptied static/js/cv-functions.js (kept file with migration notice)
  • toggleCVLength, toggleIcons, toggleTheme → toggles._hs
  • syncPdfHover, syncPrintHover, highlightZoomControl → hover-sync._hs

- Updated templates/index.html to load all 3 new hyperscript files

- Updated tests/mjs/1-toggles.test.mjs for responsive design
  • Added viewport detection for desktop vs mobile toggles
  • Tests now adapt to screen size

Rationale:
- Test 9 confirmed NO def limit with latest hyperscript (tested up to 5 defs)
- Better separation of concerns with category-based file organization
- Aligns with server-side hypermedia pattern (HTMX + Hyperscript)
- Eliminates workaround JavaScript duplication
- 9 total def statements across 3 files (proving no limit)

Verified:
 All hyperscript files load successfully (HTTP 200)
 Hyperscript library loads without errors
 Functions work correctly in browser
 No console errors
 Test 9 (def limit) passes with 5 def statements

Related: Test 9 verification (tests/mjs/9-hyperscript-def-limit.test.mjs)
2025-11-17 16:28:52 +00:00

74 lines
2.8 KiB
Plaintext

-- ==============================================================================
-- CV Site - Toggle Functions
-- ==============================================================================
-- Toggle functions for CV customization (length, icons, theme)
-- Migrated from JavaScript (cv-functions.js) after confirming no def limit
-- ==============================================================================
-- CV LENGTH TOGGLE
-- ==============================================================================
def toggleCVLength(isLong)
set paper to the first .cv-paper
set actionBarToggle to #lengthToggle
set menuToggle to #lengthToggleMenu
if isLong is true
remove .cv-short from paper
add .cv-long to paper
call localStorage.setItem('cv-length', 'long')
if actionBarToggle exists then set actionBarToggle's checked to true end
if menuToggle exists then set menuToggle's checked to true end
else
remove .cv-long from paper
add .cv-short to paper
call localStorage.setItem('cv-length', 'short')
if actionBarToggle exists then set actionBarToggle's checked to false end
if menuToggle exists then set menuToggle's checked to false end
end
end
-- ==============================================================================
-- ICONS TOGGLE
-- ==============================================================================
def toggleIcons(showIcons)
set paper to the first .cv-paper
set actionBarToggle to #iconToggle
set menuToggle to #iconToggleMenu
if showIcons is true
add .show-icons to paper
call localStorage.setItem('cv-icons', 'true')
if actionBarToggle exists then set actionBarToggle's checked to true end
if menuToggle exists then set menuToggle's checked to true end
else
remove .show-icons from paper
call localStorage.setItem('cv-icons', 'false')
if actionBarToggle exists then set actionBarToggle's checked to false end
if menuToggle exists then set menuToggle's checked to false end
end
end
-- ==============================================================================
-- THEME TOGGLE
-- ==============================================================================
def toggleTheme(isClean)
set body to document.body
set actionBarToggle to #themeToggle
set menuToggle to #themeToggleMenu
if isClean is true
add .theme-clean to body
call localStorage.setItem('cv-theme', 'clean')
if actionBarToggle exists then set actionBarToggle's checked to true end
if menuToggle exists then set menuToggle's checked to true end
else
remove .theme-clean from body
call localStorage.setItem('cv-theme', 'default')
if actionBarToggle exists then set actionBarToggle's checked to false end
if menuToggle exists then set menuToggle's checked to false end
end
end