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 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) 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"
        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 call hideZoomControl()">
        <iconify-icon icon="mdi:close" width="16" height="16" style="pointer-events: none;"></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="300"
        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="300"
        aria-valuenow="100"
        aria-valuetext="100%"
        _="on input call handleZoomInput(me)">

    <span class="zoom-value zoom-value-max" aria-hidden="true">300</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 call handleZoomReset()">
        <span id="zoom-value-current">100</span>
    </button>
</div>
{{end}}