refactor: Extract modal backdrop close and scrollToTop to functions

- Add closeOnBackdrop(modal, evt) to utils._hs for modal backdrop clicks
- Add scrollToTop(evt) to utils._hs for smooth scroll to top
- Simplify 3 modal templates (shortcuts, info, pdf) from 4 lines to 1
- Simplify back-to-top button from 3 lines to 1
This commit is contained in:
juanatsap
2025-11-30 06:33:42 +00:00
parent 74bb3747a9
commit fd734635d9
5 changed files with 23 additions and 15 deletions
+19
View File
@@ -170,6 +170,25 @@ def setFooterHover(show)
end
end
-- ==============================================================================
-- MODAL HELPERS
-- ==============================================================================
-- Close modal when clicking backdrop (outside content)
def closeOnBackdrop(modal, evt)
if evt.target is modal
call modal.close()
end
end
-- ==============================================================================
-- SCROLL HELPERS
-- ==============================================================================
-- Smooth scroll to top of page
def scrollToTop(evt)
call evt.preventDefault()
call window.scrollTo({top: 0, behavior: 'smooth'})
end
-- ==============================================================================
-- NAVIGATION SCROLL
-- ==============================================================================
+1 -4
View File
@@ -1,10 +1,7 @@
{{define "info-modal"}}
<!-- Info Modal - Native Dialog -->
<dialog id="info-modal" class="info-modal no-print"
_="on click
if event.target is me
call me.close()
end">
_="on click call closeOnBackdrop(me, event)">
<div class="info-modal-content">
<button class="info-modal-close" onclick="document.getElementById('info-modal').close()" aria-label="Close">
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
+1 -4
View File
@@ -1,10 +1,7 @@
{{define "pdf-modal"}}
<!-- PDF Download Modal - Interactive Thumbnails -->
<dialog id="pdf-modal" class="info-modal pdf-download-modal no-print"
_="on click
if event.target is me
call me.close()
end">
_="on click call closeOnBackdrop(me, event)">
<div class="info-modal-content" id="pdf-modal-content">
<!-- Loading Overlay -->
<div class="pdf-loading-overlay" id="pdf-loading-overlay">
@@ -1,10 +1,7 @@
{{define "shortcuts-modal"}}
<!-- Keyboard Shortcuts Modal - Native Dialog -->
<dialog id="shortcuts-modal" class="info-modal no-print"
_="on click
if event.target is me
call me.close()
end">
_="on click call closeOnBackdrop(me, event)">
<div class="info-modal-content">
<button class="info-modal-close" onclick="document.getElementById('shortcuts-modal').close()" aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
+1 -3
View File
@@ -5,9 +5,7 @@
aria-label="{{if eq .Lang "es"}}Volver arriba{{else}}Back to top{{end}}"
data-tooltip="{{if eq .Lang "es"}}Volver arriba{{else}}Back to top{{end}}"
style="display: none;"
_="on click
call event.preventDefault()
call window.scrollTo({top: 0, behavior: 'smooth'})">
_="on click call scrollToTop(event)">
<iconify-icon icon="mdi:arrow-up" width="24" height="24"></iconify-icon>
</button>
{{end}}