refactor: Extract zoom drag handlers to functions in zoom._hs

- Move inline drag handling (~35 lines) to external functions (~4 lines)
- Add isZoomDragTarget(el), startZoomDrag(), moveZoomDrag(), endZoomDrag()
- Note: 'target' is reserved in hyperscript, use 'el' for parameters
- Drag state stored on element (_isDragging, _initialX, _initialY)

Zoom control HTML now has clean, minimal hyperscript handlers.
This commit is contained in:
juanatsap
2025-11-30 06:30:51 +00:00
parent cf6b825bde
commit 74bb3747a9
2 changed files with 64 additions and 33 deletions
+3 -33
View File
@@ -2,39 +2,9 @@
<!-- Zoom Control (Fixed Bottom Center, Draggable) - Hyperscript Enhanced -->
<div id="zoom-control" class="zoom-control no-print zoom-hidden" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"
_="on load call initZoomControl(me)
on mousedown(clientX, clientY)
set target to event.target
set tag to target.tagName
if tag is 'INPUT' or tag is 'BUTTON' then exit end
if target.classList.contains('zoom-slider') or target.classList.contains('zoom-close-btn') or target.classList.contains('zoom-reset-btn') or target.classList.contains('zoom-value') then exit end
if target.closest('.zoom-close-btn') or target.closest('.zoom-reset-btn') then exit end
set :isDragging to true
set my *transition to 'none'
set rect to my getBoundingClientRect()
set :initialX to clientX - rect.left
set :initialY to clientY - rect.top
halt the event
on mousemove(clientX, clientY) from document
if :isDragging is not true then exit end
halt the event
set currentX to clientX - :initialX
set currentY to clientY - :initialY
set maxX to window.innerWidth - my offsetWidth
set maxY to window.innerHeight - my offsetHeight
set currentX to Math.max(0, Math.min(currentX, maxX))
set currentY to Math.max(0, Math.min(currentY, maxY))
set my *left to `${currentX}px`
set my *bottom to `${window.innerHeight - currentY - my offsetHeight}px`
set my *transform to 'none'
on mouseup from document
if :isDragging is not true then exit end
set :isDragging to false
set my *transition to 'all 0.3s ease'
set position to { bottom: my *bottom, left: my *left }
set localStorage['cv-zoom-position'] to JSON.stringify(position)">
on mousedown(clientX, clientY) if isZoomDragTarget(event.target) call startZoomDrag(me, clientX, clientY) then halt the event end
on mousemove(clientX, clientY) from document if moveZoomDrag(me, clientX, clientY) halt the event end
on mouseup from document call endZoomDrag(me)">
<button
id="zoom-close"