Merge branch 'master' of https://github.com/designcreateplay/NodeBB

public/css/style.less

@@ -734,3 +734,13 @@ body .navbar .nodebb-inline-block {
 		color: red;
 	}
 }
+
+#chat-content {
+	width:95%;
+	height:200px;
+	resize:none;
+}
+
+#chat-message-input {
+	width:95%;
+}

public/src/ajaxify.js

@@ -48,9 +48,6 @@ var ajaxify = {};
 
 			jQuery('#footer, #content').fadeOut(100);
 
-			// Close the post window if it is open
-			app.close_post_window();
-
 			templates.load_template(function() {
 				exec_body_scripts(content);
 
@@ -62,6 +59,7 @@ var ajaxify = {};
 				app.process_page();
 				
 				jQuery('#content, #footer').fadeIn(200);
+				app.close_post_window();
 			}, url, template);
 
 			return true;

public/src/app.js

@@ -14,6 +14,10 @@ var socket,
 			config = data;
 			socket = io.connect('http://' + config.socket.address + config.socket.port? ':' + config.socket.port : '');
 
+			var reconnecting = false;
+			var reconnectTries = 0;
+
+
 			socket.on('event:connect', function(data) {
 				console.log('connected to nodebb socket: ', data);
 			});
@@ -32,15 +36,56 @@ var socket,
 				contentEl.value = data.post;
 			});
 
+			socket.on('connect', function(data){
+				if(reconnecting) {
+					app.alert({
+						alert_id: 'connection_alert',
+						title: 'Connected',
+						message: 'Connection successfull',
+						type: 'success',
+						timeout: 5000
+					});
+					reconnecting = false;
+				}
+			});
+
 			socket.on('disconnect', function(data){
-				setTimeout(function() { 
+				app.alert({
-					$('#disconnect-modal').modal('show');
+					alert_id: 'connection_alert',
+					title: 'Disconnect',
+					message: 'You have disconnected from NodeBB, we will try to reconnect!',
+					type: 'error',
+					timeout: 5000
+				});
+			});
+
+			socket.on('reconnecting', function(data) {
+				reconnecting = true;
+				reconnectTries++;
+				if(reconnectTries > 4) {
+					showDisconnectModal();
+					return;
+				}
+				app.alert({
+					alert_id: 'connection_alert',
+					title: 'Reconnecting',
+					message: 'You have disconnected from NodeBB, we will try to reconnect you. <br/><i class="icon-refresh icon-spin"></i>',
+					type: 'notify',
+					timeout: 5000
+				});
+			});
+
+			function showDisconnectModal() {
+				$('#disconnect-modal').modal({
+					backdrop:'static',
+					show:true
+				});
+
 				$('#reload-button').on('click',function(){
 					$('#disconnect-modal').modal('hide');
 					window.location.reload();
 				});
-				}, 500);
+			}
-			});
 		},
 		async: false
 	});
@@ -50,6 +95,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
@@ -57,17 +113,24 @@ var socket,
 	// timeout default = permanent
 	// location : notification_window (default) or content
 	app.alert = function(params) {
+		
+
+		var alert_id = 'alert_button_' + ((params.alert_id) ? params.alert_id : new Date().getTime()); 
+
+		var alert = $('#'+alert_id);
+
+		if(alert.length > 0) {
+			alert.find('strong').html(params.title);
+			alert.find('p').html(params.message);
+			alert.attr('class', "alert toaster-alert " + ((params.type=='warning') ? '' : "alert-" + params.type));
+		}
+		else {
+
 			var div = document.createElement('div'),
 				button = document.createElement('button'),
 				strong = document.createElement('strong'),
 				p = document.createElement('p');
 
-		var alert_id = 'alert_button_' + ((params.alert_id) ? params.alert_id : new Date().getTime()); 
-
-		jQuery('#'+alert_id).fadeOut(500, function() {
-			this.remove();
-		});
-
 			p.innerHTML = params.message;
 			strong.innerHTML = params.title;
 
@@ -84,7 +147,8 @@ var socket,
 				div.parentNode.removeChild(div);
 			}
 
-		if (params.location == null) params.location = 'notification_window';
+			if (params.location == null) 
+				params.location = 'notification_window';
 
 			jQuery('#'+params.location).prepend(jQuery(div).fadeIn('100'));
 
@@ -105,6 +169,7 @@ var socket,
 				}
 			}
 		}
