templates refactor part 2

updated so that tpls get loaded on demand as opposed to all at once on
load; added a function to pull the tpl list on load instead of having to
manually define new templates in code; some clean up; added utils.walk;

app.js

@@ -12,7 +12,11 @@ global.templates = {};
 (function(config) {
     config['ROOT_DIRECTORY'] = __dirname;
 
-    templates.init();
+    templates.init([
+        'header', 'footer', 'logout',
+        'emails/reset', 'emails/reset_plaintext', 'emails/email_confirm', 'emails/email_confirm_plaintext'
+    ]);
+    
     templates.ready(function() {
         webserver.init();
     });

public/src/ajaxify.js

@@ -39,17 +39,16 @@ var ajaxify = {};
 			tpl_url = url;
 		}
 		
-		if (templates[tpl_url] && !templates.force_refresh(tpl_url)) {
+		if (templates.is_available(tpl_url) && !templates.force_refresh(tpl_url)) {
 			if (quiet !== true) {
 				window.history.pushState({
 					"url": url
 				}, url, "/" + url);
 			}
 
-			jQuery('#footer').fadeOut(100);
+			jQuery('#footer, #content').fadeOut(100);
-			jQuery('#content').fadeOut(100);
 
-			load_template(function() {
+			templates.load_template(function() {
 				exec_body_scripts(content);
 
 				ajaxify.enable();

public/src/templates.js

@@ -5,7 +5,8 @@
 	var ready_callback,
 		config = {},
 		templates,
-		fs = null;
+		fs = null,
+		available_templates = [];
 
 	module.exports = templates = {};
 
@@ -29,6 +30,10 @@
 		return false;
 	}
 
+	templates.is_available = function(tpl) {
+		return !!jQuery.inArray(tpl, available_templates);
+	};
+
 	templates.ready = function(callback) {
 		if (callback == null && ready_callback) ready_callback();
 		else ready_callback = callback;
@@ -70,37 +75,11 @@
 		}
 
 		function loadClient() {
-			var timestamp = new Date().getTime();
+			jQuery.when(jQuery.getJSON('/templates/config.json'), jQuery.getJSON('/api/get_templates_listing')).done(function(config_data, templates_data) {
-			var loaded = templatesToLoad.length;
+				config = config_data[0];
-
+				available_templates = templates_data[0];
-			jQuery.getJSON('/templates/config.json', function(data) {
+				templates.ready();
-				config = data;
 			});
-
-			for (var t in templatesToLoad) {
-				(function(file) {
-					jQuery.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);
-						template.prototype.blocks = {};
-
-						templates[file] = new template;
-						
-						loaded--;
-						if (loaded == 0) templates.ready();
-					}).fail(function() {
-						loaded--;
-						if (loaded == 0) templates.ready();
-					});
-				}(templatesToLoad[t]));
-			}
 		}
 		
 		if (fs === null) loadClient();
@@ -108,17 +87,76 @@
 	}
 
 
-	templates.init = function() {
+	templates.init = function(templates_to_load) {
-		loadTemplates([
+		loadTemplates(templates_to_load || []);
-			'header', 'footer', 'register', 'home', 'topic','account', 'category', 'users', 'accountedit', 'friends',
-			'login', 'reset', 'reset_code', 'account',
-			'confirm', '403', 'logout',
-			'emails/reset', 'emails/reset_plaintext', 'emails/email_confirm', 'emails/email_confirm_plaintext',
-			'admin/index', 'admin/categories', 'admin/users', 'admin/topics', 'admin/settings', 'admin/themes', 'admin/twitter', 'admin/facebook', 'admin/gplus'
-		]);
 	}
 
 
+
+	templates.load_template = function(callback, url, template) {
+		var location = document.location || window.location,
+			rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : '');
+
+		var api_url = (url === '' || url === '/') ? 'home' : url;
+
+		var tpl_url = templates.get_custom_map(url);
+		if (tpl_url == false && !templates[api_url]) {
+			tpl_url = api_url.split('/')[0];
+		} else {
+			tpl_url = api_url;
+		}
+		
+		var template_data = null;
+
+
+		(function() {
+			var timestamp = new Date().getTime(); //debug
+
+			if (!templates[tpl_url]) {
+				jQuery.get('/templates/' + tpl_url + '.tpl?v=' + timestamp, function(html) {
+					var template = function() {
+						this.toString = function() {
+							return this.html;
+						};
+					}
+
+					template.prototype.parse = parse;
+					template.prototype.html = String(html);
+					template.prototype.blocks = {};
+
+					templates[tpl_url] = new template;
+					
+					parse_template();
+				});
+			} else {
+				parse_template();
+			}
+			
+		}());
+			
+		(function() {
+			jQuery.get(API_URL + api_url, function(data) {
+				if(!data) {
+					window.location.href = '/404';
+					return;
+				}
+
+				template_data = data;
+				parse_template();
+			});
+		}());
+		
+
+		function parse_template() {
+			if (!templates[tpl_url] || !template_data) return;
+
+			document.getElementById('content').innerHTML = templates[tpl_url].parse(JSON.parse(template_data));
+			if (callback) callback(true);
+		}
+	}
+
+
+
 	//modified from https://github.com/psychobunny/dcp.templates
 	var parse = function(data) {
 		var self = this;
@@ -212,30 +250,3 @@
 
 
 
-
-function load_template(callback, url, template) {
-	var location = document.location || window.location,
-		rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : '');
-
-	url = (url === '' || url === '/') ? 'home' : url;
-
-	jQuery.get(API_URL + url, function(data) {
-		if(!data) {
-			window.location.href = '/403';
-			return;
-		}
-
-		var tpl = templates.get_custom_map(url);
-		
-		if (tpl == false && !templates[url]) {
-			tpl = (url === '' || url === '/') ? 'home' : url.split('/')[0];
-		} else if (templates[url]) {
-			tpl = url;
-		}
-		
-		document.getElementById('content').innerHTML = templates[tpl].parse(JSON.parse(data));
-		if (callback) callback();
-	});
-}
-
-

public/templates/topic.tpl

@@ -327,9 +327,13 @@
 		socket.on('event:new_post', function(data) {
 			var html = templates.prepare(templates['topic'].blocks['posts']).parse(data),
 				uniqueid = new Date().getTime();
-				console.log(data);
+				
+			jQuery('<div id="' + uniqueid + '"></div>')
+				.appendTo("#post-container")
+				.hide()
+				.append(html)
+				.fadeIn('slow');
 
-			jQuery('<div id="' + uniqueid + '"></div>').appendTo("#post-container").hide().append(html).fadeIn('slow');	
 			set_up_posts(uniqueid);
 		});
 

src/utils.js

@@ -1,3 +1,5 @@
+var fs = require('fs');
+
 var utils = {
 	generateUUID: function() {
 		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
@@ -5,6 +7,31 @@ var utils = {
 			return v.toString(16);
 		});
 	},
+
+	//Adapted from http://stackoverflow.com/questions/5827612/node-js-fs-readdir-recursive-directory-search
+	walk: function(dir, done) {
+		var main_dir = global.configuration.ROOT_DIRECTORY + '/public/templates/';
+		var results = [];
+		fs.readdir(dir, function(err, list) {
+		    if (err) return done(err);
+		    var pending = list.length;
+		    if (!pending) return done(null, results);
+		    list.forEach(function(file) {
+				file = dir + '/' + file;
+				fs.stat(file, function(err, stat) {
+					if (stat && stat.isDirectory()) {
+						utils.walk(file, function(err, res) {
+							results = results.concat(res);
+							if (!--pending) done(null, results);
+						});
+					} else {
+						results.push(file.replace(main_dir, '').replace('.tpl', ''));
+						if (!--pending) done(null, results);
+			        }
+				});
+			});
+		});
+	},
 	
 	relativeTime: function(timestamp) {
 		var	now = +new Date(),

src/webserver.js

@@ -108,6 +108,11 @@ var express = require('express'),
 	function api_method(req, res) {		
 		
 		switch(req.params.method) {
+			case 'get_templates_listing' :
+					utils.walk(global.configuration.ROOT_DIRECTORY + '/public/templates', function(err, data) {
+						res.send(JSON.stringify(data));
+					});
+				break;
 			case 'home' :
 					categories.get(function(data) {
 						res.send(JSON.stringify(data));