Frontend refactors

js/package.json

@@ -11,16 +11,15 @@
     "webpack-cli": "^5.1.4"
   },
   "devDependencies": {
-    "css-loader": "^7.1.2",
+    "copy-webpack-plugin": "^12.0.2",
+    "flarum-tsconfig": "^1.0.3",
     "prettier": "^3.3.3",
-    "style-loader": "^4.0.0",
     "webpack-merge": "^6.0.1"
   },
   "scripts": {
-    "dev": "npm run build:css && webpack --mode development --watch",
-    "build": "npm run build:css && webpack --mode production",
+    "dev": "webpack --mode development --watch",
+    "build": "webpack --mode production",
     "format": "prettier --write src",
-    "format-check": "prettier --check src",
-    "build:css": "cp ./node_modules/@fancyapps/ui/dist/fancybox/fancybox.css ../less/fancybox.css && cp ./node_modules/@fancyapps/ui/dist/carousel/carousel.css ../less/carousel.css"
+    "format-check": "prettier --check src"
   }
 }

js/src/forum/index.ts

@@ -0,0 +1,74 @@
+import app from 'flarum/forum/app';
+import {extend} from 'flarum/common/extend';
+import CommentPost from 'flarum/forum/components/CommentPost';
+
+import {Carousel, Fancybox} from '@fancyapps/ui';
+
+app.initializers.add('darkle/fancybox', () => {
+  extend(CommentPost.prototype, 'refreshContent', function () {
+    if (this.isEditing()) return;
+
+    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
+        .addClass('fancybox-ready')
+        .each((_, gallery) => {
+          new Carousel(gallery, {
+            Dots: false,
+            infinite: false,
+            dragFree: false,
+            preload: 0,
+          });
+        });
+
+    postBody.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 : postBody).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/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  // Use Flarum's tsconfig as a starting point
+  "extends": "flarum-tsconfig",
+  // This will match all .ts, .tsx, .d.ts, .js, .jsx files in your `src` folder
+  // and also tells your Typescript server to read core's global typings for
+  // access to `dayjs` and `$` in the global namespace.
+  "include": ["src/**/*", "../vendor/flarum/core/js/dist-typings/@types/**/*"],
+  "compilerOptions": {
+    // This will output typings to `dist-typings`
+    "declarationDir": "./dist-typings",
+    "paths": {
+      "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"]
+    }
+  }
+}

js/webpack.config.js

@@ -1,15 +1,17 @@
 const config = require('flarum-webpack-config');
 const { merge } = require('webpack-merge');
 
+const CopyPlugin = require('copy-webpack-plugin');
+
 const customConfig = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
-      },
-    ],
-  },
+  plugins: [
+      new CopyPlugin({
+          patterns: [
+              { from: './node_modules/@fancyapps/ui/dist/fancybox/fancybox.css', to: '../../less' },
+              { from: './node_modules/@fancyapps/ui/dist/carousel/carousel.css', to: '../../less' }
+          ]
+      })
+  ]
 };
 
 module.exports = merge(config(), customConfig);

src/DefineGalleryTemplate.php

@@ -21,7 +21,7 @@ public function __invoke(Configurator $config)
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
                         <a data-fancybox="gallery" href="{@src}">
-                            <img src="{@src}" alt="{@alt}" loading="lazy"/>
+                            <img data-lazy-src="{@src}" alt="{@alt}" loading="lazy"/>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>
@@ -39,7 +39,7 @@ public function __invoke(Configurator $config)
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
                         <a data-fancybox="gallery" href="{@url}">
-                            <img src="{@url}" alt="" loading="lazy"/>
+                            <img data-lazy-src="{@url}" alt="" loading="lazy"/>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>