try

iamdarkle · Sep 9, 2024 · 6be9ebe · 6be9ebe
1 parent 8150c8c
commit 6be9ebe
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 21 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
@@ -1,28 +1,75 @@
 import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import CommentPost from 'flarum/forum/components/CommentPost';
-
 import { Carousel } from '@fancyapps/ui/dist/carousel/carousel.esm.js';
 import '@fancyapps/ui/dist/carousel/carousel.css';
-
 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 () {
+  extend(CommentPost.prototype, 'oninit', function() {
+    this.fancyboxInitialized = false;
+    this.carousels = new Map();
+    this.lastFancyboxContent = '';
+  });
+
+  extend(CommentPost.prototype, 'oncreate', function() {
     this.initFancybox();
+    this.setupContentObserver();
   });
 
-  extend(CommentPost.prototype, 'onupdate', function () {
+  extend(CommentPost.prototype, 'onupdate', function() {
     this.initFancybox();
   });
 
-  CommentPost.prototype.initFancybox = function () {
+  extend(CommentPost.prototype, 'onremove', function() {
+    this.cleanupFancybox();
+    this.disconnectContentObserver();
+  });
+
+  CommentPost.prototype.setupContentObserver = function() {
+    const postBody = this.element.querySelector('.Post-body');
+    if (postBody) {
+      this.contentObserver = new MutationObserver(() => {
+        this.initFancybox();
+      });
+
+      this.contentObserver.observe(postBody, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+  };
+
+  CommentPost.prototype.disconnectContentObserver = function() {
+    if (this.contentObserver) {
+      this.contentObserver.disconnect();
+    }
+  };
+
+  CommentPost.prototype.cleanupFancybox = function() {
+    Fancybox.close();
+    this.carousels.forEach(carousel => carousel.destroy());
+    this.carousels.clear();
+    this.fancyboxInitialized = false;
+  };
+
+  CommentPost.prototype.initFancybox = function() {
     const postBody = this.element.querySelector('.Post-body');
     if (!postBody) return;
 
+    const currentContent = postBody.innerHTML;
+    if (this.lastFancyboxContent === currentContent && this.fancyboxInitialized) return;
+
+    this.lastFancyboxContent = currentContent;
+    this.cleanupFancybox();
+    this.initializeFancyboxInstances(postBody);
+    this.fancyboxInitialized = true;
+  };
+
+  CommentPost.prototype.initializeFancyboxInstances = function(postBody) {
     // Initialize Carousel for each gallery
-    const carousels = new Map();
     postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
       if (!gallery.id) {
         gallery.id = `gallery-${index}`;
@@ -31,10 +78,10 @@ app.initializers.add('darkle/fancybox', () => {
           infinite: false,
           dragFree: false,
         });
-        carousels.set(gallery.id, carousel);
+        this.carousels.set(gallery.id, carousel);
       }
     });
-
+  
     const fancyboxOptions = {
       Carousel: {
         infinite: false,
@@ -54,51 +101,53 @@ app.initializers.add('darkle/fancybox', () => {
           const slide = fancybox.getSlide();
           const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
           if (carouselEl) {
-            const carousel = carousels.get(carouselEl.id);
+            const carousel = this.carousels.get(carouselEl.id);
             if (carousel) {
-              // Correctly align the slide index
               carousel.slideTo(slide.index, { friction: 0 });
             }
           }
         },
+        "close": (fancybox, event) => {
+          event.preventDefault();
+        },
       },
       dragToClose: true,
     };
-
+  
     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) => {
         e.preventDefault();
         if (!isDragging) {
           const groupName = link.getAttribute('data-fancybox');
           const group = postBody.querySelectorAll(`a[data-fancybox="${groupName}"]`);
           const index = Array.from(group).indexOf(link);
-
+  
           const fancyboxInstance = Fancybox.fromNodes(Array.from(group), {
             ...fancyboxOptions,
             startIndex: index,
           });
-
+  
           // Sync slide changes between Carousel and Fancybox
           fancyboxInstance.on('Carousel.ready Carousel.change', (fancybox) => {
             const slide = fancybox.getSlide();
             const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
             if (carouselEl) {
-              const carousel = carousels.get(carouselEl.id);
+              const carousel = this.carousels.get(carouselEl.id);
               if (carousel) {
                 // Ensure indices are correctly aligned
                 carousel.slideTo(slide.index, { friction: 0 });
@@ -108,5 +157,4 @@ app.initializers.add('darkle/fancybox', () => {
         }
       });
     });
-  };
-});
+  };