chat feature

public/src/app.js

@@ -50,6 +50,17 @@ var socket,
         return text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
     }
 
+    // Willingly stolen from: http://phpjs.org/functions/strip_tags/
+	app.strip_tags = function(input, allowed) {
+		allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
+		var	tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
+			commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
+
+		return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
+			return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
+		});
+	}
+
 	// use unique alert_id to have multiple alerts visible at a time, use the same alert_id to fade out the current instance  
 	// type : error, success, info, warning/notify
 	// title = bolded title text
@@ -114,6 +125,7 @@ var socket,
 
 
 	app.open_post_window = function(post_mode, id, title, pid) {
+		
 		submit_post_btn = submit_post_btn || document.getElementById('submit_post_btn');
 		post_title = post_title || document.getElementById('post_title');
 		reply_title = reply_title || document.getElementById('reply_title');

public/templates/header.tpl

@@ -9,6 +9,7 @@
 	<link href="/vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 	<link rel="stylesheet" href="/vendor/fontawesome/css/font-awesome.min.css">
 	<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
+	<script type="text/javascript" src="/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
 	<script type="text/javascript" src="/vendor/bootstrap/js/bootstrap.min.js"></script>
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
 	<script type="text/javascript" src="/src/app.js"></script>
@@ -100,7 +101,7 @@
 	  <div class="modal-body">
 		<textarea id="chat-content" cols="40" rows="10"></textarea><br/>
 		<input id="chat-message-input" type="text" name="chat-message" placeholder="type chat message here press enter to send"/><br/>
-		<a id="chat-message-send-btn" href="#" class="btn btn-primary">Send</a>
+		<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary">Send</button>
 	  </div>
 	</div>
 

public/templates/topic.tpl

@@ -300,68 +300,88 @@
 			var username = $(this).parents('li').attr('data-username');
 			var touid = $(this).parents('li').attr('data-uid');
 
+			var chatModal = createModalIfDoesntExist(username, touid);
+
+			chatModal.show();
+			bringModalToTop(chatModal);
+			
+		});
+
+		function bringModalToTop(chatModal) {
+			var topZ = 0;
+			$('.modal').each(function(){
+			  var thisZ = parseInt($(this).css('zIndex'), 10);
+			  if (thisZ > topZ){
+			    topZ = thisZ;
+			  }
+			});
+			chatModal.css('zIndex', topZ+1);
+		}
+
+		function createModalIfDoesntExist(username, touid) {
 			var chatModal = $('#chat-modal-'+touid);
-			console.log($('#chat-modal-'+touid).length);
-			console.log('#chat-modal-'+touid);
+
 			if(!chatModal.length) {
 				var chatModal = $('#chat-modal').clone();
-				chatModal.attr('id','#chat-modal-'+touid);
+				chatModal.attr('id','chat-modal-'+touid);
 				chatModal.appendTo($('body'));
+				chatModal.draggable();
+				chatModal.find('#chat-with-name').html(username);
+
 				chatModal.find('.close').on('click',function(e){
 					chatModal.hide();
 				});
+
+				chatModal.on('click', function(e){
+					bringModalToTop(chatModal);
+				});
+
+				addSendHandler(chatModal, touid);	
 			}
 
-			chatModal.show();
+			return chatModal;
+		}
 
-			chatModal.find('#chat-with-name').html(username);
-			
-			//addSendHandler(touid);	
-			
-		});
+		function addSendHandler(chatModal, touid) {
+			chatModal.find('#chat-message-input').off('keypress');
+			chatModal.find('#chat-message-input').on('keypress', function(e) {
+				if(e.which === 13) {
+					sendMessage(chatModal, touid);
+				}
+			});
 
-		$('#chat-modal').on('hide', function(){
-			$('#chat-message-input').off('keypress');
-			$('#chat-content').html('');
-		});
+			chatModal.find('#chat-message-send-btn').off('click');
+			chatModal.find('#chat-message-send-btn').on('click', function(e){
+				sendMessage(chatModal, touid);
+				return false;
+			});
+		}
+
+		function sendMessage(chatModal, touid) {
+			var msg = app.strip_tags(chatModal.find('#chat-message-input').val()) + '\n';
+			socket.emit('sendChatMessage', { touid:touid, message:msg});
+			chatModal.find('#chat-message-input').val('');
+			appendChatMessage(chatModal, 'You : ' + msg);
+		}
 
 		socket.on('chatMessage', function(data){
 			var username = data.username;
 			var fromuid = data.fromuid;
 			var message = data.message;
 
-			$('#chat-modal').modal('show');
-			$('#chat-with-name').html(username);
-			$('#chat-content').append(message);
+			var chatModal = createModalIfDoesntExist(username, fromuid);
+			chatModal.show();
+			bringModalToTop(chatModal);
+		
+			appendChatMessage(chatModal, message)
+		});
 
-			var chatContent = $('#chat-content');
+		function appendChatMessage(chatModal, message){
+			var chatContent = chatModal.find('#chat-content');
+			chatContent.append(message);
     		chatContent.scrollTop(
         		chatContent[0].scrollHeight - chatContent.height()
     		);
-
-			addSendHandler(fromuid);
-		});
-
-		function addSendHandler(touid) {
-			$('#chat-message-input').off('keypress');
-			$('#chat-message-input').on('keypress', function(e) {
-				if(e.which === 13) {
-					sendMessage(touid);
-				}
-			});
-
-			$('#chat-message-send-btn').off('click');
-			$('#chat-message-send-btn').on('click', function(e){
-				sendMessage(touid);
-				return false;
-			});
-		}
-
-		function sendMessage(touid) {
-			var msg = $('#chat-message-input').val() + '\n';
-			socket.emit('sendChatMessage', { touid:touid, message:msg});
-			$('#chat-message-input').val('');
-			$('#chat-content').append('You : '+ msg);
 		}
 		//end of chat
 

src/websockets.js

@@ -5,6 +5,7 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
 	config = require('../config.js'),
 	user = require('./user.js'),
 	posts = require('./posts.js'),
+	utils = require('./utils.js'),
 	topics = require('./topics.js'),
 	categories = require('./categories.js');
 	
@@ -240,7 +241,7 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
 			var touid = data.touid;
 
 			if(userSockets[touid]) {
-				var msg = data.message;
+				var msg = utils.strip_tags(data.message);
 
 				user.getUserField(uid, 'username', function(username) {
 					var finalMessage = username + ' says : ' + msg;