bf 6

templates/partials/widgets/zoom-control.html

@@ -1,11 +1,76 @@
 {{define "zoom-control"}}
-<!-- Zoom Control (Fixed Bottom Center, Draggable) -->
-<div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
+<!-- Zoom Control (Fixed Bottom Center, Draggable) - Hyperscript Enhanced -->
+<div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"
+     _="on load
+          if window.innerWidth <= 768
+            exit
+          end
+          set savedZoom to localStorage.getItem('cv-zoom')
+          if savedZoom
+            set my value to savedZoom
+            send input to #zoom-slider
+          end
+          set isVisible to localStorage.getItem('cv-zoom-visible')
+          if isVisible === 'false'
+            add { display: 'none' } to me
+            remove { display: 'none' } from #show-zoom-menu-btn
+          end
+          set savedPos to localStorage.getItem('cv-zoom-position')
+          if savedPos
+            set pos to JSON.parse(savedPos)
+            set my *bottom to pos.bottom
+            set my *left to pos.left
+            set my *transform to 'none'
+          end
+
+        on mousedown(clientX, clientY)
+          if event.target.closest('.zoom-slider, .zoom-close-btn, .zoom-reset-btn') 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 not isDragging 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 not isDragging 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)">
+
     <button
         id="zoom-close"
         class="zoom-close-btn"
         aria-label="{{if eq .Lang "es"}}Cerrar control de zoom{{else}}Close zoom control{{end}}"
-        title="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
+        title="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}"
+        _="on click
+             add { display: 'none' } to #zoom-control
+             remove { display: 'none' } from #show-zoom-menu-btn
+             set localStorage.cv-zoom-visible to 'false'">
         <iconify-icon icon="mdi:close" width="16" height="16"></iconify-icon>
     </button>
 
@@ -23,7 +88,64 @@
         aria-valuemin="25"
         aria-valuemax="175"
         aria-valuenow="100"
-        aria-valuetext="100%">
+        aria-valuetext="100%"
+        _="on input
+             set zoomValue to my value as a Number
+             set zoomLevel to zoomValue / 100
+
+             -- Update display
+             put zoomValue into #zoom-value-current
+             set my @aria-valuenow to zoomValue
+             set my @aria-valuetext to `${zoomValue}%`
+
+             -- Toggle reset button class
+             if zoomValue !== 100
+               add .zoom-not-default to #zoom-reset
+             else
+               remove .zoom-not-default from #zoom-reset
+             end
+
+             -- Apply zoom to wrapper
+             set #zoom-wrapper's *zoom to zoomLevel
+
+             -- Handle width for zoom > 100%
+             if zoomLevel > 1
+               set #zoom-wrapper's *width to 'auto'
+               set #zoom-wrapper's *minWidth to '100%'
+               set #zoom-wrapper's *maxWidth to 'none'
+             else
+               set #zoom-wrapper's *width to ''
+               set #zoom-wrapper's *minWidth to ''
+               set #zoom-wrapper's *maxWidth to ''
+             end
+
+             -- Counter-zoom fixed buttons
+             set inverseZoom to 1 / zoomLevel
+             set #back-to-top's *zoom to inverseZoom
+             set #info-button's *zoom to inverseZoom
+
+             -- Save to localStorage
+             set localStorage.cv-zoom to zoomValue
+
+           on keydown[ctrlKey or metaKey] from document
+             if event.shiftKey exit end
+             if event.key === '+' or event.key === '='
+               halt the event
+               set currentZoom to my value as a Number
+               set newZoom to Math.min(175, currentZoom + 10)
+               set my value to newZoom
+               send input to me
+             else if event.key === '-'
+               halt the event
+               set currentZoom to my value as a Number
+               set newZoom to Math.max(25, currentZoom - 10)
+               set my value to newZoom
+               send input to me
+             else if event.key === '0'
+               halt the event
+               set my value to 100
+               send input to me
+             end">
 
     <span class="zoom-value zoom-value-max" aria-hidden="true">175</span>
 
@@ -32,7 +154,11 @@
         class="zoom-reset-btn"
         aria-label="{{if eq .Lang "es"}}Restablecer zoom al 100%{{else}}Reset zoom to 100%{{end}}"
         title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}"
-        aria-live="polite">
+        aria-live="polite"
+        _="on click
+             set #zoom-slider's value to 100
+             send input to #zoom-slider
+             send focus to #zoom-slider">
         <span id="zoom-value-current">100</span>
     </button>
 </div>