client side templates in, fixed home page to parse templates on ajaxify, added footer to the page transition animation for smoothness

public/src/ajaxify.js

@@ -18,17 +18,20 @@ var ajaxify = {};
 				current_state = url;
 
 				window.history.pushState({}, url, "/" + url);
-				
-				jQuery('#content').fadeOut(100, function() {
-					content.innerHTML = templates[tpl_url];
-					exec_body_scripts(content);
 
-					ajaxify.enable();
-					if (callback) {
-						callback();
-					}
+				jQuery('#content, #footer').fadeOut(150, function() {
+					//content.innerHTML = templates[tpl_url];
+					load_template(function() {
+						exec_body_scripts(content);
+
+						ajaxify.enable();
+						if (callback) {
+							callback();
+						}
+						
+						jQuery('#content, #footer').fadeIn(200);
+					});
 					
-					jQuery('#content').fadeIn(200);
 				});
 				
 			}
@@ -111,4 +114,5 @@ var ajaxify = {};
 			evalScript(scripts[i]);
 		}
 	};
+	
 }(jQuery));

public/src/app.js

@@ -135,4 +135,7 @@ var socket,
 			if (data.status === 'ok') alert('Logged out.');
 		});
 	})
+
+
+
 }());

public/src/templates.js

@@ -1,19 +1,122 @@
 var templates = {};
 
-function loadTemplates(templatesToLoad) {
-	var timestamp = new Date().getTime();
+(function() {
 
-	for (var t in templatesToLoad) {
-		(function(template) {
-			$.get('/templates/' + template + '.tpl?v=' + timestamp, function(html) {
-				templates[template] = html;
-			});
-		}(templatesToLoad[t]));
+	function loadTemplates(templatesToLoad) {
+		var timestamp = new Date().getTime();
+
+		for (var t in templatesToLoad) {
+			(function(file) {
+				$.get('/templates/' + file + '.tpl?v=' + timestamp, function(html) {
+					var template = function() {
+						this.toString = function() {
+							return this.html;
+						};
+					}
+
+					template.prototype.parse = parse;
+					template.prototype.html = String(html);
+					
+					templates[file] = new template;
+				});
+			}(templatesToLoad[t]));
+		}
 	}
-}
 
-function templates_init() {
-	loadTemplates(['register', 'home', 'login', 'reset']);	
-}
 
-templates_init();
+	function init() {
+		loadTemplates([
+				'header', 'footer', 'register', 'home',
+				'login', 'reset', 'reset_code', 'account_settings',
+				'logout',
+				'emails/reset', 'emails/reset_plaintext'
+			]);
+	}
+
+
+	//modified from https://github.com/psychobunny/dcp.templates
+	var parse = function(data) {
+		function replace(key, value, template) {
+			var searchRegex = new RegExp('{' + key + '}', 'g');
+			return template.replace(searchRegex, value);
+		}
+
+		function makeRegex(block) {
+			return new RegExp("<!-- BEGIN " + block + " -->[^]*<!-- END " + block + " -->", 'g');
+		}
+
+		function getBlock(regex, block, template) {
+			data = template.match(regex);			
+			if (data == null) return;
+
+			data = data[0]
+				.replace("<!-- BEGIN " + block + " -->", "")
+				.replace("<!-- END " + block + " -->", "");
+
+			return data;
+		}
+
+		function setBlock(regex, block, template) {
+			return template.replace(regex, block);
+		}
+
+		var template = this.html, regex, block;
+
+		return (function parse(data, namespace, template) {
+
+			for (var d in data) {
+				if (data.hasOwnProperty(d)) {
+					if (data[d] instanceof String || data[d] === null) {
+						continue;
+					} else if (data[d].constructor == Array) {
+						namespace += d;
+						
+						regex = makeRegex(d),
+						block = getBlock(regex, namespace, template)
+						if (block == null) continue;
+
+						var numblocks = data[d].length - 1, i = 0, result = "";
+
+						do {
+							result += parse(data[d][i], namespace + '.', block);
+						} while (i++ < numblocks);
+						
+						template = setBlock(regex, result, template);
+						
+					} else if (data[d] instanceof Object) {
+						namespace += d + '.';
+						
+						regex = makeRegex(d),
+						block = getBlock(regex, namespace, template)
+						if (block == null) continue;
+
+						block = parse(data[d], namespace, block);
+						template = setBlock(regex, block, template);
+					} else {								
+						template = replace(namespace + d, data[d], template);
+					}
+				}					
+			}
+
+			return template;
+			
+		})(data, "", template);
+	}
+
+
+	init();
+
+}());
+
+function load_template(callback) {
+	var location = document.location || window.location,
+		rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : '');
+
+	var url = location.href.replace(rootUrl +'/', '');
+	if (url == '') url = 'home';
+	jQuery.get('api/' + url, function(data) {
+		
+		document.getElementById('content').innerHTML = templates[url].parse(JSON.parse(data));
+		if (callback) callback();
+	});
+}

public/templates/footer.tpl

@@ -2,7 +2,7 @@
 
 	</div><!--END container -->
 	<!-- START Forum Info -->
-	<div class="container" style="padding-top: 50px;">
+	<div id="footer" class="container" style="padding-top: 50px;">
 		<div class="alert alert-info">
 			<span id="number_of_users"></span><br />
 			<span id="latest_user"></span>

public/templates/header.tpl

@@ -110,7 +110,7 @@
 		<div class="navbar-inner">
 			<div class="container">
 				<div class="nav-collapse collapse">
-					<a class="brand" href="#">NodeBB</a>
+					<a class="brand" href="/">NodeBB</a>
 					<ul class="nav">
 						<li class="active"><a href="/">Home</a></li>
 						<li><a href="/register">Register</a></li>

src/topics.js

@@ -26,8 +26,7 @@ var	RDB = require('./redis.js'),
 		
 
 		Topics.get(function(data) {
-			// console.log({'topics': data});
-			forum_body = forum_body.parse({'topics': data});
+			forum_body = forum_body.parse(data);
 			callback(forum_body);
 		}, start, end);
 	};
@@ -76,7 +75,7 @@ var	RDB = require('./redis.js'),
 							});
 						}
 
-						callback(topics);
+						callback({'topics': topics});
 					}
 				);
 			} else callback([]);

src/webserver.js

@@ -57,9 +57,19 @@ var express = require('express'),
 	app.get('/', function(req, res) {
 		global.modules.topics.generate_forum_body(function(forum_body) {
 			res.send(templates['header'] + forum_body + templates['footer']);	
-		})
-		
-		//res.send(templates['header'] + templates['home'] + templates['footer']);
+		});
+	});
+
+	app.get('/api/:method', function(req, res) {
+		switch(req.params.method) {
+			case 'home' :
+					global.modules.topics.get(function(data) {
+						res.send(JSON.stringify(data));
+					});
+				break;
+			default :
+				res.send('{}');
+		}
 	});
 
 	app.get('/login', function(req, res) {