try

iamdarkle · Sep 8, 2024 · 41e1260 · 41e1260
1 parent 9499e76
commit 41e1260
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 46 deletions.
diff --git a/js/dist/forum.js b/js/dist/forum.js
diff --git a/js/dist/forum.js.map b/js/dist/forum.js.map
diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -9,51 +9,96 @@ import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';
 import '@fancyapps/ui/dist/fancybox/fancybox.css';
 
 app.initializers.add('darkle/fancybox', () => {
-  extend(CommentPost.prototype, 'oncreate', function () {
-    this.initFancybox();
+  extend(CommentPost.prototype, 'oninit', function() {
+    this.initFancybox = () => {
+      const postBody = this.element.querySelector('.Post-body');
+      if (!postBody) return;
+
+      // Initialize Carousel for each gallery
+      const carousels = new Map();
+      postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
+        if (!gallery.id) {
+          gallery.id = `gallery-${index}`;
+          const carousel = new Carousel(gallery, {
+            Dots: false,
+            infinite: false,
+            dragFree: true,
+          });
+          carousels.set(gallery.id, carousel);
+        }
+      });
+
+      // Initialize Fancybox
+      Fancybox.bind(postBody, '[data-fancybox]', {
+        Carousel: {
+          infinite: false,
+        },
+        Toolbar: {
+          display: {
+            left: [],
+            middle: [],
+            right: ["slideshow", "fullscreen", "close"],
+          },
+        },
+        Images: {
+          initialSize: 'fit',
+        },
+        on: {
+          done: (fancybox, slide) => {
+            const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
+            if (carouselEl) {
+              const carousel = carousels.get(carouselEl.id);
+              if (carousel) {
+                carousel.slideTo(slide.index, { friction: 0 });
+              }
+            }
+          },
+          "Carousel.change": (fancybox, carousel, slideIndex) => {
+            const slide = fancybox.getSlide();
+            const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
+            if (carouselEl) {
+              const carousel = carousels.get(carouselEl.id);
+              if (carousel) {
+                carousel.slideTo(slideIndex, { friction: 0 });
+              }
+            }
+          },
+        },
+        dragToClose: false,
+      });
+
+      // Prevent default link behavior and handle dragging
+      postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
+        let isDragging = false;
+        let startX, startY;
+
+        link.addEventListener('mousedown', (e) => {
+          isDragging = false;
+          startX = e.clientX;
+          startY = e.clientY;
+        });
+
+        link.addEventListener('mousemove', (e) => {
+          if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
+            isDragging = true;
+          }
+        });
+
+        link.addEventListener('click', (e) => {
+          if (isDragging) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        });
+      });
+    };
   });
 
-  extend(CommentPost.prototype, 'onupdate', function () {
+  extend(CommentPost.prototype, 'oncreate', function() {
     this.initFancybox();
   });
 
-  CommentPost.prototype.initFancybox = function () {
-    const postBody = this.element.querySelector('.Post-body');
-    if (!postBody) return;
-
-    // Initialize Carousel for each gallery
-    postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
-      if (!gallery.id) {
-        gallery.id = `gallery-${index}`;
-        new Carousel(gallery, {
-          Dots: false,
-          infinite: false,
-        });
-      }
-    });
-
-    // Initialize Fancybox
-    Fancybox.bind(postBody, '[data-fancybox]', {
-      Carousel: {
-        infinite: false,
-      },
-      Toolbar: {
-        display: {
-          left: [],
-          middle: [],
-          right: ["slideshow", "fullscreen", "close"],
-        },
-      },
-      Images: {
-        initialSize: 'fit',
-      },
-    });
-
-    // Prevent default link behavior
-    postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
-      link.onclick = (e) => {
-        e.preventDefault();
-      };
-    });
-  };
+  extend(CommentPost.prototype, 'onupdate', function() {
+    this.initFancybox();
+  });
 });
diff --git a/src/DefineGalleryTemplate.php b/src/DefineGalleryTemplate.php
@@ -21,12 +21,24 @@ public function __invoke(Configurator $config)
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
                         <a data-fancybox="gallery" href="{@url}">
-                            $newTemplate
+                            <xsl:copy>
+                                <xsl:apply-templates select="@*"/>
+                                <xsl:attribute name="data-src">
+                                    <xsl:value-of select="@url"/>
+                                </xsl:attribute>
+                                <xsl:apply-templates/>
+                            </xsl:copy>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>
                         <a data-fancybox="single" href="{@url}">
-                            $newTemplate
+                            <xsl:copy>
+                                <xsl:apply-templates select="@*"/>
+                                <xsl:attribute name="data-src">
+                                    <xsl:value-of select="@url"/>
+                                </xsl:attribute>
+                                <xsl:apply-templates/>
+                            </xsl:copy>
                         </a>
                     </xsl:otherwise>
                 </xsl:choose>