Initial version

Author: pichalite

less/reactions.less

@@ -0,0 +1,39 @@
+@primary-color: #039BE5;
+
+.reactions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .reaction {
+        border: 1px solid lighten(@primary-color, 35%);
+        display: inline-block;
+        border-radius: 4px;
+        padding: 2px 4px;
+        margin: 0 1px;
+        cursor: pointer;
+
+        &.reacted {
+            border: 1px solid @primary-color;
+        }
+
+        .reaction-emoji-count {
+            font-size: 12px;
+            padding: 0 2px;
+            color: #777;
+
+            &:before {
+                content: attr(data-count);
+            }
+        }
+    }
+
+    .reaction-add {
+        margin-right: 10px;
+        cursor: pointer;
+
+        &.max-reactions {
+            display: none;
+        }
+    }
+}

lib/admin.js

@@ -0,0 +1,24 @@
+'use strict';
+/* globals $, app */
+
+define('admin/plugins/reactions', ['settings'], function(Settings) {
+
+	var ACP = {};
+
+	ACP.init = function() {
+		Settings.load('reactions', $('.reactions-settings'));
+
+		$('#save').on('click', function() {
+			Settings.save('reactions', $('.reactions-settings'), function() {
+				app.alert({
+					type: 'success',
+					alert_id: 'reactions-saved',
+					title: 'Settings Saved',
+					message: 'Reactions plugin settings saved'
+				});
+			});
+		});
+	};
+
+	return ACP;
+});

lib/client.js

@@ -0,0 +1,119 @@
+"use strict";
+
+/*globals $, app, utils, socket, templates, config*/
+
+$(document).ready(function() {
+   
+    var env = utils.findBootstrapEnvironment();
+    setupPostReactions();
+   
+    function setupPostReactions() {
+    	$(window).on('action:ajaxify.end', function(ev, data) {
+    		if (data.url && data.url.match('^topic/')) {
+    			setupReactionSockets();
+    			createReactionTooltips();
+				$('[component="topic"]').on('click', '[component="post/reaction"]', function(e) {
+					var tid = $('[component="topic"]').attr("data-tid");
+					var reactionElement = $(this);
+					var pid = reactionElement.attr("data-pid");
+					var reaction = reactionElement.attr("data-reaction");
+					var reacted = reactionElement.hasClass("reacted");
+					var event = 'plugins.reactions.' + (reacted ? 'removePostReaction' : 'addPostReaction');
+					socket.emit(event, {
+						tid: tid,
+						pid: pid,
+						reaction: reaction
+					}, function(err) {
+						if (err) {
+							app.alertError(err.message);
+						}
+					});
+		        });
+				
+				$('[component="topic"]').on('click', '[component="post/reaction/add"]', function (e) {
+					var reactionAddEl = $(this);
+					var tid = $('[component="topic"]').attr("data-tid");
+					var pid = reactionAddEl.attr("data-pid");
+					require(['plugin/emoji-extended/composer/modal'], function (modal) {
+						modal.open().then(function (item) {
+							socket.emit('plugins.reactions.addPostReaction', {
+								tid: tid,
+								pid: pid,
+								reaction: item.id
+							}, function(err) {
+								if (err) {
+									app.alertError(err.message);
+								}
+							
+								$('[component="post/reaction"][data-pid="' + pid + '"][data-reaction="' + item.id + '"]').addClass("reacted");
+							});
+						});
+					});
+				});
+    		}
+    	});
+    	
+    	socket.on('event:post_deleted', function(data) {
+    		$('[component="post/reactions"][data-pid="' + data.pid + '"]').addClass("hidden");
+    	});
+
+    	socket.on('event:post_restored', function(data) {
+    		$('[component="post/reactions"][data-pid="' + data.pid + '"]').removeClass("hidden");
+    	});
+    }
+    
+    function setupReactionSockets() {
+    	socket.on('event:reactions.addPostReaction', function (data) {
+    		updateReactionCount(data);
+    	});
+    	
+    	socket.on('event:reactions.removePostReaction', function (data) {
+    		updateReactionCount(data);
+    	});
+    }
+    
+    function updateReactionCount(data) {
+    	var maxReactionsReached = parseInt(data.totalReactions, 10) >= config.maximumReactions;
+    	$('[component="post/reaction/add"][data-pid="' + data.pid + '"]').toggleClass("max-reactions", maxReactionsReached);
+    	
+    	var reactionEl = $('[component="post/reaction"][data-pid="' + data.pid + '"][data-reaction="' + data.reaction + '"]');
+    	
+    	if (parseInt(data.reactionCount, 10) === 0) {
+    		reactionEl.tooltip('destroy');
+    		reactionEl.remove();
+    	}
+    	
+    	if (reactionEl.length === 0) {
+	    	templates.parse('partials/topic/reaction', {
+	    		"posts": {
+	    			"pid": data.pid,
+	    			"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);
+	    	});
+    	} else {
+    		reactionEl.find(".reaction-emoji-count").attr("data-count", data.reactionCount);
+	    	reactionEl.attr("data-original-title", data.usernames);
+	    	reactionEl.toggleClass("reacted", !(parseInt(data.uid, 10) === app.user.uid));
+    	}
+    }
+    
+    function createReactionTooltips() {
+    	$('.reaction, .reaction-add').each(function () {
+			if (!utils.isTouchDevice()) {
+				$(this).tooltip({
+					placement: 'top',
+					title: $(this).attr('title')
+				});
+			}
+		});
+    }
+});