getting chats working between both page and modal, yay #1788

public/src/forum/chats.js

@@ -1,21 +1,27 @@
 'use strict';
 
-/* globals define, app, ajaxify, utils, socket */
+/* globals define, app, ajaxify, utils, socket, templates */
 
 define('forum/chats', ['string', 'sounds'], function(S, sounds) {
-	var Chats = {};
+	var Chats = {
+		initialised: false
+	};
 
 	Chats.init = function() {
 		var containerEl = $('.expanded-chat ul');
 
+		if (!Chats.initialised) {
+			Chats.addSocketListeners();
+		}
+
 		Chats.addEventListeners();
-		Chats.addSocketListeners();
 		Chats.scrollToBottom(containerEl);
 		Chats.setActive();
+
+		Chats.initialised = true;
 	};
 
 	Chats.getRecipientUid = function() {
-		console.log($('.expanded-chat'));
 		return parseInt($('.expanded-chat').attr('data-uid'), 10);
 	};
 
@@ -33,17 +39,16 @@ define('forum/chats', ['string', 'sounds'], function(S, sounds) {
 			sendEl = $('.expanded-chat button[data-action="send"]');
 
 		$('.chats-list').on('click', 'li', function(e) {
-			// app.openChat($(this).attr('data-username'), $(this).attr('data-uid'));
 			ajaxify.go('chats/' + utils.slugify($(this).attr('data-username')));
 		});
 
-		inputEl.off('keypress').on('keypress', function(e) {
+		inputEl.on('keypress', function(e) {
 			if(e.which === 13) {
 				Chats.sendMessage(Chats.getRecipientUid(), inputEl);
 			}
 		});
 
-		inputEl.off('keyup').on('keyup', function() {
+		inputEl.on('keyup', function() {
 			if ($(this).val()) {
 				Chats.notifyTyping(Chats.getRecipientUid(), true);
 			} else {
@@ -51,29 +56,45 @@ define('forum/chats', ['string', 'sounds'], function(S, sounds) {
 			}
 		});
 
-		sendEl.off('click').on('click', function(e) {
+		sendEl.on('click', function(e) {
 			Chats.sendMessage(Chats.getRecipientUid(), inputEl);
 			return false;
 		});
 	};
 
 	Chats.addSocketListeners = function() {
-		var typingNotifEl = $('.user-typing');
+		var typingNotifEl = $('.user-typing'),
+			containerEl = $('.expanded-chat ul');
 
 		socket.on('event:chats.receive', function(data) {
-
+			if (Chats.isCurrentChat(data.withUid)) {
+				Chats.parseMessage(data.message, function(html) {
+					var newMessage = $(html);
+					newMessage.insertBefore(typingNotifEl);
+					newMessage.find('span.timeago').timeago();
+					newMessage.find('img:not(".chat-user-image")').addClass('img-responsive');
+					Chats.scrollToBottom(containerEl);
+				});
+			} else {
+				$('.chats-list li[data-uid="' + data.withUid + '"]').addClass('unread');
+				app.alternatingTitle('[[modules:chat.user_has_messaged_you, ' + data.message.username + ']]');
+			}
 		});
 
 		socket.on('event:chats.userStartTyping', function(withUid) {
 			if (Chats.isCurrentChat(withUid)) {
 				typingNotifEl.removeClass('hide');
 			}
+
+			$('.chats-list li[data-uid="' + withUid + '"]').addClass('typing');
 		});
 
 		socket.on('event:chats.userStopTyping', function(withUid) {
 			if (Chats.isCurrentChat(withUid)) {
 				typingNotifEl.addClass('hide');
 			}
+
+			$('.chats-list li[data-uid="' + withUid + '"]').removeClass('typing');
 		});
 	};
 
@@ -112,5 +133,11 @@ define('forum/chats', ['string', 'sounds'], function(S, sounds) {
 		$('.chats-list li[data-uid="' + Chats.getRecipientUid() + '"]').addClass('bg-primary');
 	};
 
+	Chats.parseMessage = function(data, callback) {
+		templates.parse('partials/chat_message' + (Array.isArray(data) ? 's' : ''), {
+			messages: data
+		}, callback);
+	};
+
 	return Chats;
 });

public/src/modules/chat.js

@@ -263,10 +263,8 @@ define('chat', ['taskbar', 'string', 'sounds', 'forum/chats'], function(taskbar,
 
 	function getChatMessages(chatModal, callback) {
 		socket.emit('modules.chats.get', {touid:chatModal.touid}, function(err, messages) {
-			for(var i = 0; i<messages.length; ++i) {
-				module.appendChatMessage(chatModal, messages[i]);
-			}
-			callback();
+			console.log(messages);
+			module.appendChatMessage(chatModal, messages, callback);
 		});
 	}
 
@@ -292,35 +290,18 @@ define('chat', ['taskbar', 'string', 'sounds', 'forum/chats'], function(taskbar,
 		});
 	}
 
-	module.appendChatMessage = function(chatModal, data) {
+	module.appendChatMessage = function(chatModal, data, done) {
 		var chatContent = chatModal.find('#chat-content');
 
-		var isYou = parseInt(app.uid, 10) === parseInt(data.fromuid, 10);
-
-		var message = $('<li class="chat-message clear" data-uid="' + data.fromuid + '"></li>');
-		var time = '<span class="chat-timestamp pull-right timeago" title="' + utils.toISOString(data.timestamp) + '"></span> ';
-
-
-		if (data.fromuid !== chatContent.children('.chat-message').last().attr('data-uid')) {
-			var userPicture = $('<a href="/user/' + data.fromUser.userslug + '"><img class="chat-user-image" src="' + data.fromUser.picture + '"></a>');
-			var userName = $('<strong><span class="chat-user"> '+ data.fromUser.username + '</span></strong>');
-			userName.toggleClass('chat-user-you', isYou);
-
-			message.append(userPicture)
-				.append(userName)
-				.append('<br/>')
-				.prepend(time);
-		}
-
-		message.append(S(data.content).stripTags('p').s);
-
-		message.toggleClass('chat-message-them', !isYou);
-		message.find('img:not(".chat-user-image")').addClass('img-responsive');
-		message.find('span.timeago').timeago();
+		Chats.parseMessage(data, function(html) {
+			var message = $(html);
+			message.find('img:not(".chat-user-image")').addClass('img-responsive');
+			message.find('span.timeago').timeago();
+			chatContent.append(message);
+			Chats.scrollToBottom(chatContent);
 
-		chatContent.append(message);
-
-		Chats.scrollToBottom(chatContent);
+			if (typeof done === 'function') done();
+		});
 	};
 
 	module.toggleNew = function(uuid, state) {