Skip to content

Commit e5fd8df

Browse files
iamdarkleiamdarkle
committed
feat: add excerpt logic and fancybox changes
1 parent 9c8cbaa commit e5fd8df

File tree

6 files changed

+212
-121
lines changed

6 files changed

+212
-121
lines changed

‎extend.php‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,12 @@
1818
->js(__DIR__.'/js/dist/forum.js')
1919
->css(__DIR__.'/less/forum.less'),
2020

21-
(new Extend\ServiceProvider())
22-
->register(FancyboxServiceProvider::class),
23-
2421
(new Extend\Formatter)
22+
->configure(ConfigureFancybox::class)
2523
->render(WrapImagesInGallery::class),
26-
];
24+
25+
(new Extend\ApiSerializer(\Flarum\Api\Serializer\DiscussionSerializer::class))
26+
->attribute('excerpt', function ($serializer, $discussion) {
27+
return $discussion->firstPost ? $discussion->firstPost->formatContent() : null;
28+
}),
29+
];

‎js/dist/forum.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/dist/forum.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/src/forum/index.ts‎

Lines changed: 140 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,156 @@
11
import app from 'flarum/forum/app';
2-
import {extend} from 'flarum/common/extend';
2+
import { extend } from 'flarum/common/extend';
33
import CommentPost from 'flarum/forum/components/CommentPost';
4+
import DiscussionListItem from 'flarum/forum/components/DiscussionListItem';
5+
import Discussion from 'flarum/common/models/Discussion';
6+
import Model from 'flarum/common/Model';
47

5-
import {Carousel, Fancybox} from '@fancyapps/ui';
8+
import { Carousel, Fancybox } from '@fancyapps/ui';
69

710
app.initializers.add('flectar/flarum-fancybox', () => {
11+
Discussion.prototype.excerpt = Model.attribute<string>('excerpt');
12+
13+
extend(DiscussionListItem.prototype, 'infoItems', function (items) {
14+
const excerpt = this.attrs.discussion.excerpt();
15+
if (excerpt) {
16+
items.remove('excerpt');
17+
// @ts-ignore
18+
items.add('excerpt', m.trust(excerpt), -100);
19+
}
20+
});
21+
22+
extend(DiscussionListItem.prototype, 'oncreate', function () {
23+
const excerptBody = this.$('.item-excerpt');
24+
if (excerptBody.length == 0) return;
25+
26+
excerptBody
27+
.children('.fancybox-gallery:not(.fancybox-ready)')
28+
.addClass('fancybox-ready')
29+
.each((_, gallery) => {
30+
new Carousel(gallery, {
31+
Dots: false,
32+
infinite: false,
33+
dragFree: false,
34+
preload: 0,
35+
});
36+
});
37+
38+
excerptBody
39+
.find('a[data-fancybox]:not(.fancybox-ready)')
40+
.addClass('fancybox-ready')
41+
.each((_, el) => {
42+
const link = $(el);
43+
let isDragging = false;
44+
let startX: number, startY: number;
45+
46+
link
47+
.on('mousedown', (e) => {
48+
isDragging = false;
49+
startX = e.clientX;
50+
startY = e.clientY;
51+
})
52+
.on('mousemove', (e) => {
53+
if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
54+
isDragging = true;
55+
}
56+
})
57+
.on('click', (e) => {
58+
e.preventDefault();
59+
if (isDragging) return;
60+
61+
const groupName = link.attr('data-fancybox');
62+
const carouselEl = link.closest('.fancybox-gallery');
63+
const group = (carouselEl.length > 0 ? carouselEl : excerptBody).find(`a[data-fancybox="${groupName}"]`).toArray();
64+
const startIndex = group.indexOf(el);
65+
66+
Fancybox.fromNodes(group, {
67+
Carousel: {
68+
infinite: false,
69+
preload: 0,
70+
},
71+
Toolbar: {
72+
display: {
73+
left: ['infobar'],
74+
middle: ['rotateCCW', 'rotateCW', 'flipX', 'flipY'],
75+
right: ['slideshow', 'fullscreen', 'close'],
76+
},
77+
},
78+
Images: {
79+
initialSize: 'fit' as 'fit',
80+
},
81+
dragToClose: true,
82+
Hash: false,
83+
startIndex,
84+
});
85+
});
86+
});
87+
});
88+
889
extend(CommentPost.prototype, 'refreshContent', function () {
990
if (this.isEditing()) return;
1091

1192
const postBody = this.$('.Post-body');
1293
if (postBody.length == 0) return;
1394

14-
// Initialize Carousel for each gallery
15-
postBody.children('.fancybox-gallery:not(.fancybox-ready)') // The galleries should be only at the first level of Post-body
16-
.addClass('fancybox-ready')
17-
.each((_, gallery) => {
18-
new Carousel(gallery, {
19-
Dots: false,
20-
infinite: false,
21-
dragFree: false,
22-
preload: 0,
23-
});
95+
postBody
96+
.children('.fancybox-gallery:not(.fancybox-ready)')
97+
.addClass('fancybox-ready')
98+
.each((_, gallery) => {
99+
new Carousel(gallery, {
100+
Dots: false,
101+
infinite: false,
102+
dragFree: false,
103+
preload: 0,
24104
});
105+
});
25106

26-
postBody.find('a[data-fancybox]:not(.fancybox-ready)')
27-
.addClass('fancybox-ready')
28-
.each((_, el) => {
29-
const link = $(el);
30-
let isDragging = false;
31-
let startX: number, startY: number;
107+
postBody
108+
.find('a[data-fancybox]:not(.fancybox-ready)')
109+
.addClass('fancybox-ready')
110+
.each((_, el) => {
111+
const link = $(el);
112+
let isDragging = false;
113+
let startX: number, startY: number;
32114

33-
link
34-
.on('mousedown', (e) => {
35-
isDragging = false;
36-
startX = e.clientX;
37-
startY = e.clientY;
38-
})
39-
.on('mousemove', (e) => {
40-
if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
41-
isDragging = true;
42-
}
43-
})
44-
.on('click', (e) => {
45-
e.preventDefault();
46-
if (isDragging) return;
47-
const groupName = link.attr('data-fancybox');
48-
const carouselEl = link.closest('.fancybox-gallery');
49-
const group = (carouselEl.length > 0 ? carouselEl : postBody).find(`a[data-fancybox="${groupName}"]`).toArray();
50-
const startIndex = group.indexOf(el);
115+
link
116+
.on('mousedown', (e) => {
117+
isDragging = false;
118+
startX = e.clientX;
119+
startY = e.clientY;
120+
})
121+
.on('mousemove', (e) => {
122+
if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
123+
isDragging = true;
124+
}
125+
})
126+
.on('click', (e) => {
127+
e.preventDefault();
128+
if (isDragging) return;
129+
const groupName = link.attr('data-fancybox');
130+
const carouselEl = link.closest('.fancybox-gallery');
131+
const group = (carouselEl.length > 0 ? carouselEl : postBody).find(`a[data-fancybox="${groupName}"]`).toArray();
132+
const startIndex = group.indexOf(el);
51133

52-
Fancybox.fromNodes(group, {
53-
Carousel: {
54-
infinite: false,
55-
preload: 0,
56-
},
57-
Toolbar: {
58-
display: {
59-
left: ['infobar'],
60-
middle: ['rotateCCW', 'rotateCW', 'flipX', 'flipY'],
61-
right: ['slideshow', 'fullscreen', 'close'],
62-
},
63-
},
64-
Images: {
65-
initialSize: 'fit' as 'fit',
66-
},
67-
dragToClose: true,
68-
Hash: false,
69-
startIndex,
70-
});
71-
});
72-
});
134+
Fancybox.fromNodes(group, {
135+
Carousel: {
136+
infinite: false,
137+
preload: 0,
138+
},
139+
Toolbar: {
140+
display: {
141+
left: ['infobar'],
142+
middle: ['rotateCCW', 'rotateCW', 'flipX', 'flipY'],
143+
right: ['slideshow', 'fullscreen', 'close'],
144+
},
145+
},
146+
Images: {
147+
initialSize: 'fit' as 'fit',
148+
},
149+
dragToClose: true,
150+
Hash: false,
151+
startIndex,
152+
});
153+
});
154+
});
73155
});
74-
});
156+
});

