Improved rendering

client/css/style.css

@@ -153,7 +153,7 @@ h2 {
 #chat .users {
 	background: #fff;
 	border-left: 1px solid #ddd;
-	bottom: 0;
+	bottom: 30px;
 	overflow-y: auto;
 	padding: 4px 0;
 	position: absolute;
@@ -255,6 +255,7 @@ h2 {
 		display: none;
 	}
 	#chat .users {
+		bottom: 0;
 		right: -160px;
 	}
 	#chat .users a {

client/index.html

@@ -55,20 +55,24 @@
 	
 	<div id="scripts">
 
-	<script type="text/html" id="networks">
+	<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>
 
-	<script type="text/html" id="channels">
+	<script type="text/html" id="channel">
+	{{#channels}}
+	<a href="{{name}}" class="channel list-group-item" data-id="{{id}}" data-name="{{name}}">
+		<span class="badge pull-right"></span>
+		{{name}}
+	</a>
+	{{/channels}}
+	</script>
+
+	<script type="text/html" id="window">
 	{{#channels}}
 	<div class="window {{type}}" data-id="{{id}}">
 		<div class="toggle">
@@ -93,7 +97,7 @@
 	{{/channels}}
 	</script>
 
-	<script type="text/html" id="users">
+	<script type="text/html" id="user">
 	{{#users}}
 	<a href="{{name}}" class="user">
 		{{mode}}{{name}}
@@ -101,7 +105,7 @@
 	{{/users}}
 	</script>
 
-	<script type="text/html" id="messages">
+	<script type="text/html" id="message">
 	{{#messages}}
 	<div class="message {{type}}">
 		<span class="time">{{time}}</span>

client/js/chat.js

@@ -8,6 +8,7 @@ $(function() {
 		"USERS"
 	], function(i, type) {
 		socket.on(type, function(data) {
+			console.log(data);
 			render(type, data);
 		});
 	});
@@ -16,59 +17,84 @@ $(function() {
 	var sidebar = $("#sidebar");
 
 	// Templates
-	var networks = $("#networks").html();
+	var network_tpl = $("#network").html();
-	var channels = $("#channels").html();
+	var channel_tpl = $("#channel").html();
-	var messages = $("#messages").html();
+	var window_tpl = $("#window").html();
-	var users = $("#users").html()
+	var message_tpl = $("#message").html();
+	var user_tpl = $("#user").html()
 
 	function render(type, data) {
-		var target;
-		if (typeof data.target !== "undefined") {
-			target = $(".window[data-id='" + data.target + "']");
-		}
-
 		switch (type) {
+
 		case "NETWORKS":
-			var partials = {
-				users: users,
-				messages: messages
-			};
 			var windows = chat
 				.find("#windows")
 				.html("");
 			data.forEach(function(network) {
-				windows.append(Mustache.render(channels, network, partials));
+				windows.append(Mustache.render(window_tpl, network, {
+					users: user_tpl,
+					messages: message_tpl
+				}));
 			});
 			sidebar.find("#list").html(
-				Mustache.render(networks, {
+				Mustache.render(network_tpl, {networks: data}, {
-					networks: data
+					channels: channel_tpl
 				})
-			);
+			).find(".channel")
-			sidebar.find(".channel")
+				.first()
-				.last()
 				.addClass("active");
 
 			chat.find(".messages").sticky().scrollToBottom();
 			chat.find(".window")
-				// Sort windows by `data-id` value.
+				.first()
-				.sort(function(a, b) { return ($(a).data("id") - $(b).data("id")); })
-				.last()
 				.bringToTop();
 			break;
 
+		case "CHANNELS":
+			if (data.action == "remove") {
+				chat.find(".window[data-id='" + data.data.id + "']").remove();
+				sidebar.find(".channel[data-id='" + data.data.id + "']").remove();
+				return;
+			}
+
+			sidebar.find(".network[data-id='" + data.target + "']").append(
+				Mustache.render(channel_tpl, {channels: data.data}, {
+					channels: channel_tpl
+				})
+			);
+			chat.find("#windows").append(
+				Mustache.render(window_tpl, {channels: data.data}, {
+					users: user_tpl,
+					messages: message_tpl
+				})
+			);
+			break;
+
 		case "USERS":
+			var target;
+			if (typeof data.target !== "undefined") {
+				target = chat.find(".window[data-id='" + data.target + "']");
+			}
+
 			target = target.find(".users");
-			target.html(Mustache.render(users, {users: data.data}));
+			target.html(Mustache.render(user_tpl, {users: data.data}));
 			break;
 
 		case "MESSAGES":
+			var target;
+			if (typeof data.target !== "undefined") {
+				target = chat.find(".window[data-id='" + data.target + "']");
+			}
+
 			var message = data.data;
-			if (message.type == "error" || message.type == "notice") {
+			if (message.type == "error") {
 				target = target.parent().find(".active");
 			}
+
 			target = target.find(".messages");
-			target.append(Mustache.render(messages, {messages: message}));
+			target.append(Mustache.render(message_tpl, {messages: message}));
 			break;
+
 		}
 	}
 
@@ -123,10 +149,6 @@ $(function() {
 			text: "/LEAVE"
 		});
 	});
-	
-	chat.on("click", ".messages", function() {
-		$(this).next("form").find("input:first").focus();
-	});
 
 	chat.on("append", ".window", function() {
 		var id = $(this).data("id");

lib/models.js

@@ -70,18 +70,22 @@ models.Channel = Backbone.Model.extend({
 		});
 
 		this.set("messages", new models.MessageCollection());
-		this.get("messages").on("all", function() {
+		this.get("messages").on("all", function(action, data) {
 			this.trigger("MESSAGES", {
 				target: this.get("id"),
-				data: this.get("messages").last()
+				type: "message",
+				data: data,
+				action: action
 			});
 		}, this);
 
 		this.set("users", new models.UserCollection());
-		this.get("users").on("all", function() {
+		this.get("users").on("all", function(action) {
 			this.trigger("USERS", {
 				target: this.get("id"),
-				data: this.get("users")
+				type: "user",
+				data: this.get("users"),
+				action: action
 			});
 		}, this);
 	}
@@ -102,13 +106,19 @@ models.Network = Backbone.Model.extend({
 		});
 
 		this.set("channels", new models.ChannelCollection());
-		this.get("channels").on("all", function(type, data) {
+		this.get("channels").on("all", function(action, data) {
-			if (type == "USERS" || type == "MESSAGES") {
+			if (action == "USERS" || action == "MESSAGES") {
-				this.trigger(type, data);
+				this.trigger(action, data);
 			} else {
-				this.trigger("CHANNELS");
+				this.trigger("CHANNELS", {
+					target: this.get("id"),
+					type: "channel",
+					data: data,
+					action: action
+				});
 			}
 		}, this);
+
 		this.get("channels").add(new models.Channel({
 			type: "network",
 			name: this.get("host")

lib/server.js

@@ -18,28 +18,14 @@ Server.prototype.listen = function(port) {
 		.use(connect.static("client"))
 		.listen(port);
 
-	this.networks.on("all", function(type, data) {
+	this.networks.on("all", function(action, data) {
-		if (type == "USERS" || type == "MESSAGES") {
+		this.sockets.emit(action, data);
-			this.sockets.emit(type, data);
-		} else {
-			// Force a refresh on network and channel events.
-			this.sockets.emit(
-				"NETWORKS", self.networks
-			);
-		}
 	}, this);
 
 	this.sockets = io.listen(http, {log: false}).sockets;
 	this.sockets.on("connection", function(socket) {
-		socket.emit(
+		socket.emit("NETWORKS", self.networks);
-			"NETWORKS", self.networks
+		socket.on("input", function(input) { handleInput.call(self, input); });
-		);
-		socket.on(
-			"input",
-			function(input) {
-				handleInput.call(self, input);
-			}
-		);
 	});
 
 	if (config.autoConnect) {
@@ -53,7 +39,13 @@ Server.prototype.connect = function(host, channels) {
 	var network = new models.Network({
 		host: host
 	});
-	this.networks.add(network);
+
+	this.networks.add(network, {silent: true});
+	this.networks.trigger(
+		"NETWORKS",
+		this.networks
+	);
+
 	network.connect(channels).addListener("raw", function() {
 		handleEvent.apply(network, arguments);
 	});
@@ -482,7 +474,7 @@ function handleEvent(argv) {
 		}
 
 		if (typeof rpl_namreply === "undefined") {
-			channel.get("users").reset({silent: true});
+			channel.get("users").reset(undefined, {silent: true});
 		}
 		
 		// This variable is global but will be deleted when