feat: fancybox v6

Author: iamdarkle

extend.php

@@ -14,6 +14,7 @@
 use Flarum\Extend;
 use Flectar\Fancybox\WrapImagesInGallery;
 use Flectar\Fancybox\DefineGalleryTemplate;
+use Flectar\Fancybox\AddExcerptToDiscussion;
 use Flarum\Discussion\Discussion;
 use Flarum\Api\Resource\DiscussionResource;
 use Flarum\Api\Schema;
@@ -25,6 +26,7 @@
 
     (new Extend\Formatter)
         ->configure(DefineGalleryTemplate::class)
+        ->configure(AddExcerptToDiscussion::class)
         ->render(WrapImagesInGallery::class),
 
     (new Extend\ApiResource(DiscussionResource::class))

js/dist/forum.js

@@ -4,7 +4,7 @@
   "private": true,
   "prettier": "@flarum/prettier-config",
   "dependencies": {
-    "@fancyapps/ui": "^5.0.36",
+    "@fancyapps/ui": "^6.1.0",
     "@flarum/prettier-config": "^1.0.0",
     "flarum-webpack-config": "^3.0.0",
     "webpack": "^5.94.0",

js/dist/forum.js.LICENSE.txt

@@ -17,12 +17,12 @@ app.initializers.add('flectar/flarum-fancybox', () => {
     postBody.children('.fancybox-gallery:not(.fancybox-ready)')
         .addClass('fancybox-ready')
         .each((_, gallery) => {
-          new Carousel(gallery, {
+          Carousel(gallery, {
             Dots: false,
             infinite: false,
             dragFree: false,
             preload: 0,
-          });
+          }).init();
         });
 
     postBody.find('a[data-fancybox]:not(.fancybox-ready)')
@@ -52,7 +52,8 @@ app.initializers.add('flectar/flarum-fancybox', () => {
                 const group = (carouselEl.length > 0 ? carouselEl : postBody).find(`a[data-fancybox="${groupName}"]`).toArray();
                 const startIndex = group.indexOf(el);
 
-                Fancybox.fromNodes(group, {
+                Fancybox.show(group, {
+                  startIndex,
                   Carousel: {
                     infinite: false,
                     preload: 0,
@@ -61,15 +62,14 @@ app.initializers.add('flectar/flarum-fancybox', () => {
                     display: {
                       left: ['infobar'],
                       middle: ['rotateCCW', 'rotateCW', 'flipX', 'flipY'],
-                      right: ['slideshow', 'fullscreen', 'close'],
+                      right: ['slideshow', 'close'],
                     },
                   },
                   Images: {
-                    initialSize: 'fit' as 'fit',
+                    zoom: true,
                   },
                   dragToClose: true,
                   Hash: false,
-                  startIndex,
                 });
               });
         });
@@ -92,12 +92,12 @@ app.initializers.add('flectar/flarum-fancybox', () => {
     excerptBody.children('.fancybox-gallery:not(.fancybox-ready)')
         .addClass('fancybox-ready')
         .each((_, gallery) => {
-          new Carousel(gallery, {
+          Carousel(gallery, {
             Dots: false,
             infinite: false,
             dragFree: false,
             preload: 0,
-          });
+          }).init();
         });
 
     excerptBody.find('a[data-fancybox]:not(.fancybox-ready)')
@@ -127,7 +127,8 @@ app.initializers.add('flectar/flarum-fancybox', () => {
                 const group = (carouselEl.length > 0 ? carouselEl : excerptBody).find(`a[data-fancybox="${groupName}"]`).toArray();
                 const startIndex = group.indexOf(el);
 
-                Fancybox.fromNodes(group, {
+                Fancybox.show(group, {
+                  startIndex,
                   Carousel: {
                     infinite: false,
                     preload: 0,
@@ -136,15 +137,14 @@ app.initializers.add('flectar/flarum-fancybox', () => {
                     display: {
                       left: ['infobar'],
                       middle: ['rotateCCW', 'rotateCW', 'flipX', 'flipY'],
-                      right: ['slideshow', 'fullscreen', 'close'],
+                      right: ['slideshow', 'close'],
                     },
                   },
                   Images: {
-                    initialSize: 'fit' as 'fit',
+                    zoom: true,
                   },
                   dragToClose: true,
                   Hash: false,
-                  startIndex,
                 });
               });
         });

js/dist/forum.js.map

@@ -0,0 +1,47 @@
+<?php
+
+namespace Flectar\Fancybox;
+
+use s9e\TextFormatter\Configurator;
+
+class AddExcerptToDiscussion
+{
+    public function __invoke(Configurator $config)
+    {
+        if ($config->tags->exists('IMG')) {
+            $tag = $config->tags->get('IMG');
+            $originalTemplate = $tag->template;
+
+            $tag->template = <<<XML
+                <xsl:choose>
+                    <xsl:when test="ancestor::DISCUSSION-EXCERPT">
+                        <a data-fancybox="excerpt-gallery" href="{@src}">
+                            <img data-lazy-src="{@src}" alt="{@alt}" class="excerpt-image"/>
+                        </a>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        {$originalTemplate}
+                    </xsl:otherwise>
+                </xsl:choose>
+            XML;
+        }
+
+        if ($config->tags->exists('UPL-IMAGE-PREVIEW')) {
+            $tag = $config->tags->get('UPL-IMAGE-PREVIEW');
+            $originalTemplate = $tag->template;
+
+            $tag->template = <<<XML
+                <xsl:choose>
+                    <xsl:when test="ancestor::DISCUSSION-EXCERPT">
+                        <a data-fancybox="excerpt-gallery" href="{@url}">
+                            <img data-lazy-src="{@url}" alt="" class="excerpt-image"/>
+                        </a>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        {$originalTemplate}
+                    </xsl:otherwise>
+                </xsl:choose>
+            XML;
+        }
+    }
+}