refactor(lightbox): move state to html and use a more robust global click listener

2026-02-19 18:37:46 +01:00
parent af4cc2ae48
commit dd9bad935e
2 changed files with 42 additions and 18 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -2,6 +2,9 @@
 <html lang="{{@site.lang}}" 
    x-data="{ 
        theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'),
+        mobileMenuOpen: false, 
+        lightboxOpen: false, 
+        lightboxImage: '',
        init() {
            $watch('theme', val => {
                localStorage.setItem('theme', val);
@@ -9,8 +12,19 @@
            });
            document.documentElement.setAttribute('data-theme', this.theme);
            document.documentElement.classList.remove('hidden');
+        },
+        handleGlobalClick(e) {
+            if (this.lightboxOpen && e.target.closest('#lightbox')) return;
+            
+            const img = e.target.closest('img');
+            if (img && img.src && !img.closest('a') && img.closest('.kg-image-card, .post-content, .post-feature-image')) {
+                e.preventDefault();
+                this.lightboxImage = img.src;
+                this.lightboxOpen = true;
+            }
        }
    }"
+    @click.window="handleGlobalClick($event)"
    :data-theme="theme"
    class="hidden">
 <head>
@@ -27,14 +41,7 @@
 </head>
 <body class="{{body_class}} font-sans antialiased" hx-boost="true">

-    <div class="min-h-screen flex flex-col" 
-         x-data="{ mobileMenuOpen: false, lightboxOpen: false, lightboxImage: '' }"
-         @click="const img = $event.target.closest('.kg-image-card img, .post-content img, .post-feature-image img');
-                 if (img && img.src && !img.closest('a')) { 
-                    $event.preventDefault();
-                    lightboxImage = img.src; 
-                    lightboxOpen = true; 
-                 }">
+    <div class="min-h-screen flex flex-col">
        {{> header}}

        <main class="flex-grow">
@@ -44,16 +51,7 @@
        {{> footer}}

        {{> mobile-menu}}
-
-        <div id="lightbox" 
-            x-show="lightboxOpen" 
-            x-transition 
-            @click="lightboxOpen = false"
-            class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
-            x-cloak>
-            <button @click.stop="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
-            <img :src="lightboxImage" alt="Lightbox image" class="max-w-full max-h-full" @click.stop>
-        </div>
+        {{> lightbox}}
    </div>

    {{ghost_foot}}