+	}
 
 	var post_window = null,
 		submit_post_btn = null,
@@ -114,6 +179,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/admin/users.tpl

@@ -16,7 +16,7 @@
 <!-- BEGIN users -->
 <div class="users-box well">
  	<a href="/users/{users.username}">
-	    <img src="{users.picture}"/>
+	    <img src="{users.picture}" class="user-8080-picture"/>
     </a>
     <br/>
 	<a href="/users/{users.username}">{users.username}</a>

public/templates/footer.tpl

@@ -81,7 +81,6 @@
 			}
 		});
 
-
 		// Post window events
 		var	postWindowEl = document.getElementById('post_window'),
 			discardEl = document.getElementById('discard-post');

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>
@@ -85,13 +86,25 @@
 	    <h3 id="myModalLabel">Socket Disconnect</h3>
 	  </div>
 	  <div class="modal-body">
-		<span>Looks like you disconnected, try reloading the page.</span>
+		<span id="disconnect-text">Looks like you disconnected, try reloading the page.</span>
 	  </div>
 	  <div class="modal-footer">
 	    <a id="reload-button" href="/" class="btn btn-primary">Reload</a>
 	  </div>
 	</div>
 
+	<div id="chat-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	  <div class="modal-header">
+	  	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+	    <h3 id="myModalLabel">Chat with <span id="chat-with-name"></span></h3>
+	  </div>
+	  <div class="modal-body">
+		<textarea id="chat-content" cols="40" rows="10" readonly></textarea><br/>
+		<input id="chat-message-input" type="text" name="chat-message" placeholder="type chat message here press enter to send"/><br/>
+		<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary">Send</button>
+	  </div>
+	</div>
+
 	<div id="notification_window"></div>
 
 	<div class="container" id="content">

public/templates/topic.tpl

@@ -25,12 +25,12 @@
 					</a>
 					<h3><p class="topic-title">{topic_name}</p> 
 						<div class="pull-right hidden-phone" style="margin-right: 10px;">
-							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools}"><i class="icon-pencil"></i></button>
+							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools}" type="button"><i class="icon-pencil"></i></button>
-							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools}"><i class="icon-trash"></i></button>
+							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools}" type="button"><i class="icon-trash"></i></button>
-							<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote"><i class="icon-quote-left"></i></button>
+							<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote" type="button"><i class="icon-quote-left"></i></button>
 
-							<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
+							<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn" type="button"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
-							<button id="post_reply" class="btn btn-primary btn post_reply">Reply <i class="icon-reply"></i></button>
+							<button id="post_reply" class="btn btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
 						</div>
 					</h3>
 
@@ -52,7 +52,7 @@
 	<!-- END main_posts -->
 
 	<!-- BEGIN posts -->
-		<li class="row post-row" data-pid="{posts.pid}" data-uid="{posts.uid}" data-deleted="{posts.deleted}">
+		<li class="row post-row" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}">
 			<div class="span1 profile-image-block visible-desktop">
 				<!--<i class="icon-spinner icon-spin icon-2x pull-left"></i>-->
 				<a href="/users/{posts.username}">
@@ -66,6 +66,7 @@
 					<div class="post-signature">{posts.signature}</div>
 					<div class="profile-block">
 						<span class="post-buttons">
+							<div id="ids_{posts.pid}_{posts.uid}" class="chat hidden-phone"><i class="icon-comment"></i></div>
 							<div id="ids_{posts.pid}_{posts.uid}" class="edit {posts.display_moderator_tools} hidden-phone"><i class="icon-pencil"></i></div>
 							<div id="ids_{posts.pid}_{posts.uid}" class="delete {posts.display_moderator_tools} hidden-phone"><i class="icon-trash"></i></div>
 							<div id="quote_{posts.pid}_{posts.uid}" class="quote hidden-phone"><i class="icon-quote-left"></i></div>
