try

iamdarkle · Sep 8, 2024 · abc92bc · abc92bc
1 parent 701f5c5
commit abc92bc
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 44 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
@@ -7,52 +7,70 @@ import '@fancyapps/ui/dist/carousel/carousel.css';
 
 app.initializers.add('darkle/fancybox', () => {
   extend(CommentPost.prototype, 'oncreate', function () {
-    // Wrap images and initialize Carousel and Fancybox
-    this.element
-      .querySelectorAll('.Post-body img:not(.emoji):not(.Avatar):not(.PostMeta-ip img):not([data-reaction]):not([data-link-preview]):not(.flamoji img):not(.countryFlag):not(.no-fancybox)')
-      .forEach((node) => {
-        const src = node.getAttribute('data-src') || node.getAttribute('src');
-        const parent = node.parentNode;
-
-        // Check if it's part of a gallery
-        if (parent && !parent.closest('.f-carousel__slide')) {
-          // Create a carousel slide container
-          const slide = document.createElement('div');
-          slide.classList.add('f-carousel__slide');
-          slide.setAttribute('data-fancybox', 'gallery');
-          slide.setAttribute('data-src', src);
-          slide.appendChild(node);
-
-          // Insert the slide into a carousel track
-          const carouselTrack = document.createElement('div');
-          carouselTrack.classList.add('f-carousel__track');
-          carouselTrack.appendChild(slide);
-
-          // Insert the carousel viewport
-          const carouselViewport = document.createElement('div');
-          carouselViewport.classList.add('f-carousel__viewport');
-          carouselViewport.appendChild(carouselTrack);
-
-          // Insert the full carousel container
-          const carouselContainer = document.createElement('div');
-          carouselContainer.classList.add('f-carousel');
-          carouselContainer.appendChild(carouselViewport);
-
-          parent.insertBefore(carouselContainer, node);
-        }
-      });
-
-    // Initialize Carousel for each gallery
-    this.element.querySelectorAll('.f-carousel').forEach((carouselElement) => {
-      new Carousel(carouselElement, {
-        Dots: false,
-        infinite: true,
-      });
+    const images = Array.from(
+      this.element.querySelectorAll(
+        '.Post-body img:not(.emoji):not(.Avatar):not(.PostMeta-ip img):not([data-reaction]):not([data-link-preview]):not(.flamoji img):not(.countryFlag):not(.no-fancybox)'
+      )
+    );
+
+    let galleryImages = [];
+    images.forEach((img, index) => {
+      // Check if the image is part of a gallery
+      const isPartOfGallery =
+        (index > 0 && images[index - 1].nextElementSibling === img) ||
+        (index < images.length - 1 && images[index + 1].previousElementSibling === img);
+
+      if (isPartOfGallery) {
+        galleryImages.push(img);
+      } else {
+        // Handle single image
+        wrapSingleImage(img);
+      }
     });
 
+    if (galleryImages.length > 0) {
+      wrapGalleryImages(galleryImages);
+    }
+
     // Initialize Fancybox for all elements with data-fancybox attribute
-    Fancybox.bind('[data-fancybox="gallery"]', {
+    Fancybox.bind('[data-fancybox]', {
       // Custom options can be added here
     });
   });
+
+  function wrapSingleImage(img) {
+    const src = img.getAttribute('data-src') || img.getAttribute('src');
+    if (!img.closest('a[data-fancybox]')) {
+      const fancyboxEl = document.createElement('a');
+      fancyboxEl.setAttribute('data-fancybox', 'single');
+      fancyboxEl.href = src;
+      img.parentNode.insertBefore(fancyboxEl, img);
+      fancyboxEl.appendChild(img);
+    }
+  }
+
+  function wrapGalleryImages(images) {
+    const carouselTrack = document.createElement('div');
+    carouselTrack.classList.add('f-carousel__track');
+
+    images.forEach((img) => {
+      const src = img.getAttribute('data-src') || img.getAttribute('src');
+      const slide = document.createElement('div');
+      slide.classList.add('f-carousel__slide');
+      slide.setAttribute('data-fancybox', 'gallery');
+      slide.setAttribute('data-src', src);
+      slide.appendChild(img);
+      carouselTrack.appendChild(slide);
+    });
+
+    const carouselViewport = document.createElement('div');
+    carouselViewport.classList.add('f-carousel__viewport');
+    carouselViewport.appendChild(carouselTrack);
+
+    const carouselContainer = document.createElement('div');
+    carouselContainer.classList.add('f-carousel');
+    carouselContainer.appendChild(carouselViewport);
+
+    images[0].parentNode.insertBefore(carouselContainer, images[0]);
+  }
 });