closes #716, also moved chat to its own template

public/src/app.js

@@ -391,14 +391,16 @@ var socket,
 		}
 
 		require(['chat'], function (chat) {
-			var chatModal;
 			if (!chat.modalExists(touid)) {
-				chatModal = chat.createModal(username, touid);
+				chat.createModal(username, touid, loadAndCenter);
 			} else {
-				chatModal = chat.getModal(touid);
+				loadAndCenter(chat.getModal(touid));
+			}
+
+			function loadAndCenter(chatModal) {
+				chat.load(chatModal.attr('UUID'));
+				chat.center(chatModal);
 			}
-			chat.load(chatModal.attr('UUID'));
-			chat.center(chatModal);
 		});
 	};
 

public/src/forum/footer.js

@@ -227,9 +227,8 @@
 
 	socket.on('event:chats.receive', function(data) {
 		require(['chat'], function(chat) {
-			var modal = null;
 			if (chat.modalExists(data.fromuid)) {
-				modal = chat.getModal(data.fromuid);
+				var modal = chat.getModal(data.fromuid);
 				chat.appendChatMessage(modal, data.message, data.timestamp);
 
 				if (modal.is(":visible")) {
@@ -242,9 +241,10 @@
 					app.alternatingTitle(data.username + ' has messaged you');
 				}
 			} else {
-				modal = chat.createModal(data.username, data.fromuid);
-				chat.toggleNew(modal.attr('UUID'), true);
-				app.alternatingTitle(data.username + ' has messaged you');
+				chat.createModal(data.username, data.fromuid, function(modal) {
+					chat.toggleNew(modal.attr('UUID'), true);
+					app.alternatingTitle(data.username + ' has messaged you');
+				});
 			}
 		});
 	});

public/src/modules/chat.js

@@ -46,59 +46,65 @@ define(['taskbar', 'string'], function(taskbar, S) {
 
 	module.createModal = function(username, touid, callback) {
 
-		var chatModal = $('#chat-modal').clone(),
-			uuid = utils.generateUUID();
-
-		chatModal.intervalId = 0;
-		chatModal.touid = touid;
-		chatModal.username = username;
-
-		chatModal.attr('id', 'chat-modal-' + touid);
-		chatModal.attr('UUID', uuid);
-		chatModal.appendTo($('body'));
-		chatModal.draggable({
-			start:function() {
-				module.bringModalToTop(chatModal);
-			}
-		});
-
-		chatModal.find('#chat-with-name').html(username);
-
-		chatModal.find('.close').on('click', function(e) {
-			clearInterval(chatModal.intervalId);
-			chatModal.intervalId = 0;
-			chatModal.remove();
-			chatModal.data('modal', null);
-			taskbar.discard('chat', uuid);
-		});
-
-		chatModal.on('click', function(e) {
-			module.bringModalToTop(chatModal);
+		templates.preload_template('chat', function() {
+			translator.translate(templates['chat'].parse({}), function (chatTpl) {
+
+				var chatModal = $(chatTpl),
+					uuid = utils.generateUUID();
+
+				chatModal.intervalId = 0;
+				chatModal.touid = touid;
+				chatModal.username = username;
+
+				chatModal.attr('id', 'chat-modal-' + touid);
+				chatModal.attr('UUID', uuid);
+				chatModal.appendTo($('body'));
+				chatModal.draggable({
+					start:function() {
+						module.bringModalToTop(chatModal);
+					}
+				});
+
+				chatModal.find('#chat-with-name').html(username);
+
+				chatModal.find('.close').on('click', function(e) {
+					clearInterval(chatModal.intervalId);
+					chatModal.intervalId = 0;
+					chatModal.remove();
+					chatModal.data('modal', null);
+					taskbar.discard('chat', uuid);
+				});
+
+				chatModal.on('click', function(e) {
+					module.bringModalToTop(chatModal);
+				});
+
+				addSendHandler(chatModal);
+
+				getChatMessages(chatModal, function() {
+					checkOnlineStatus(chatModal);
+				});
+
+				taskbar.push('chat', chatModal.attr('UUID'), {
+					title:'<i class="fa fa-comment"></i> ' + username,
+					state: ''
+				});
+
+				callback(chatModal);
+			});
 		});
-
-		addSendHandler(chatModal);
-
-		getChatMessages(chatModal, function() {
-			checkOnlineStatus(chatModal);
-		});
-
-		taskbar.push('chat', chatModal.attr('UUID'), {
-			title:'<i class="fa fa-comment"></i> ' + username,
-			state: ''
-		});
-
-		return chatModal;
 	}
 
 	module.center = function(chatModal) {
 		chatModal.css("position", "fixed");
 		chatModal.css("left", Math.max(0, (($(window).width() - $(chatModal).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
+		chatModal.css("top", "0px");
 		return chatModal;
 	}
 
 	module.load = function(uuid) {
 		var chatModal = $('div[UUID="'+uuid+'"]');
-		chatModal.show();
+		chatModal.removeClass('hide');
 		module.bringModalToTop(chatModal);
 		checkOnlineStatus(chatModal);
 		taskbar.updateActive(uuid);
@@ -108,7 +114,7 @@ define(['taskbar', 'string'], function(taskbar, S) {
 
 	module.minimize = function(uuid) {
 		var chatModal = $('div[UUID="'+uuid+'"]');
-		chatModal.hide();
+		chatModal.addClass('hide');
 		taskbar.minimize('chat', uuid);
 		clearInterval(chatModal.intervalId);
 		chatModal.intervalId = 0;

public/templates/chat.tpl

@@ -0,0 +1,18 @@
+
+<div id="chat-modal" class="chat-modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<h4>[[footer:chat.chatting_with]]</h4>
+			</div>
+			<div class="modal-body">
+				<textarea class="form-control" id="chat-content" cols="40" rows="10" readonly></textarea><br/>
+				<input id="chat-message-input" type="text" class="form-control" name="chat-message" placeholder="[[footer:chat.placeholder]]"/>
+			</div>
+			<div class="modal-footer">
+				<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary btn-lg btn-block">[[footer:chat.send]]</button>
+			</div>
+		</div>
+	</div>
+</div>

public/templates/footer.tpl

@@ -2,25 +2,6 @@
 
 	</div><!--END container -->
 
-	<div id="chat-modal" class="modal chat-modal col-lg-12 col-md-12" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-					<h4 id="myModalLabel">[[footer:chat.chatting_with]]</h4>
-				</div>
-				<div class="modal-body">
-					<textarea class="form-control" id="chat-content" cols="40" rows="10" readonly></textarea><br/>
-					<input id="chat-message-input" type="text" class="form-control" name="chat-message" placeholder="[[footer:chat.placeholder]]"/>
-				</div>
-				<div class="modal-footer">
-					<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary btn-lg btn-block
-					">[[footer:chat.send]]</button>
-				</div>
-			</div><!-- /.modal-content -->
-		</div><!-- /.modal-dialog -->
-	</div><!-- /.modal -->
-
 	<div id="upload-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Upload Picture" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">

src/routes/debug.js

@@ -87,6 +87,7 @@ var	DebugRoute = function(app) {
 				site_title: 'derp',
 				confirm_link: 'linkylink'
 			});
+
 			res.send();
 		});
 	});