Merge branch 'photoswipe' into beta

src/services/lightbox.js

@@ -30,6 +30,15 @@ const fullscreenIconsHtml = `<svg aria-hidden="true" class="pswp__icn" viewBox="
 function initLightbox() {
   const lightbox = new PhotoSwipeLightbox({
     clickToCloseNonZoomable: false,
+    tapAction(_, event) {
+      // Close lightbox on background tap
+      if (event.target.classList.contains('pswp__item')) {
+        this.close();
+      } else {
+        // Toggle controls (default behavior)
+        this.element?.classList.toggle('pswp--ui-visible');
+      }
+    },
     pswpModule: () => import('photoswipe'),
   });
 
@@ -61,6 +70,19 @@ function initLightbox() {
     lightbox.on('close', () => fsApi.isFullscreen() && fsApi.exit());
   });
 
+  lightbox.on('bindEvents', () => {
+    const h = (e) => {
+      e.preventDefault();
+      lightbox.pswp.close();
+    };
+    window.addEventListener('scroll', h, { passive: false });
+    document.addEventListener('wheel', h, { passive: false });
+    lightbox.on('destroy', () => {
+      window.removeEventListener('scroll', h, { passive: false });
+      document.removeEventListener('wheel', h, { passive: false });
+    });
+  });
+
   // Add filters for the correct open/close animation
   lightbox.addFilter('placeholderSrc', (placeholderSrc, content) => {
     const thumb = document.getElementById(content.data.pid);