cv-site/templates/partials/widgets/zoom-control.html

{{define "zoom-control"}}
<!-- 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}}"
        _="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>

    <span class="zoom-value zoom-value-min" aria-hidden="true">25</span>

    <input
        type="range"
        id="zoom-slider"
        class="zoom-slider"
        min="25"
        max="175"
        step="1"
        value="100"
        aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
        aria-valuemin="25"
        aria-valuemax="175"
        aria-valuenow="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>

    <button
        id="zoom-reset"
        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"
        _="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>
{{end}}