diff --git a/doc/4-HYPERSCRIPT-RULES.md b/doc/4-HYPERSCRIPT-RULES.md index 0306b49..c424b78 100644 --- a/doc/4-HYPERSCRIPT-RULES.md +++ b/doc/4-HYPERSCRIPT-RULES.md @@ -131,11 +131,11 @@ end ``` static/hyperscript/ -├── utils._hs → Core utilities (scroll, print, etc.) +├── utils._hs → Core utilities (scroll, print, modals, expand/collapse) ├── toggles._hs → Toggle functions (CV length, icons, theme) ├── hover-sync._hs → Hover sync functions (PDF, print, zoom) ├── keyboard._hs → Keyboard shortcut helpers (handleToggleShortcut, openModalShortcut) -├── zoom._hs → Zoom control helpers (handleZoomInput, handleZoomReset, initZoomControl) +├── zoom._hs → Zoom control (slider, reset, drag handlers, visibility) └── pdf-modal._hs → PDF modal helpers (selectPdfCard, handlePdfCardKey) ``` @@ -156,6 +156,12 @@ static/hyperscript/ 1. `printFriendly()` - Handle print-friendly view 2. `initScrollBehavior()` - Initialize scroll variables 3. `handleScroll()` - Manage scroll behavior and fixed button positioning +4. `closeOnBackdrop(modal, evt)` - Close modal when clicking backdrop (outside content) +5. `scrollToTop(evt)` - Smooth scroll to top of page +6. `scrollToSection(evt, sectionId)` - Smooth scroll to section with menu close +7. `expandAllSections(evt)` - Expand all `
` elements +8. `collapseAllSections(evt)` - Collapse all `
` elements +9. `setFooterHover(show)` - Add/remove footer-hovered class on fixed buttons ### Toggle Functions (toggles._hs) 1. `toggleCVLength(isLong)` - Switch between short/long CV @@ -167,8 +173,20 @@ static/hyperscript/ 2. `syncPrintHover(show)` - Sync hover state across print buttons 3. `highlightZoomControl(show)` - Highlight zoom control on hover -### Navigation Functions (navigation._hs) [2025-11-20] -1. `scrollToSection(event, sectionId)` - Smooth scroll to CV section +### Zoom Functions (zoom._hs) +1. `handleZoomInput(slider)` - Handle zoom slider input changes +2. `handleZoomReset()` - Reset zoom to 100% +3. `initZoomControl(control)` - Initialize zoom control on page load +4. `showZoomControl()` - Show the zoom control panel +5. `hideZoomControl()` - Hide the zoom control panel +6. `toggleZoomControl()` - Toggle zoom control visibility +7. `isZoomDragTarget(el)` - Check if element is valid drag target (not button/input) +8. `startZoomDrag(control, clientX, clientY)` - Start dragging zoom control +9. `moveZoomDrag(control, clientX, clientY)` - Handle drag movement +10. `endZoomDrag(control)` - End drag and save position + +### Navigation Functions (moved to utils._hs) +*Note: `scrollToSection` moved to utils._hs for consolidation* ## Why These Rules Exist @@ -192,10 +210,36 @@ static/hyperscript/ ❌ **DON'T**: Write long inline hyperscript in HTML (maintainability issue) ❌ **DON'T**: Try to externalize event handlers that inspect `event.key` or `event.target` ❌ **DON'T**: Forget to test after refactoring (syntax errors look like bugs) +❌ **DON'T**: Use `target` as a parameter name - it's a reserved word! ✅ **DO**: Split functions across multiple .\_hs files for organization ✅ **DO**: Keep HTML clean with function calls ✅ **DO**: Test all keyboard shortcuts after any hyperscript changes +✅ **DO**: Use `el` instead of `target` when passing DOM elements to functions + +### Reserved Words in Hyperscript +The following are reserved and reference special values in hyperscript: +- `target` → `event.target` (the element that triggered the event) +- `me` → The current element with the `_=""` attribute +- `it` → The result of the previous command +- `event` → The current event object + +**Example of the `target` pitfall:** +```hyperscript +-- ❌ WRONG - 'target' is reserved, will reference event.target +def checkElement(target) + if target.tagName is 'INPUT' -- ERROR: target is null in function context + return false + end +end + +-- ✅ CORRECT - use 'el' instead +def checkElement(el) + if el.tagName is 'INPUT' + return false + end +end +``` ## Testing After Changes @@ -208,7 +252,18 @@ static/hyperscript/ ## Recent Changes -### 2025-11-30: Major Inline Hyperscript Refactoring +### 2025-11-30: Major Inline Hyperscript Refactoring (Phase 2) +- ✅ **REFACTORED**: Modal backdrop close (3 modals) → `closeOnBackdrop()` in `utils._hs` +- ✅ **REFACTORED**: Back-to-top button → `scrollToTop()` in `utils._hs` +- ✅ **REFACTORED**: Zoom drag handlers (~35 lines) → 4 functions in `zoom._hs` +- ✅ **ADDED**: `isZoomDragTarget()`, `startZoomDrag()`, `moveZoomDrag()`, `endZoomDrag()` +- ✅ **ADDED**: `showZoomControl()`, `hideZoomControl()`, `toggleZoomControl()` +- ✅ **MOVED**: `expandAllSections()`, `collapseAllSections()` to `utils._hs` +- ✅ **MOVED**: `scrollToSection()` to `utils._hs` with integrated menu close +- ✅ **LEARNING**: `target` is a reserved word in hyperscript (use `el` instead) +- ✅ **TESTED**: All 21 functions verified, 6 functional tests passed + +### 2025-11-30: Major Inline Hyperscript Refactoring (Phase 1) - ✅ **REFACTORED**: Body tag keyboard handlers → `keyboard._hs` helper functions - ✅ **REFACTORED**: Zoom control handlers → `zoom._hs` helper functions - ✅ **REFACTORED**: PDF modal card selection (3 identical blocks) → `pdf-modal._hs`