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:
@@ -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,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,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>
|
||||
|
||||
@@ -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}}
|
||||
|
||||
Reference in New Issue
Block a user