Update for new extension API; implement l10n

extensions/likes/js/bootstrap.js

@@ -1,109 +0,0 @@
-import { extend, override } from 'flarum/extension-utils';
-import app from 'flarum/app';
-import Post from 'flarum/models/post';
-import Model from 'flarum/model';
-import DiscussionPage from 'flarum/components/discussion-page';
-import SettingsPage from 'flarum/components/settings-page';
-import ActionButton from 'flarum/components/action-button';
-import CommentPost from 'flarum/components/comment-post';
-import punctuate from 'flarum/helpers/punctuate';
-import username from 'flarum/helpers/username';
-import icon from 'flarum/helpers/icon';
-
-import PostLikedNotification from 'flarum-likes/components/post-liked-notification';
-import PostLikesModal from 'flarum-likes/components/post-likes-modal';
-
-app.initializers.add('flarum-likes', function() {
-
-  app.notificationComponentRegistry['postLiked'] = PostLikedNotification;
-
-  Post.prototype.canLike = Model.prop('canLike');
-  Post.prototype.likes = Model.many('likes');
-
-  extend(DiscussionPage.prototype, 'params', function(params) {
-    params.include.push('posts.likes');
-  });
-
-  extend(CommentPost.prototype, 'footerItems', function(items) {
-    var post = this.props.post;
-    var likes = post.likes();
-
-    if (likes && likes.length) {
-
-      var limit = 3;
-
-      var names = likes.slice(0, limit).map(user => {
-        return m('a', {
-          href: app.route.user(user),
-          config: m.route
-        }, [
-          app.session.user() && user === app.session.user() ? 'You' : username(user)
-        ])
-      });
-
-      if (likes.length > limit + 1) {
-        names.push(
-          m('a', {
-            href: '#',
-            onclick: function(e) {
-              e.preventDefault();
-              app.modal.show(new PostLikesModal({ post }));
-            }
-          }, (likes.length - limit)+' others')
-        );
-      }
-
-      items.add('liked',
-        m('div.liked-by', [
-          icon('thumbs-o-up icon'),
-          punctuate(names),
-          names.length === 1 && (!app.session.user() || likes[0] !== app.session.user()) ? ' likes this.' : ' like this.'
-        ]),
-        {before: 'replies'}
-      );
-    }
-  });
-
-  extend(CommentPost.prototype, 'actionItems', function(items) {
-    var post = this.props.post;
-    if (post.isHidden() || !post.canLike()) return;
-
-    var isLiked = app.session.user() && post.likes().some(user => user === app.session.user());
-
-    items.add('like',
-      ActionButton.component({
-        icon: 'thumbs-o-up',
-        label: isLiked ? 'Unlike' : 'Like',
-        onclick: () => {
-          isLiked = !isLiked;
-
-          post.save({ isLiked });
-
-          var linkage = post.data().links.likes.linkage;
-          linkage.some((like, i) => {
-            if (like.id == app.session.user().id()) {
-              linkage.splice(i, 1);
-              return true;
-            }
-          });
-
-          if (isLiked) {
-            linkage.unshift({ type: 'users', id: app.session.user().id() });
-          }
-
-          m.redraw();
-        }
-      }),
-      {before: 'reply'}
-    );
-  });
-
-  // Add a notification preference.
-  extend(SettingsPage.prototype, 'notificationTypes', function(items) {
-    items.add('postLiked', {
-      name: 'postLiked',
-      label: [icon('thumbs-o-up'), ' Someone likes my post']
-    });
-  });
-
-});

extensions/likes/js/forum/Gulpfile.js

@@ -1,5 +1,5 @@
 var gulp = require('flarum-gulp');
 
 gulp({
-  modulePrefix: 'flarum-likes'
+  modulePrefix: 'likes'
 });

extensions/likes/js/forum/src/addLikeAction.js

@@ -0,0 +1,41 @@
+import { extend } from 'flarum/extend';
+import app from 'flarum/app';
+import Button from 'flarum/components/Button';
+import CommentPost from 'flarum/components/CommentPost';
+
+export default function() {
+  extend(CommentPost.prototype, 'actionItems', function(items) {
+    const post = this.props.post;
+
+    if (post.isHidden() || !post.canLike()) return;
+
+    let isLiked = app.session.user && post.likes().some(user => user === app.session.user);
+
+    items.add('like',
+      Button.component({
+        children: app.trans(isLiked ? 'likes.unlike_action' : 'likes.like_action'),
+        className: 'Button Button--text',
+        onclick: () => {
+          isLiked = !isLiked;
+
+          post.save({isLiked});
+
+          // We've saved the fact that we do or don't like the post, but in order
+          // to provide instantaneous feedback to the user, we'll need to add or
+          // remove the like from the relationship data manually.
+          const data = post.data.relationships.likes.data;
+          data.some((like, i) => {
+            if (like.id === app.session.user.id()) {
+              data.splice(i, 1);
+              return true;
+            }
+          });
+
+          if (isLiked) {
+            data.unshift({type: 'users', id: app.session.user.id()});
+          }
+        }
+      })
+    );
+  });
+}

extensions/likes/js/forum/src/addLikesList.js

