feat: add draggable zoom control with close button and menu toggle

- Add close button (X) to zoom control widget
- Make zoom control draggable anywhere on screen
- Persist dragged position in localStorage (cv-zoom-position)
- Add "Zoom" button to action bar to show control when hidden
- Persist visibility state in localStorage (cv-zoom-visible)
- Cursor changes to "move" to indicate draggability
- Interactive elements (slider, buttons) don't trigger drag
- Position stays within viewport bounds
- All features work on desktop only (zoom hidden on mobile)
This commit is contained in:
juanatsap
2025-11-12 15:09:27 +00:00
parent c89bb43fc8
commit 1c00421bd2
3 changed files with 192 additions and 3 deletions
+18 -1
View File
@@ -174,6 +174,15 @@
<!-- Right: Action buttons -->
<div class="action-buttons-right">
<button
id="show-zoom-btn"
class="action-btn zoom-toggle-btn"
onclick="showZoomControl()"
style="display: none;"
aria-label="{{if eq .Lang "es"}}Mostrar control de zoom{{else}}Show zoom control{{end}}">
<iconify-icon icon="mdi:magnify" width="18" height="18"></iconify-icon>
{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}
</button>
<button
class="action-btn pdf-btn"
onclick="openPdfModal()"
@@ -454,8 +463,16 @@
</div>
</div>
<!-- Zoom Control (Fixed Bottom Center) -->
<!-- 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}}">
<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}}">
<iconify-icon icon="mdi:close" width="16" height="16"></iconify-icon>
</button>
<span class="zoom-value zoom-value-min" aria-hidden="true">50</span>
<input