From fd734635d9fc18696f77f40b7eb1630ba11600d2 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 30 Nov 2025 06:33:42 +0000
Subject: [PATCH] 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
---
 static/hyperscript/utils._hs                  | 19 +++++++++++++++++++
 templates/partials/modals/info-modal.html     |  5 +----
 templates/partials/modals/pdf-modal.html      |  5 +----
 .../partials/modals/shortcuts-modal.html      |  5 +----
 templates/partials/widgets/back-to-top.html   |  4 +---
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/static/hyperscript/utils._hs b/static/hyperscript/utils._hs
index 1b74b37..4c5d61d 100644
--- a/static/hyperscript/utils._hs
+++ b/static/hyperscript/utils._hs
@@ -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
 -- ==============================================================================
diff --git a/templates/partials/modals/info-modal.html b/templates/partials/modals/info-modal.html
index 3efd50d..8f823a4 100644
--- a/templates/partials/modals/info-modal.html
+++ b/templates/partials/modals/info-modal.html
@@ -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>
diff --git a/templates/partials/modals/pdf-modal.html b/templates/partials/modals/pdf-modal.html
index 97cdf13..21069a7 100644
--- a/templates/partials/modals/pdf-modal.html
+++ b/templates/partials/modals/pdf-modal.html
@@ -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">
diff --git a/templates/partials/modals/shortcuts-modal.html b/templates/partials/modals/shortcuts-modal.html
index 927550c..ef349e4 100644
--- a/templates/partials/modals/shortcuts-modal.html
+++ b/templates/partials/modals/shortcuts-modal.html
@@ -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>
diff --git a/templates/partials/widgets/back-to-top.html b/templates/partials/widgets/back-to-top.html
index e2d6e09..cfa5d93 100644
--- a/templates/partials/widgets/back-to-top.html
+++ b/templates/partials/widgets/back-to-top.html
@@ -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}}