@@ -0,0 +1,60 @@
+import { extend } from 'flarum/extend';
+import app from 'flarum/app';
+import DiscussionPage from 'flarum/components/DiscussionPage';
+import CommentPost from 'flarum/components/CommentPost';
+import punctuate from 'flarum/helpers/punctuate';
+import username from 'flarum/helpers/username';
+import icon from 'flarum/helpers/icon';
+
+import PostLikesModal from 'likes/components/PostLikesModal';
+
+export default function() {
+  extend(DiscussionPage.prototype, 'params', function(params) {
+    params.include.push('posts.likes');
+  });
+
+  extend(CommentPost.prototype, 'footerItems', function(items) {
+    const post = this.props.post;
+    const likes = post.likes();
+
+    if (likes && likes.length) {
+      const limit = 3;
+
+      // Construct a list of names of users who have like this post. Make sure the
+      // current user is first in the list, and cap a maximum of 3 names.
+      const names = likes.sort(a => a === app.session.user ? -1 : 1)
+        .slice(0, limit)
+        .map(user => {
+          return (
+            <a href={app.route.user(user)} config={m.route}>
+              {user === app.session.user ? 'You' : username(user)}
+            </a>
+          );
+        });
+
+      // If there are more users that we've run out of room to display, add a "x
+      // others" name to the end of the list. Clicking on it will display a modal
+      // with a full list of names.
+      if (likes.length > limit + 1) {
+        names.push(
+          <a href="#" onclick={e => {
+            e.preventDefault();
+            app.modal.show(new PostLikesModal({post}));
+          }}>
+            {app.trans('likes.others', {count: likes.length - limit})}
+          </a>
+        );
+      }
+
+      items.add('liked', (
+        <div className="Post-likedBy">
+          {icon('thumbs-o-up')}
+          {app.trans('likes.post_liked_by' + (likes[0] === app.session.user ? '_self' : ''), {
+            count: names.length,
+            users: punctuate(names)
+          })}
+        </div>
+      ));
+    }
+  });
+}

extensions/likes/js/forum/src/components/PostLikedNotification.js

@@ -0,0 +1,27 @@
+import Notification from 'flarum/components/Notification';
+
+export default class PostLikedNotification extends Notification {
+  icon() {
+    return 'thumbs-o-up';
+  }
+
+  href() {
+    return app.route.post(this.props.notification.subject());
+  }
+
+  content() {
+    const notification = this.props.notification;
+    const post = notification.subject();
+    const user = notification.sender();
+    const auc = notification.additionalUnreadCount();
+
+    return app.trans('likes.post_liked_notification', {
+      user,
+      username: auc ? punctuate([
+        username(user),
+        app.trans('core.others', {count: auc})
+      ]) : undefined,
+      number: post.number()
+    });
+  }
+}

extensions/likes/js/forum/src/components/PostLikesModal.js

@@ -0,0 +1,30 @@
+import Modal from 'flarum/components/Modal';
+import avatar from 'flarum/helpers/avatar';
+import username from 'flarum/helpers/username';
+
+export default class PostLikesModal extends Modal {
+  className() {
+    return 'PostLikesModal Modal--small';
+  }
+
+  title() {
+    return app.trans('likes.post_likes_modal_title');
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <ul className="PostLikesModal-list">
+          {this.props.post.likes().map(user => (
+            <li>
+              <a href={app.route.user(user)} config={m.route}>
+                {avatar(user)}{' '}
+                {username(user)}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}

extensions/likes/js/forum/src/main.js

@@ -0,0 +1,25 @@
+import { extend } from 'flarum/extend';
+import app from 'flarum/app';
+import Post from 'flarum/models/Post';
+import Model from 'flarum/Model';
+import NotificationGrid from 'flarum/components/NotificationGrid';
+
+import addLikeAction from 'likes/addLikeAction';
+import addLikesList from 'likes/addLikesList';
+import PostLikedNotification from 'likes/components/PostLikedNotification';
+
+app.notificationComponents.postLiked = PostLikedNotification;
+
+Post.prototype.canLike = Model.attribute('canLike');
+Post.prototype.likes = Model.hasMany('likes');
+
+addLikeAction();
+addLikesList();
+
+extend(NotificationGrid.prototype, 'notificationTypes', function(items) {
+  items.add('postLiked', {
+    name: 'postLiked',
+    icon: 'thumbs-o-up',
+    label: app.trans('likes.notify_post_liked')
+  });
+});

extensions/likes/js/src/components/post-liked-notification.js

@@ -1,16 +0,0 @@
-import Notification from 'flarum/components/notification';
-import username from 'flarum/helpers/username';
-
-export default class PostLikedNotification extends Notification {
-  view() {
-    var notification = this.props.notification;
-    var post = notification.subject();
-    var auc = notification.additionalUnreadCount();
-
-    return super.view({
-      href: app.route.post(post),
-      icon: 'thumbs-o-up',
-      content: [username(notification.sender()), auc ? ' and '+auc+' others' : '', ' liked your post #', post.number()]
-    });
-  }
-}

extensions/likes/js/src/components/post-likes-modal.js

@@ -1,24 +0,0 @@
-import FormModal from 'flarum/components/form-modal';
-import avatar from 'flarum/helpers/avatar';
-import username from 'flarum/helpers/username';
-
-export default class PostLikesModal extends FormModal {
-  view() {
-    var post = this.props.post;
-
-    return super.view({
-      className: 'post-likes-modal',
-      title: 'Users Who Like This',
-      body: [
-        m('ul.post-likes-list', [
-          post.likes().map(user =>
-            m('li', m('a', {href: app.route.user(user), config: m.route}, [
-              avatar(user),
-              username(user)
-            ]))
-          )
-        ])
-      ]
-    });
-  }
-}