3c49f8f7cf
Replace verbose document.getElementById() and document.querySelectorAll()
with cleaner hyperscript syntax:
- #id for ID selectors
- .class and the first .class for class selectors
- <selector/> query literals for complex selectors
- #{variable} for dynamic ID interpolation
Files changed:
- utils._hs: scrollHeight, details, footer buttons, scrollToSection
- zoom._hs: all zoom control element selectors (14 changes)
- pdf-modal._hs: modal selector
- keyboard._hs: dynamic toggle and modal selectors
- contact-modal.html: response div and modal close
- index.html: ninja-keys bar selector
203 lines
5.6 KiB
Plaintext
203 lines
5.6 KiB
Plaintext
-- File: zoom._hs
|
|
-- Purpose: Zoom control helper functions
|
|
-- Last Updated: 2025-11-30
|
|
|
|
-- ==============================================================================
|
|
-- ZOOM SLIDER INPUT HANDLER
|
|
-- ==============================================================================
|
|
-- Called from zoom-slider input event to update zoom level
|
|
def handleZoomInput(slider)
|
|
set zoomValue to slider.value as a Number
|
|
set zoomLevel to zoomValue / 100
|
|
|
|
-- Update display
|
|
set valueEl to #zoom-value-current
|
|
if valueEl is not null
|
|
put zoomValue into valueEl
|
|
end
|
|
set slider's @aria-valuenow to zoomValue
|
|
set slider's @aria-valuetext to `${zoomValue}%`
|
|
|
|
-- Toggle reset button class
|
|
set resetBtn to #zoom-reset
|
|
if resetBtn is not null
|
|
if zoomValue is not 100
|
|
add .zoom-not-default to resetBtn
|
|
else
|
|
remove .zoom-not-default from resetBtn
|
|
end
|
|
end
|
|
|
|
-- Apply zoom to wrapper
|
|
set wrapper to #zoom-wrapper
|
|
if wrapper is not null
|
|
set wrapper's *zoom to zoomLevel
|
|
-- Handle width for zoom > 100%
|
|
if zoomLevel > 1
|
|
set wrapper's *width to 'auto'
|
|
set wrapper's *minWidth to '100%'
|
|
set wrapper's *maxWidth to 'none'
|
|
else
|
|
set wrapper's *width to ''
|
|
set wrapper's *minWidth to ''
|
|
set wrapper's *maxWidth to ''
|
|
end
|
|
end
|
|
|
|
-- Save to localStorage
|
|
set localStorage['cv-zoom'] to zoomValue
|
|
end
|
|
|
|
-- ==============================================================================
|
|
-- ZOOM RESET HANDLER
|
|
-- ==============================================================================
|
|
-- Called from reset button to reset zoom to 100%
|
|
def handleZoomReset()
|
|
set slider to #zoom-slider
|
|
if slider is not null
|
|
set slider.value to 100
|
|
call handleZoomInput(slider)
|
|
call slider.focus()
|
|
end
|
|
end
|
|
|
|
-- ==============================================================================
|
|
-- ZOOM CONTROL VISIBILITY
|
|
-- ==============================================================================
|
|
-- Initialize zoom control visibility on load
|
|
def initZoomControl(control)
|
|
-- Skip on mobile
|
|
if window.innerWidth <= 768
|
|
exit
|
|
end
|
|
|
|
-- Load saved zoom level
|
|
set savedZoom to localStorage.getItem('cv-zoom')
|
|
set slider to #zoom-slider
|
|
if savedZoom and slider
|
|
set slider.value to savedZoom
|
|
call handleZoomInput(slider)
|
|
end
|
|
|
|
-- Check visibility preference
|
|
set isVisible to localStorage.getItem('cv-zoom-visible')
|
|
if isVisible is 'true'
|
|
remove .zoom-hidden from control
|
|
set menuBtn to #show-zoom-menu-btn
|
|
if menuBtn is not null
|
|
add .zoom-hidden to menuBtn
|
|
end
|
|
end
|
|
|
|
-- Load saved position
|
|
set savedPos to localStorage.getItem('cv-zoom-position')
|
|
if savedPos
|
|
set pos to JSON.parse(savedPos)
|
|
set control's *bottom to pos.bottom
|
|
set control's *left to pos.left
|
|
set control's *transform to 'none'
|
|
end
|
|
end
|
|
|
|
-- ==============================================================================
|
|
-- ZOOM VISIBILITY HANDLERS
|
|
-- ==============================================================================
|
|
-- Show zoom control
|
|
def showZoomControl()
|
|
set control to #zoom-control
|
|
set menuBtn to #show-zoom-menu-btn
|
|
if control is not null
|
|
remove .zoom-hidden from control
|
|
set localStorage['cv-zoom-visible'] to 'true'
|
|
end
|
|
if menuBtn is not null
|
|
add .zoom-hidden to menuBtn
|
|
end
|
|
end
|
|
|
|
-- Hide zoom control
|
|
def hideZoomControl()
|
|
set control to #zoom-control
|
|
set menuBtn to #show-zoom-menu-btn
|
|
if control is not null
|
|
add .zoom-hidden to control
|
|
set localStorage['cv-zoom-visible'] to 'false'
|
|
end
|
|
if menuBtn is not null
|
|
remove .zoom-hidden from menuBtn
|
|
end
|
|
end
|
|
|
|
-- Toggle zoom control visibility
|
|
def toggleZoomControl()
|
|
set control to #zoom-control
|
|
if control is not null
|
|
if control.classList.contains('zoom-hidden')
|
|
call showZoomControl()
|
|
else
|
|
call hideZoomControl()
|
|
end
|
|
end
|
|
end
|
|
|
|
-- ==============================================================================
|
|
-- ZOOM CONTROL DRAG HANDLERS
|
|
-- ==============================================================================
|
|
-- Check if drag target is valid (not a button or input)
|
|
def isZoomDragTarget(el)
|
|
if el.tagName is 'INPUT'
|
|
return false
|
|
end
|
|
if el.tagName is 'BUTTON'
|
|
return false
|
|
end
|
|
if el.matches('.zoom-slider, .zoom-close-btn, .zoom-reset-btn, .zoom-value')
|
|
return false
|
|
end
|
|
if el.closest('.zoom-close-btn')
|
|
return false
|
|
end
|
|
if el.closest('.zoom-reset-btn')
|
|
return false
|
|
end
|
|
return true
|
|
end
|
|
|
|
-- Start dragging zoom control
|
|
def startZoomDrag(control, clientX, clientY)
|
|
set control._isDragging to true
|
|
set control's *transition to 'none'
|
|
set rect to control.getBoundingClientRect()
|
|
set control._initialX to clientX - rect.left
|
|
set control._initialY to clientY - rect.top
|
|
end
|
|
|
|
-- Handle drag move
|
|
def moveZoomDrag(control, clientX, clientY)
|
|
if control._isDragging is not true
|
|
return false
|
|
end
|
|
set currentX to clientX - control._initialX
|
|
set currentY to clientY - control._initialY
|
|
set maxX to window.innerWidth - control.offsetWidth
|
|
set maxY to window.innerHeight - control.offsetHeight
|
|
set currentX to Math.max(0, Math.min(currentX, maxX))
|
|
set currentY to Math.max(0, Math.min(currentY, maxY))
|
|
set control's *left to `${currentX}px`
|
|
set control's *bottom to `${window.innerHeight - currentY - control.offsetHeight}px`
|
|
set control's *transform to 'none'
|
|
return true
|
|
end
|
|
|
|
-- End drag and save position
|
|
def endZoomDrag(control)
|
|
if control._isDragging is not true
|
|
return false
|
|
end
|
|
set control._isDragging to false
|
|
set control's *transition to 'all 0.3s ease'
|
|
set position to { bottom: control.style.bottom, left: control.style.left }
|
|
set localStorage['cv-zoom-position'] to JSON.stringify(position)
|
|
return true
|
|
end
|