txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added zoom in buttons

Browse Source
This commit is contained in:
juanatsap
2025-11-16 12:48:12 +00:00
parent 25e9ebafe7
commit ac0cf15eb9
55 changed files with 2625 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+1
View File
@@ -138,6 +138,7 @@
{{template "error-toast" .}}
{{template "back-to-top" .}}
{{template "info-button" .}}
{{template "zoom-toggle-button" .}}
{{template "shortcuts-button" .}}
{{template "info-modal" .}}
{{template "shortcuts-modal" .}}
templates/partials/navigation/hamburger-menu.html
+1 -6
View File
@@ -73,12 +73,7 @@
<iconify-icon icon="mdi:arrow-expand-all" width="20" height="20"></iconify-icon>
<span>{{if eq .Lang "es"}}Expandir Todo{{else}}Expand All{{end}}</span>
</a>
<a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action" style="display: none;"
_="on click
halt the event
remove { display: 'none' } from #zoom-control
add { display: 'none' } to me
set localStorage['cv-zoom-visible'] to 'true'">
<a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action" style="display: none;">
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
<span>{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}</span>
</a>
templates/partials/widgets/zoom-control.html
+40 -24
View File
@@ -1,6 +1,6 @@
{{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}}"
<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
if window.innerWidth <= 768
exit
@@ -10,10 +10,17 @@
set my value to savedZoom
send input to #zoom-slider
end
-- Check visibility preference: show only if explicitly enabled or first visit
set isVisible to localStorage.getItem('cv-zoom-visible')
if isVisible is 'false'
add { display: 'none' } to me
remove { display: 'none' } from #show-zoom-menu-btn
log 'Zoom control loading. cv-zoom-visible value:', isVisible
-- Show ONLY if explicitly set to 'true' (hidden by default)
if isVisible is 'true'
log 'Showing zoom control'
remove .zoom-hidden from me
add .zoom-hidden to #show-zoom-menu-btn
else
log 'Keeping zoom control hidden'
-- Already hidden via initial class, no action needed
end
set savedPos to localStorage.getItem('cv-zoom-position')
if savedPos
@@ -24,24 +31,39 @@
end
on mousedown(clientX, clientY)
if event.target.closest('.zoom-slider, .zoom-close-btn, .zoom-reset-btn') exit end
-- Check if click is on interactive elements (slider, buttons)
-- IMPORTANT: Don't halt event for interactive elements so their click handlers work
set target to event.target
set targetTag to target.tagName
set isDragging to true
-- Exit if clicking on interactive elements
if targetTag is 'INPUT' exit end
if targetTag is 'BUTTON' exit end
if target.classList.contains('zoom-slider') exit end
if target.classList.contains('zoom-close-btn') exit end
if target.classList.contains('zoom-reset-btn') exit end
if target.classList.contains('zoom-value') exit end
if target.closest('.zoom-close-btn') exit end
if target.closest('.zoom-reset-btn') exit end
-- Only start dragging if clicked on the zoom control background
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
set :initialX to clientX - rect.left
set :initialY to clientY - rect.top
-- Prevent text selection during drag
halt the event
on mousemove(clientX, clientY) from document
if isDragging is not true exit end
if :isDragging is not true exit end
halt the event
set currentX to clientX - initialX
set currentY to clientY - initialY
set currentX to clientX - :initialX
set currentY to clientY - :initialY
set maxX to window.innerWidth - my offsetWidth
set maxY to window.innerHeight - my offsetHeight
@@ -54,9 +76,9 @@
set my *transform to 'none'
on mouseup from document
if isDragging is not true exit end
if :isDragging is not true exit end
set isDragging to false
set :isDragging to false
set my *transition to 'all 0.3s ease'
set position to { bottom: my *bottom, left: my *left }
@@ -66,12 +88,8 @@
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>
title="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
<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>
@@ -119,11 +137,9 @@
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
set #shortcuts-button's *zoom to inverseZoom
-- Counter-zoom fixed buttons to keep them at original size
-- These buttons are outside zoom-wrapper, so they don't need counter-zoom
-- Removing this code as it causes incorrect sizing
-- Save to localStorage
set localStorage['cv-zoom'] to zoomValue">
templates/partials/widgets/zoom-toggle-button.html
+10
View File
@@ -0,0 +1,10 @@
{{define "zoom-toggle-button"}}
<!-- Zoom Toggle Button (Fixed Right, above shortcuts button) -->
<button
id="zoom-toggle-button"
class="fixed-btn zoom-toggle-btn no-print"
aria-label="{{if eq .Lang "es"}}Alternar control de zoom{{else}}Toggle zoom control{{end}}"
title="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
<iconify-icon icon="mdi:magnify" width="28" height="28"></iconify-icon>
</button>
{{end}}