@@ -82,9 +83,9 @@
 	<!-- END posts -->
 </ul>
 <hr />
-<button id="post_reply" class="btn btn-primary btn-large post_reply">Reply</button>
+<button id="post_reply" class="btn btn-primary btn-large post_reply" type="button">Reply</button>
 <div class="btn-group pull-right" id="thread-tools" style="visibility: hidden;">
-	<button class="btn dropdown-toggle" data-toggle="dropdown">Thread Tools <span class="caret"></span></button>
+	<button class="btn dropdown-toggle" data-toggle="dropdown" type="button">Thread Tools <span class="caret"></span></button>
 	<ul class="dropdown-menu">
 		<li><a href="#" id="pin_thread"><i class="icon-pushpin"></i> Pin Thread</a></li>
 		<li><a href="#" id="lock_thread"><i class="icon-lock"></i> Lock Thread</a></li>
@@ -191,6 +192,7 @@
 					e.preventDefault();
 					moveThreadModal.modal('show');
 				}, false);
+
 				moveThreadModal.on('shown', function() {
 					var loadingEl = document.getElementById('categories-loading');
 					if (loadingEl) {
@@ -291,6 +293,106 @@
 			}
 		}); 
 
+		// CHAT, move to chat.js later?
+
+		$('.post-container').delegate('.chat', 'click', function(e){
+
+			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);
+
+			if(!chatModal.length) {
+				var chatModal = $('#chat-modal').clone();
+				chatModal.attr('id','chat-modal-'+touid);
+				chatModal.appendTo($('body'));
+				chatModal.draggable({
+					start:function(){
+						bringModalToTop(chatModal);
+					}
+				});
+				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);	
+			}
+
+			return chatModal;
+		}
+
+		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);
+				}
+			});
+
+			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());
+			if(msg.length) {
+				msg = msg +'\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;
+
+			var chatModal = createModalIfDoesntExist(username, fromuid);
+			chatModal.show();
+			bringModalToTop(chatModal);
+		
+			appendChatMessage(chatModal, message)
+		});
+
+		function appendChatMessage(chatModal, message){
+			var chatContent = chatModal.find('#chat-content');
+			chatContent.append(message);
+    		chatContent.scrollTop(
+        		chatContent[0].scrollHeight - chatContent.height()
+    		);
+		}
+		//end of chat
+
+
 		ajaxify.register_events([
 			'event:rep_up', 'event:rep_down', 'event:new_post', 'api:get_users_in_room',
 			'event:topic_deleted', 'event:topic_restored', 'event:topic:locked',
@@ -299,6 +401,7 @@
 			'api:posts.favourite'
 		]);
 
+
 		socket.on('api:get_users_in_room', function(users) {
 			var anonymous = users.anonymous,
 				usernames = users.usernames,
@@ -437,7 +540,7 @@
 				var pid = $(this).parents('li').attr('data-pid');
 				
 				$('#post_content').val('> ' + $('#content_' + pid).html() + '\n');
-
+				console.log("POST ID "+pid);
 			});
 
 			jQuery(div + ' .edit, ' + div + ' .delete').each(function() {

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'),
 	threadTools = require('./threadTools.js'),
 	postTools = require('./postTools.js'),
@@ -12,6 +13,7 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
 	
 (function(io) {
 	var	users = {},
+		userSockets = {},
 		rooms = {}
 
 	global.io = io;
@@ -50,6 +52,7 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
 		var hs = socket.handshake;
 		
 		var uid = users[hs.sessionID];
+		userSockets[uid] = socket;
 		user.go_online(uid);
 		
 		
@@ -235,6 +238,19 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
 		socket.on('api:posts.restore', function(data) {
 			postTools.restore(uid, data.pid);
 		});
+
+		socket.on('sendChatMessage', function(data) {
+			var touid = data.touid;
+
+			if(userSockets[touid]) {
+				var msg = utils.strip_tags(data.message);
+
+				user.getUserField(uid, 'username', function(username) {
+					var finalMessage = username + ' says : ' + msg;
+					userSockets[touid].emit('chatMessage', {fromuid:uid, username:username, message:finalMessage});
+				});
+			}
+		});
 	});
 	
 }(SocketIO));