More improvements to the rendering

client/index.html

@@ -58,7 +58,12 @@
 	<script type="text/html" id="network">
 	{{#networks}}
 	<div class="network list-group" data-id="{{id}}">
-		{{> channels}}
+		{{#channels}}
+		<a href="{{name}}" class="channel list-group-item" data-id="{{id}}" data-name="{{name}}">
+			<span class="badge pull-right"></span>
+			{{name}}
+		</a>
+		{{/channels}}
 	</div>
 	{{/networks}}
 	</script>
@@ -84,10 +89,20 @@
 			<button class="close btn btn-danger btn-sm ">Leave</button>
 		</div>
 		<div class="users">
-			{{> users}}
+			{{#users}}
+			<a href="{{name}}" class="user">
+				{{mode}}{{name}}
+			</a>
+			{{/users}}
 		</div>
 		<div class="messages">
-			{{> messages}}
+			{{#messages}}
+			<div class="message {{type}}">
+				<span class="time">{{time}}</span>
+				<a href="{{user}}" class="user">{{mode}}{{user}}</a>
+				<span class="text">{{text}}</span>
+			</div>
+			{{/messages}}
 		</div>
 		<form onSubmit="return false;">
 			<input type="text" class="input" data-target="{{id}}"/>

client/js/chat.js

@@ -8,7 +8,6 @@ $(function() {
 		"USERS"
 	], function(i, type) {
 		socket.on(type, function(data) {
-			console.log(data);
 			render(type, data);
 		});
 	});
@@ -27,18 +26,16 @@ $(function() {
 		switch (type) {
 
 		case "NETWORKS":
-			var windows = chat
+			var html = "";
-				.find("#windows")
-				.html("");
 			data.forEach(function(network) {
-				windows.append(Mustache.render(window_tpl, network, {
+				html += Mustache.render(window_tpl, network);
-					users: user_tpl,
-					messages: message_tpl
-				}));
 			});
+
+			$("#windows")[0].innerHTML = html;
+
 			sidebar.find("#list").html(
-				Mustache.render(network_tpl, {networks: data}, {
+				Mustache.render(network_tpl, {
-					channels: channel_tpl
+					networks: data
 				})
 			).find(".channel")
 				.first()
@@ -51,23 +48,35 @@ $(function() {
 			break;
 
 		case "CHANNELS":
+			var target = data.target;
 			if (data.action == "remove") {
-				chat.find(".window[data-id='" + data.data.id + "']").remove();
+				$("[data-id='" + data.data.id + "']").remove();
-				sidebar.find(".channel[data-id='" + data.data.id + "']").remove();
 				return;
 			}
 
-			sidebar.find(".network[data-id='" + data.target + "']").append(
+			var network = sidebar
-				Mustache.render(channel_tpl, {channels: data.data}, {
+				.find(".network")
-					channels: channel_tpl
+				.find(".channel")
+				.removeClass("active")
+				.end();
+
+			network = network.filter("[data-id='" + data.target + "']").append(
+				Mustache.render(channel_tpl, {
+					channels: data.data
 				})
-			);
+			).find(".channel")
-			chat.find("#windows").append(
+				.last()
-				Mustache.render(window_tpl, {channels: data.data}, {
+				.addClass("active");
-					users: user_tpl,
+
-					messages: message_tpl
+			$("#windows").append(
+				Mustache.render(window_tpl, {
+					channels: data.data
 				})
-			);
+			).find(".window")
+				.last()
+				.bringToTop()
+				.find(".messages")
+				.sticky();
 			break;
 
 		case "USERS":
@@ -77,7 +86,9 @@ $(function() {
 			}
 
 			target = target.find(".users");
-			target.html(Mustache.render(user_tpl, {users: data.data}));
+			target.html(Mustache.render(user_tpl, {
+				users: data.data
+			}));
 			break;
 
 		case "MESSAGES":
@@ -92,7 +103,9 @@ $(function() {
 			}
 
 			target = target.find(".messages");
-			target.append(Mustache.render(message_tpl, {messages: message}));
+			target.append(Mustache.render(message_tpl, {
+				messages: message
+			}));
 			break;
 
 		}
@@ -141,6 +154,10 @@ $(function() {
 		}
 	});
 
+	chat.on("focus", "input[type=text]", function() {
+		$(this).closest(".window").find(".messages").scrollToBottom();
+	});
+
 	chat.on("click", ".close", function() {
 		var btn = $(this);
 		btn.prop("disabled", true);
@@ -185,8 +202,9 @@ $(function() {
 	$.fn.bringToTop = function() {
 		return this.css('z-index', highest++)
 			.addClass("active")
-			.find(".input")
+			//.find(".input")
-			.end()
+			//.focus()
+			//.end()
 			.siblings()
 			.removeClass("active")
 			.end();