feat: discussion excerpts support

Author: iamdarkle

extend.php

@@ -14,6 +14,7 @@
 use Flarum\Extend;
 use Darkle\Fancybox\WrapImagesInGallery;
 use Darkle\Fancybox\DefineGalleryTemplate;
+use Darkle\Fancybox\AddExcerptToDiscussion;
 
 return [
     (new Extend\Frontend('forum'))
@@ -22,5 +23,11 @@
 
     (new Extend\Formatter)
         ->configure(DefineGalleryTemplate::class)
+        ->configure(AddExcerptToDiscussion::class)
         ->render(WrapImagesInGallery::class),
+ 
+    (new Extend\ApiSerializer(\Flarum\Api\Serializer\DiscussionSerializer::class))
+        ->attribute('excerpt', function ($serializer, $discussion) {
+            return $discussion->firstPost ? $discussion->firstPost->formatContent() : null;
+        }),
 ];

js/dist/forum.js

@@ -1,6 +1,9 @@
 import app from 'flarum/forum/app';
 import {extend} from 'flarum/common/extend';
 import CommentPost from 'flarum/forum/components/CommentPost';
+import DiscussionListItem from 'flarum/forum/components/DiscussionListItem';
+import Discussion from 'flarum/common/models/Discussion';
+import Model from 'flarum/common/Model';
 
 import {Carousel, Fancybox} from '@fancyapps/ui';
 
@@ -11,8 +14,7 @@ app.initializers.add('darkle/fancybox', () => {
     const postBody = this.$('.Post-body');
     if (postBody.length == 0) return;
 
-    // Initialize Carousel for each gallery
-    postBody.children('.fancybox-gallery:not(.fancybox-ready)') // The galleries should be only at the first level of Post-body
+    postBody.children('.fancybox-gallery:not(.fancybox-ready)')
         .addClass('fancybox-ready')
         .each((_, gallery) => {
           new Carousel(gallery, {
@@ -71,4 +73,78 @@ app.initializers.add('darkle/fancybox', () => {
               });
     });
   });
+
+  Discussion.prototype.excerpt = Model.attribute<string>('excerpt');
+
+  extend(DiscussionListItem.prototype, 'infoItems', function(items) {
+    const excerpt = this.attrs.discussion.excerpt();
+    if (excerpt) {
+      items.remove('excerpt');
+      items.add('excerpt', m.trust(excerpt), -100);
+    }
+  });
+
+  extend(DiscussionListItem.prototype, 'oncreate', function() {
+    const excerptBody = this.$('.item-excerpt');
+    if (excerptBody.length == 0) return;
+
+    excerptBody.children('.fancybox-gallery:not(.fancybox-ready)')
+        .addClass('fancybox-ready')
+        .each((_, gallery) => {
+          new Carousel(gallery, {
+            Dots: false,
+            infinite: false,
+            dragFree: false,
+            preload: 0,
+          });
+        });
+
+    excerptBody.find('a[data-fancybox]:not(.fancybox-ready)')
+        .addClass('fancybox-ready')
+        .each((_, el) => {
+          const link = $(el);
+          let isDragging = false;
+          let startX: number, startY: number;
+
+          link
+              .on('mousedown', (e) => {
+                isDragging = false;
+                startX = e.clientX;
+                startY = e.clientY;
+              })
+              .on('mousemove', (e) => {
+                if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
+                  isDragging = true;
+                }
+              })
+              .on('click', (e) => {
+                e.preventDefault();
+                if (isDragging) return;
+                const groupName = link.attr('data-fancybox');
+                const carouselEl = link.closest('.fancybox-gallery');
+                const group = (carouselEl.length > 0 ? carouselEl : excerptBody).find(`a[data-fancybox="${groupName}"]`).toArray();
+                const startIndex = group.indexOf(el);
+
+                Fancybox.fromNodes(group, {
+                  Carousel: {
+                    infinite: false,
+                    preload: 0,
+                  },
+                  Toolbar: {
+                    display: {
+                      left: ['infobar'],
+                      middle: ['rotateCCW', 'rotateCW', 'flipX', 'flipY'],
+                      right: ['slideshow', 'fullscreen', 'close'],
+                    },
+                  },
+                  Images: {
+                    initialSize: 'fit' as 'fit',
+                  },
+                  dragToClose: true,
+                  Hash: false,
+                  startIndex,
+                });
+              });
+    });
+  });
 });

js/dist/forum.js.map

@@ -0,0 +1,45 @@
+<?php
+
+namespace Darkle\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;
+        }
+    }
+}