carousels test

extend.php

@@ -9,10 +9,18 @@
  * file that was distributed with this source code.
  */
 
+namespace Darkle\Fancybox;
+
 use Flarum\Extend;
+use Darkle\Fancybox\DefineGalleryTemplate;
+use Darkle\Fancybox\WrapImagesInGallery;
 
 return [
     (new Extend\Frontend('forum'))
         ->js(__DIR__.'/js/dist/forum.js')
-        ->css(__DIR__ . '/less/forum.less'),
+        ->css(__DIR__.'/less/forum.less'),
+
+    (new Extend\Formatter)
+        ->configure(DefineGalleryTemplate::class)
+        ->render(WrapImagesInGallery::class),
 ];

js/src/forum/index.js

@@ -4,7 +4,8 @@ import CommentPost from 'flarum/forum/components/CommentPost';
 import { Fancybox } from '@fancyapps/ui';
 
 app.initializers.add('darkle/fancybox', () => {
-  extend(CommentPost.prototype, 'oncreate', function (vnode) {
+  extend(CommentPost.prototype, 'oncreate', function () {
+    // Handle individual 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) => {
@@ -16,24 +17,36 @@ app.initializers.add('darkle/fancybox', () => {
         fancyboxEl.appendChild(node);
       });
 
+    // Initialize fancybox for individual images
     Fancybox.bind('[data-fancybox="gallery"]', {
-      Carousel: {
-        infinite: false,
-      },
-      Slideshow: {
-        playOnStart: true,
-        timeout: 3000,
-      },
-      Toolbar: {
-        display: {
-          left: [],
-          middle: [],
-          right: ["slideshow", "close"],
-        },
-      },
       Images: {
         zoom: false,
       },
     });
+
+    // Handle galleries (carousels)
+    this.element
+      .querySelectorAll('.f-carousel[data-fancybox="gallery"]')
+      .forEach((carousel) => {
+        Fancybox.bind(carousel, {
+          Carousel: {
+            infinite: false,
+          },
+          Slideshow: {
+            playOnStart: true,
+            timeout: 3000,
+          },
+          Toolbar: {
+            display: {
+              left: [],
+              middle: [],
+              right: ["slideshow", "close"],
+            },
+          },
+          Images: {
+            zoom: false,
+          },
+        });
+      });
   });
 });

src/DefineGalleryTemplate.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Darkle\Fancybox;
+
+use s9e\TextFormatter\Configurator;
+
+class DefineGalleryTemplate
+{
+    public function __invoke(Configurator $config)
+    {
+        $tag = $config->tags->add('IMG-GALLERY');
+        $tag->template = <<<XML
+        <div class="f-carousel" data-fancybox="gallery">
+            <div class="f-carousel__track">
+                <xsl:apply-templates/>
+            </div>
+        </div>
+        XML;
+
+        $tag = $config->tags->add('IMG-GALLERY-ITEM');
+        $tag->template = <<<XML
+            <div class="f-carousel__slide">
+                <xsl:apply-templates/>
+            </div>
+        XML;
+    }
+}

src/WrapImagesInGallery.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Darkle\Fancybox;
+
+use s9e\TextFormatter\Renderer;
+use s9e\TextFormatter\Utils;
+
+class WrapImagesInGallery
+{
+    const MATCH_IMG_TAGS = '((?:<UPL-IMAGE-PREVIEW[^>]*>(?:(?!<\/UPL-IMAGE-PREVIEW>).)*<\/UPL-IMAGE-PREVIEW>)|(?:<IMG[^>]*>(?:(?!<\/IMG>).)*<\/IMG>))';
+    const MATCH_GALLERY_REGEX = '((?:'.self::MATCH_IMG_TAGS.'(?:\n|<br\/>)*){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', '<IMG-GALLERY-ITEM>$1</IMG-GALLERY-ITEM>', $matches[0]);
+
+            return '<IMG-GALLERY>' . str_replace('<br/>', '', $m) . '</IMG-GALLERY>';
+        }, $xml);
+    }
+}