From c3aee3d025e8234035a8a3ba56dfd1ec999f4611 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Tue, 1 Apr 2014 20:09:08 +0200
Subject: [PATCH] Moving back to mustache templating

---
 client/index.html | 31 +++++++++--------------------
 client/js/chat.js | 50 +++++++++++++++++++++++++++++------------------
 2 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/client/index.html b/client/index.html
index c27393ce..f25d5ee7 100644
--- a/client/index.html
+++ b/client/index.html
@@ -57,12 +57,7 @@
 	<script type="text/html" id="network">
 	{{#networks}}
 	<div id="network-{{id}}" class="network list-group">
-		{{#each channels}}
-		<a href="{{name}}" id="channel-{{id}}" class="channel list-group-item">
-			<span class="badge pull-right"></span>
-			{{name}}
-		</a>
-		{{/each}}
+		{{> channels}}
 	</div>
 	{{/networks}}
 	</script>
@@ -85,23 +80,15 @@
 				<a href="#" class="right">Users</a>
 			</div>
 			<h1>{{name}}</h1>
-			<button class="close btn btn-danger btn-sm ">Leave</button>
+			<button class="close btn btn-danger btn-sm ">
+				Leave
+			</button>
 		</div>
 		<div class="users">
-			{{#each users}}
-			<a href="{{name}}" class="user">
-				{{mode}}{{name}}
-			</a>
-			{{/each}}
+			{{> users}}
 		</div>
 		<div class="messages">
-			{{#each messages}}
-			<div class="message {{type}}">
-				<span class="time">{{time}}</span>
-				<a href="{{from}}" class="user">{{mode}}{{from}}</a>
-				<span class="text">{{type}} {{{link message}}}</span>
-			</div>
-			{{/each}}
+			{{> messages}}
 		</div>
 		<form onSubmit="return false;">
 			<input type="text" class="input" data-target="{{id}}"/>
@@ -124,16 +111,16 @@
 	<div class="message {{type}}">
 		<span class="time">{{time}}</span>
 		<a href="{{from}}" class="user">{{mode}}{{from}}</a>
-		<span class="text">{{type}} {{{link message}}}</span>
+		<span class="text">{{type}} {{message}}</span>
 	</div>
 	{{/messages}}
 	</script>
 	
 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js"></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script>
-
+	
 	<script src="/socket.io/socket.io.js"></script>
 	<script src="/js/lib/jquery.scrollGlue.js"></script>
 	<script src="/js/lib/bootstrap.js"></script>
diff --git a/client/js/chat.js b/client/js/chat.js
index dbe65d52..69347b3d 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -10,9 +10,18 @@ $(function() {
 	var sidebar = $("#sidebar");
 
 	var tpl = [];
-	function render(id, json) {
-		tpl[id] = tpl[id] || Handlebars.compile($(id).html());
-		return tpl[id](json);
+	function render(id, json, partials) {
+		tpl[id] = tpl[id] || $(id).html();
+		if (!json) {
+			// If no data is supplied, return the template instead.
+			// Handy when fetching partials.
+			return tpl[id];
+		}
+		return Mustache.render(
+			tpl[id],
+			json,
+			partials || {}
+		);
 	}
 	
 	function event(type, json) {
@@ -20,13 +29,17 @@ $(function() {
 		
 		case "network":
 			var html = "";
+			var partials = {
+				users: render("#user"),
+				messages: render("#message")
+			};
 			json.forEach(function(network) {
-				html += render("#window", network);
+				html += render("#window", network, partials);
 			});
 			$("#windows")[0].innerHTML = html;
 
 			sidebar.find("#list").html(
-				render("#network", {networks: json})
+				render("#network", {networks: json}, {channels: render("#channel")})
 			).find(".channel")
 				.first()
 				.addClass("active");
@@ -38,8 +51,7 @@ $(function() {
 			break;
 
 		case "channel":
-			var id     = json.data.id;
-			console.log(json.data);
+			var id = json.data.id;
 			if (json.action == "remove") {
 				$("#channel-" + id + ", #window-" + id).remove();
 				return;
@@ -63,9 +75,9 @@ $(function() {
 			break;
 
 		case "user":
-			var target;
-			if (typeof json.target !== "undefined") {
-				target = chat.find("#window-" + json.target);
+			var target = chat.find("#window-" + json.target);
+			if (target.size() == 0) {
+				return;
 			}
 
 			target = target.find(".users");
@@ -73,9 +85,9 @@ $(function() {
 			break;
 
 		case "message":
-			var target;
-			if (typeof json.target !== "undefined") {
-				target = $("#window-" + json.target);
+			var target = $("#window-" + json.target);
+			if (target.size() == 0) {
+				return;
 			}
 			
 			var message = json.data;
@@ -188,9 +200,9 @@ $(function() {
 	};
 });
 
-Handlebars.registerHelper("link", function(text) {
-	var text = Handlebars.Utils.escapeExpression(text);
-	return URI.withinString(text, function(url) {
-		return "<a href='" + url + "' target='_blank'>" + url + "</a>";
-	});
-});
+//Handlebars.registerHelper("link", function(text) {
+//	var text = Handlebars.Utils.escapeExpression(text);
+//	return URI.withinString(text, function(url) {
+//		return "<a href='" + url + "' target='_blank'>" + url + "</a>";
+//	});
+//});