‎src/ConfigureFancybox.php‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<?php
2+
3+
namespace Flectar\Fancybox;
4+
5+
use s9e\TextFormatter\Configurator;
6+
7+
class ConfigureFancybox
8+
{
9+
public function __invoke(Configurator $config)
10+
{
11+
$tag = $config->tags->add('FANCYBOX-GALLERY');
12+
$tag->template = '<div class="fancybox-gallery f-carousel"><xsl:apply-templates/></div>';
13+
14+
$tag = $config->tags->add('FANCYBOX-GALLERY-ITEM');
15+
$tag->template = '<div class="f-carousel__slide"><xsl:apply-templates/></div>';
16+
17+
if ($config->tags->exists('IMG')) {
18+
$tag = $config->tags->get('IMG');
19+
$tag->template = <<<'XML'
20+
<xsl:choose>
21+
<xsl:when test="ancestor::DISCUSSION-EXCERPT">
22+
<a data-fancybox="excerpt-gallery" href="{@src}">
23+
<img data-lazy-src="{@src}" alt="{@alt}" class="excerpt-image"/>
24+
</a>
25+
</xsl:when>
26+
<xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
27+
<a data-fancybox="gallery" href="{@src}">
28+
<img data-lazy-src="{@src}" alt="{@alt}" loading="lazy"/>
29+
</a>
30+
</xsl:when>
31+
<xsl:otherwise>
32+
<a data-fancybox="single" href="{@src}">
33+
<img src="{@src}" alt="{@alt}" loading="lazy"/>
34+
</a>
35+
</xsl:otherwise>
36+
</xsl:choose>
37+
XML;
38+
}
39+
40+
if ($config->tags->exists('UPL-IMAGE-PREVIEW')) {
41+
$tag = $config->tags->get('UPL-IMAGE-PREVIEW');
42+
$tag->template = <<<'XML'
43+
<xsl:choose>
44+
<xsl:when test="ancestor::DISCUSSION-EXCERPT">
45+
<a data-fancybox="excerpt-gallery" href="{@url}">
46+
<img data-lazy-src="{@url}" alt="" class="excerpt-image"/>
47+
</a>
48+
</xsl:when>
49+
<xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
50+
<a data-fancybox="gallery" href="{@url}">
51+
<img data-lazy-src="{@url}" alt="" loading="lazy"/>
52+
</a>
53+
</xsl:when>
54+
<xsl:otherwise>
55+
<a data-fancybox="single" href="{@url}">
56+
<img src="{@url}" alt="" loading="lazy"/>
57+
</a>
58+
</xsl:otherwise>
59+
</xsl:choose>
60+
XML;
61+
}
62+
}
63+
}

‎src/FancyboxServiceProvider.php‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

0 commit comments

Comments
 (0)