Webpack (#15)

See https://github.com/flarum/core/pull/1367

* Replace gulp with webpack and npm scripts for JS compilation
* Set up Travis CI to commit compiled JS
* Restructure `js` directory; only one instance of npm, forum/admin are "submodules"
* Restructure `less` directory

extensions/likes/js/src/admin/index.js

@@ -0,0 +1,13 @@
+import { extend } from 'flarum/extend';
+import app from 'flarum/app';
+import PermissionGrid from 'flarum/components/PermissionGrid';
+
+app.initializers.add('flarum-likes', () => {
+  extend(PermissionGrid.prototype, 'replyItems', items => {
+    items.add('likePosts', {
+      icon: 'far fa-thumbs-up',
+      label: app.translator.trans('flarum-likes.admin.permissions.like_posts_label'),
+      permission: 'discussion.likePosts'
+    });
+  });
+});

extensions/likes/js/src/forum/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.translator.trans(isLiked ? 'flarum-likes.forum.post.unlike_link' : 'flarum-likes.forum.post.like_link'),
+        className: 'Button Button--link',
+        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/src/forum/addLikesList.js

@@ -0,0 +1,58 @@
+import { extend } from 'flarum/extend';
+import app from 'flarum/app';
+import CommentPost from 'flarum/components/CommentPost';
+import punctuateSeries from 'flarum/helpers/punctuateSeries';
+import username from 'flarum/helpers/username';
+import icon from 'flarum/helpers/icon';
+
+import PostLikesModal from './components/PostLikesModal';
+
+export default function() {
+  extend(CommentPost.prototype, 'footerItems', function(items) {
+    const post = this.props.post;
+    const likes = post.likes();
+
+    if (likes && likes.length) {
+      const limit = 4;
+      const overLimit = likes.length > limit;
+
+      // Construct a list of names of users who have liked this post. Make sure the
+      // current user is first in the list, and cap a maximum of 4 items.
+      const names = likes.sort(a => a === app.session.user ? -1 : 1)
+        .slice(0, overLimit ? limit - 1 : limit)
+        .map(user => {
+          return (
+            <a href={app.route.user(user)} config={m.route}>
+              {user === app.session.user ? app.translator.trans('flarum-likes.forum.post.you_text') : 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 (overLimit) {
+        const count = likes.length - names.length;
+
+        names.push(
+          <a href="#" onclick={e => {
+            e.preventDefault();
+            app.modal.show(new PostLikesModal({post}));
+          }}>
+            {app.translator.transChoice('flarum-likes.forum.post.others_link', count, {count})}
+          </a>
+        );
+      }
+
+      items.add('liked', (
+        <div className="Post-likedBy">
+          {icon('far fa-thumbs-up')}
+          {app.translator.transChoice('flarum-likes.forum.post.liked_by' + (likes[0] === app.session.user ? '_self' : '') + '_text', names.length, {
+            count: names.length,
+            users: punctuateSeries(names)
+          })}
+        </div>
+      ));
+    }
+  });
+}

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

@@ -0,0 +1,31 @@
+import Notification from 'flarum/components/Notification';
+import username from 'flarum/helpers/username';
+import punctuateSeries from 'flarum/helpers/punctuateSeries';
+
+export default class PostLikedNotification extends Notification {
+  icon() {
+    return 'far fa-thumbs-up';
+  }
+
+  href() {
+    return app.route.post(this.props.notification.subject());
+  }
+
+  content() {
+    const notification = this.props.notification;
+    const user = notification.sender();
+    const auc = notification.additionalUnreadCount();
+
+    return app.translator.transChoice('flarum-likes.forum.notifications.post_liked_text', auc + 1, {
+      user,
+      username: auc ? punctuateSeries([
+        username(user),
+        app.translator.transChoice('flarum-likes.forum.notifications.others_text', auc, {count: auc})
+      ]) : undefined
+    });
+  }
+
+  excerpt() {
+    return this.props.notification.subject().contentPlain();
+  }
+}

extensions/likes/js/src/forum/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.translator.trans('flarum-likes.forum.post_likes.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/src/forum/index.js

@@ -0,0 +1,27 @@
+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 './addLikeAction';
+import addLikesList from './addLikesList';
+import PostLikedNotification from './components/PostLikedNotification';
+
+app.initializers.add('flarum-likes', () => {
+  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: 'far fa-thumbs-up',
+      label: app.translator.trans('flarum-likes.forum.settings.notify_post_liked_label')
+    });
+  });
+});