try

iamdarkle · Sep 8, 2024 · 215c3c9 · 215c3c9
1 parent 9a54a70
commit 215c3c9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 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,43 +1,37 @@
 import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import CommentPost from 'flarum/forum/components/CommentPost';
-import { Fancybox } from '@fancyapps/ui';
+
+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 (vnode) {
-    // Initialize Fancybox for single images
-    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) => {
-        if (!node.closest('.fancybox-gallery')) {
-          const src = node.getAttribute('data-src') || node.getAttribute('src');
-          const fancyboxEl = document.createElement('a');
-          fancyboxEl.setAttribute('data-fancybox', 'single');
-          fancyboxEl.href = src;
-          node.parentNode.insertBefore(fancyboxEl, node);
-          fancyboxEl.appendChild(node);
-        }
+  extend(CommentPost.prototype, 'oncreate', function () {
+    const postBody = this.element.querySelector('.Post-body');
+
+    // Initialize Carousel for each gallery
+    postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
+      gallery.id = `gallery-${index}`;
+      new Carousel(gallery, {
+        Dots: false,
       });
+    });
 
-    // Initialize Fancybox for galleries
-    Fancybox.bind('[data-fancybox="gallery"], [data-fancybox="single"]', {
+    // Initialize Fancybox for all galleries and single images
+    Fancybox.bind('[data-fancybox]', {
       Carousel: {
         infinite: false,
       },
-      Slideshow: {
-        playOnStart: true,
-        timeout: 3000,
-      },
       Toolbar: {
         display: {
           left: [],
           middle: [],
-          right: ["slideshow", "close"],
+          right: ["slideshow", "fullscreen", "close"],
         },
       },
-      Images: {
-        zoom: false,
-      },
     });
   });
 });
diff --git a/src/DefineGalleryTemplate.php b/src/DefineGalleryTemplate.php
@@ -9,23 +9,31 @@ class DefineGalleryTemplate
     public function __invoke(Configurator $config)
     {
         $tag = $config->tags->add('FANCYBOX-GALLERY');
-        $tag->template = '<div class="fancybox-gallery"><xsl:apply-templates/></div>';
+        $tag->template = '<div class="fancybox-gallery f-carousel"><xsl:apply-templates/></div>';
 
         $tag = $config->tags->add('FANCYBOX-GALLERY-ITEM');
-        $tag->template = '<xsl:apply-templates/>';
+        $tag->template = '<div class="f-carousel__slide"><xsl:apply-templates/></div>';
 
         if ($config->tags->exists('IMG')) {
             $tag = $config->tags->get('IMG');
             $newTemplate = $tag->template;
             $tag->template = <<<XML
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
-                        <a data-fancybox="gallery" href="{@url}">
-                            $newTemplate
+                        <a data-fancybox="gallery" data-src="{@url}">
+                            <xsl:copy>
+                                <xsl:apply-templates select="@*"/>
+                                <xsl:attribute name="data-lazy-src">
+                                    <xsl:value-of select="@url"/>
+                                </xsl:attribute>
+                                <xsl:apply-templates select="node()"/>
+                            </xsl:copy>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>
-                        $newTemplate
+                        <a data-fancybox="single" href="{@url}">
+                            $newTemplate
+                        </a>
                     </xsl:otherwise>
                 </xsl:choose>
             XML;

diff --git a/src/WrapImagesInGallery.php b/src/WrapImagesInGallery.php
@@ -8,14 +8,17 @@
 class WrapImagesInGallery
 {
     const MATCH_IMG_TAGS = '((?:<IMG[^>]*>(?:(?!<\/IMG>).)*<\/IMG>))';
-    const MATCH_GALLERY_REGEX = '((?:'.self::MATCH_IMG_TAGS.'(?:\n|<br\/>)*){2,})';
+    const MATCH_GALLERY_REGEX = '((?:'.self::MATCH_IMG_TAGS.'(?:\s*(?:<br\/>|<br>|\n)\s*)?){2,})';
 
     public function __invoke(Renderer $renderer, $context, string $xml): string
     {
         return preg_replace_callback('/'.self::MATCH_GALLERY_REGEX.'/m', function ($matches) {
-            $m = preg_replace('/'.self::MATCH_IMG_TAGS.'/m', '<FANCYBOX-GALLERY-ITEM>$1</FANCYBOX-GALLERY-ITEM>', $matches[0]);
-
-            return '<FANCYBOX-GALLERY>' . str_replace('<br/>', '', $m) . '</FANCYBOX-GALLERY>';
+            $images = preg_split('/\s*(?:<br\/>|<br>|\n)\s*/', $matches[0]);
+            $galleryItems = array_map(function($img) {
+                return '<FANCYBOX-GALLERY-ITEM>' . trim($img) . '</FANCYBOX-GALLERY-ITEM>';
+            }, $images);
+
+            return '<FANCYBOX-GALLERY>' . implode('', $galleryItems) . '</FANCYBOX-GALLERY>';
         }, $xml);
     }
 }