Update for Flarum v1 (#11)

* Update for Flarum v1 * Apply fixes from StyleCI * Apply fixes from StyleCI Co-authored-by: datitisev <[email protected]>
FriendsOfFlarum · May 27, 2021 · 60f38af · 60f38af
1 parent 367a20e
commit 60f38af
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ A [Flarum](http://flarum.org) extension. Replace author avatars with the first i
 Install manually with composer:
 
 ```sh
-composer require fof/discussion-thumbnail
+composer require fof/discussion-thumbnail:"*"
 ```
 
 ### Updating

diff --git a/composer.json b/composer.json
@@ -17,7 +17,7 @@
         }
     ],
   "require": {
-    "flarum/core": "^0.1.0-beta.16"
+    "flarum/core": "^1.0.0"
   },
   "authors": [
     {

diff --git a/extend.php b/extend.php
@@ -16,7 +16,8 @@
 
 return [
     (new Extend\Frontend('forum'))
-        ->js(__DIR__.'/js/dist/forum.js'),
+        ->js(__DIR__.'/js/dist/forum.js')
+        ->css(__DIR__.'/resources/less/forum.less'),
 
     (new Extend\ApiSerializer(BasicDiscussionSerializer::class))
         ->attributes(Listener\AddDiscussionThumbnail::class),

diff --git a/js/package-lock.json b/js/package-lock.json
diff --git a/js/package.json b/js/package.json
@@ -4,18 +4,18 @@
   "private": true,
   "dependencies": {
     "flarum-webpack-config": "^0.1.0-beta.10",
-    "intersection-observer": "^0.7.0",
+    "intersection-observer": "^0.12.0",
     "object.assign": "^4.1.0",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12"
   },
   "scripts": {
     "dev": "webpack --mode development --watch",
     "build": "webpack --mode production",
-    "lint": "prettier --single-quote --trailing-comma es5 --print-width 150 --tab-width 4 --write src"
+    "format": "prettier --single-quote --trailing-comma es5 --print-width 150 --tab-width 4 --write src"
   },
   "devDependencies": {
-    "flarum": "0.1.0-beta.16",
-    "prettier": "^2.1.2"
+    "flarum": "github:flarum/types#v1",
+    "prettier": "^2.3.0"
   }
 }
diff --git a/js/src/forum/components/DiscussionThumbnail.js b/js/src/forum/components/DiscussionThumbnail.js
@@ -1,16 +1,13 @@
 import Component from 'flarum/common/Component';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
+import classList from 'flarum/common/utils/classList';
 
 import 'object.assign/auto';
 import 'intersection-observer';
 
 const loadedSet = new Set();
 
 export default class DiscussionThumbnail extends Component {
-    oninit(vnode) {
-        super.oninit(vnode);
-    }
-
     view() {
         const attrs = { ...this.attrs.elementAttrs };
         const loaded = loadedSet.has(this.attrs.src);
@@ -29,7 +26,7 @@ export default class DiscussionThumbnail extends Component {
         attrs[loaded ? 'src' : 'data-src'] = this.attrs.src;
 
         return (
-            <div className={attrs.className}>
+            <div className={classList(attrs.className, 'DiscussionListItem-thumbnail')}>
                 {!loaded && <LoadingIndicator />}
                 <img {...attrs} />
             </div>
@@ -57,6 +54,6 @@ export default class DiscussionThumbnail extends Component {
 
         img.style.opacity = 1;
 
-        this.$('.LoadingIndicator').remove();
+        this.$('.LoadingIndicator-container').remove();
     }
 }
diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -4,6 +4,7 @@ import { extend } from 'flarum/common/extend';
 import Model from 'flarum/common/Model';
 import Discussion from 'flarum/common/models/Discussion';
 import DiscussionListItem from 'flarum/forum/components/DiscussionListItem';
+import Tooltip from 'flarum/common/components/Tooltip';
 
 import DiscussionThumbnail from './components/DiscussionThumbnail';
 
@@ -18,7 +19,11 @@ app.initializers.add('fof/discussion-thumbnail', () => {
         if (!image) return;
 
         const content = find(vdom, 'DiscussionListItem-content');
-        const author = find(content, 'DiscussionListItem-author');
+
+        if (!content || !content.children) return;
+
+        const tooltip = content.children.find((e) => e.tag && e.tag === Tooltip);
+        const author = find(tooltip, 'DiscussionListItem-author');
         const avatar = find(author, 'Avatar');
 
         if (!avatar) return;

diff --git a/resources/less/forum.less b/resources/less/forum.less
@@ -0,0 +1,10 @@
+.DiscussionListItem-thumbnail {
+  position: relative;
+
+  .LoadingIndicator-container {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    --size: 18px;
+  }
+}