hooked up socket calls to usercard

lib/persona.js

@@ -1,6 +1,6 @@
 "use strict";
 
-/*globals ajaxify, config, utils, templates, app, Slideout, NProgress*/
+/*globals ajaxify, config, utils, templates, app, socket, Slideout, NProgress*/
 
 $(document).ready(function() {
 	setupNProgress();
@@ -166,44 +166,64 @@ $(document).ready(function() {
 	function setupHoverCards() {
 		require(['components'], function(components) {
 			components.get('user/picture')
-				.on('mouseover', function() {
-					var avatar = $(this),
-						index = avatar.parents('[data-index]').attr('data-index'),
-						data = (ajaxify.data.topics || ajaxify.data.posts)[index].user;
-					
-					templates.parse('modules/usercard', data, function(html) {
-						var card = $(html);
-						avatar.parents('a').after(card.hide());
-
-						if (parseInt(app.user.uid, 10) === parseInt(data.uid, 10)) {
-							card.find('.btn-morph').hide();
-						} else {							
-							card.find('.btn-morph').click(function(ev){
-								$(this).toggleClass('plus').toggleClass('heart');
-
-								if ($(this).find('b.drop').length === 0) {
-									$(this).prepend('<b class="drop"></b>');
-								}
-
-								var drop = $(this).find('b.drop').removeClass('animate'),
-									x = ev.pageX - drop.width() / 2 - $(this).offset().left,
-									y = ev.pageY - drop.height() / 2 - $(this).offset().top;
-
-								drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
-							});
-						}
+				.on('mouseover', generateUserCard);
+		});	
+	}
+
+	function generateUserCard() {
+		var avatar = $(this),
+			index = avatar.parents('[data-index]').attr('data-index'),
+			data = (ajaxify.data.topics || ajaxify.data.posts)[index].user;
+
+		socket.emit('user.isFollowing', {uid: data.uid}, function(err, isFollowing) {
+			templates.parse('modules/usercard', data, function(html) {
+				var card = $(html);
+				avatar.parents('a').after(card.hide());
 
-						utils.makeNumbersHumanReadable($('.human-readable-number'));
+				if (parseInt(app.user.uid, 10) === parseInt(data.uid, 10)) {
+					card.find('.btn-morph').hide();
+				} else {							
+					card.find('.btn-morph').click(function(ev) {
+						var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
 
-						card.on('mouseleave', function() {
-							card.fadeOut(function() {
-								card.remove();
-							});
+						socket.emit('user.' + type, {uid: data.uid}, function(err) {
+							if (err) {
+								return app.alertError(err.message);
+							}
+
+							app.alertSuccess('[[global:alert.' + type + ', ' + data.username + ']]');
 						});
 
-						card.fadeIn();
+						$(this).toggleClass('plus').toggleClass('heart');
+
+						if ($(this).find('b.drop').length === 0) {
+							$(this).prepend('<b class="drop"></b>');
+						}
+
+						var drop = $(this).find('b.drop').removeClass('animate'),
+							x = ev.pageX - drop.width() / 2 - $(this).offset().left,
+							y = ev.pageY - drop.height() / 2 - $(this).offset().top;
+
+						drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
+					});
+
+					if (isFollowing) {
+						$('.btn-morph').addClass('heart');
+					} else {
+						$('.btn-morph').addClass('plus');
+					}
+				}
+
+				utils.makeNumbersHumanReadable($('.human-readable-number'));
+
+				card.on('mouseleave', function() {
+					card.fadeOut(function() {
+						card.remove();
 					});
 				});
-		});	
+
+				card.fadeIn();
+			});
+		});
 	}
 });

templates/modules/usercard.tpl

@@ -22,7 +22,7 @@
 				<span class="human-readable-number">{reputation}</span>
 			</div>
 			
-			<button class="btn-morph fab plus">
+			<button class="btn-morph fab">
 				<span>
 					<span class="s1"></span>
 					<span class="s2"></span>