Updated to use nodebb-plugin-emoji

Author: pichalite

less/reactions.less

@@ -13,14 +13,16 @@
         margin: 0 1px;
         cursor: pointer;
 
+        .emoji {
+            height: 18px;
+        }
+
         &.reacted {
             border: 1px solid @primary-color;
         }
 
         .reaction-emoji-count {
-            font-size: 12px;
-            padding: 0 2px;
-            color: #777;
+            margin-left: 5px;
 
             &:before {
                 content: attr(data-count);

lib/client.js

@@ -1,10 +1,9 @@
 "use strict";
 
-/*globals $, app, utils, socket, templates, config*/
+/*globals $, app, utils, socket, config*/
 
 $(document).ready(function () {
 
-	var env = utils.findBootstrapEnvironment();
 	setupPostReactions();
 
 	function setupPostReactions() {
@@ -87,21 +86,24 @@ $(document).ready(function () {
 		}
 
 		if (reactionEl.length === 0) {
-			templates.parse('partials/topic/reaction', {
-				"posts": {
-					"pid": data.pid,
-					"reactions": {
+			require(['benchpress'], function (Benchpress) {
+				Benchpress.parse('partials/topic/reaction', {
+					"posts": {
 						"pid": data.pid,
-						"reaction": data.reaction,
-						"memberCount": data.reactionCount,
-						"usernames": data.usernames,
-						"reacted": (parseInt(data.uid, 10) === app.user.uid),
-						"reactionImage": data.reactionImage
+						"reactions": {
+							"pid": data.pid,
+							"reaction": data.reaction,
+							"memberCount": data.reactionCount,
+							"usernames": data.usernames,
+							"reacted": (parseInt(data.uid, 10) === app.user.uid),
+							"reactionImage": data.reactionImage
+						}
 					}
-				}
-			}, function (html) {
-				$('[component="post/reactions"][data-pid="' + data.pid + '"]').append(html);
+				}, function (html) {
+					$('[component="post/reactions"][data-pid="' + data.pid + '"]').append(html);
+				});
 			});
+			window.templates
 		} else {
 			reactionEl.find(".reaction-emoji-count").attr("data-count", data.reactionCount);
 			reactionEl.attr("data-original-title", data.usernames);

library.js

@@ -199,7 +199,7 @@ reactions.getReactions = function (data, callback) {
 
 					var reactionImage = parse(reaction.reaction);
 					var reacted = reaction.reacted ? 'reacted' : '';
-					reactionInfo = reactionInfo + '<span class="reaction ' + reacted + '" component="post/reaction" data-pid="' + post.pid + '" data-reaction="' + reaction.reaction + '" title="' + usernames + '">' + reactionImage + '<span class="reaction-emoji-count" data-count="' + reaction.memberCount + '"></span></span>';
+					reactionInfo = reactionInfo + '<span class="reaction ' + reacted + '" component="post/reaction" data-pid="' + post.pid + '" data-reaction="' + reaction.reaction + '" title="' + usernames + '">' + reactionImage + '<small class="reaction-emoji-count" data-count="' + reaction.memberCount + '"></small></span>';
 				});
 
 				post.reactions = reactionInfo + '</span>';

package.json

@@ -2,7 +2,7 @@
   "name": "nodebb-plugin-reactions",
   "version": "0.0.3",
   "nbbpm": {
-    "compatibility": "^1.4.0"
+    "compatibility": "^1.10.0"
   },
   "description": "Reactions plugin for NodeBB",
   "main": "library.js",

templates/partials/topic/reaction.tpl

@@ -1,4 +1,4 @@
 <span class="reaction <!-- IF posts.reactions.reacted -->reacted<!-- ENDIF posts.reactions.reacted -->" component="post/reaction" data-pid="{posts.pid}" data-reaction="{posts.reactions.reaction}" title="{posts.reactions.usernames}">
 	{posts.reactions.reactionImage}
-	<span class="reaction-emoji-count" data-count="{posts.reactions.memberCount}"></span>
+	<small class="reaction-emoji-count" data-count="{posts.reactions.memberCount}"></small>
 </span>