updated ajaxify to do a callback after page change, added toaster style notifications (app.alert), changes to webserver to update automatically

public/src/ajaxify.js

@@ -3,16 +3,18 @@ var ajaxify = {};
 
 (function($) {
 	
-	var rootUrl = document.location.protocol + '//' + (document.location.hostname || document.location.host) + (document.location.port ? ':'+document.location.port : ''),
+	var location = document.location || window.location,
+		rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : ''),
 		content = null;
 
-	var current_state = '';
+	var current_state = null;
 
-	ajaxify.go = function(url) {
+	ajaxify.go = function(url, callback) {
+		var url = url.replace(/\/$/, "");
 		var tpl_url = (url === '') ? 'home' : url;
 
 		if (templates[tpl_url]) {
-			if (current_state != url) {
+			if (current_state === null || current_state != url) {
 				current_state = url;
 
 				window.history.pushState({}, url, "/" + url);
@@ -20,6 +22,9 @@ var ajaxify = {};
 				exec_body_scripts(content);
 
 				ajaxify.enable();
+				if (callback) {
+					callback();
+				}
 			}
 			
 			return true;

public/src/app.js

@@ -1,5 +1,6 @@
 var socket,
-	config;
+	config,
+	app = {};
 
 (function() {
 
@@ -18,5 +19,47 @@ var socket,
 
 	});
 
-	
+	// use unique alert_id to have multiple alerts visible at a time, use the same alert_id to fade out the current instance  
+	// type : error, success, info, warning/notify
+	// timeout default = permanent
+	// location : notification_window (default) or content
+	app.alert = function(params) {
+		var div = document.createElement('div'),
+			button = document.createElement('button'),
+			strong = document.createElement('strong'),
+			p = document.createElement('p');
+
+		var alert_id = 'alert_button_' + ((alert_id) ? alert_id : new Date().getTime()); 
+
+		jQuery('#'+alert_id).fadeOut(500, function() {
+			this.remove();
+		});
+
+		p.innerHTML = params.message;
+		strong.innerHTML = params.title;
+
+		div.className = "alert " + ((params.type=='warning') ? '' : "alert-" + params.type);
+		
+		div.setAttribute('id', alert_id);
+		div.appendChild(button);
+		div.appendChild(strong);
+		div.appendChild(p);
+
+		button.className = 'close';
+		button.innerHTML = '×';
+		button.onclick = function(ev) {
+			div.parentNode.removeChild(div);
+		}
+
+		if (params.location == null) params.location = 'notification_window';
+
+		jQuery('#'+params.location).prepend(jQuery(div).fadeIn('100'));
+
+		if (params.timeout) {
+			setTimeout(function() {
+				jQuery(div).fadeOut('1000');
+			}, params.timeout)
+		}
+	}
+
 }());

public/templates/header.tpl

@@ -11,9 +11,18 @@
 	<script type="text/javascript" src="src/templates.js"></script>
 	<script type="text/javascript" src="src/ajaxify.js"></script>
 	<style type="text/css">
-      body {
-        padding-top: 60px;
-      }
+		body {
+			padding-top: 60px;
+		}
+
+		#notification_window {
+			position: absolute;
+			right: 20px;
+			top: 80px;
+			width: 300px;
+			height: 0px;
+
+		}
 	</style>
 </head>
 
@@ -31,6 +40,6 @@
         </div>
       </div>
     </div>
-
+	<div id="notification_window"></div>
     <div class="container" id="content">
 

public/templates/home.tpl

@@ -1 +1,10 @@
-dis is home nibs
+dis is home nibs
+
+<script type="text/javascript">
+/*app.alert({
+	title: 'Welcome back',
+	message: 'Some welcome message to test alerts!',
+	type: 'info',
+	timeout: 2000
+});*/
+</script>

public/templates/register.tpl

@@ -54,6 +54,15 @@
 
 	socket.on('user.create', function(data) {
 		//console.log('user create: ' + data.status);
+		ajaxify.go('/', function() {
+			app.alert({
+				title: 'Thank you for registering',
+				message: 'You have successfully registered - welcome to nodebb!',
+				type: 'notify',
+				timeout: 2000
+			});
+		});
+		
 	});
 	socket.on('user.exists', function(data) {
 		if (data.exists == true) {

src/webserver.js

@@ -7,19 +7,30 @@ var express = require('express'),
 (function(app) {
 	var templates = global.templates;
 
+	function refreshTemplates() {
+		//need a better solution than copying this code on every call. is there an "onconnect" event?
+		if (DEVELOPMENT === true) {
+			// refreshing templates
+			modules.templates.init();
+		}
+	}
 	app.get('/', function(req, res) {
+		refreshTemplates();
 		res.send(templates['header'] + templates['home'] + templates['footer']);
 	});
 
 	app.get('/login', function(req, res) {
+		refreshTemplates();
 		res.send(templates['header'] + templates['login'] + templates['footer']);
 	});
 
 	app.get('/reset', function(req, res) {
+		refreshTemplates();
 		res.send(templates['header'] + templates['reset'] + templates['footer']);
 	});
 
 	app.get('/register', function(req, res) {
+		refreshTemplates();
 		res.send(templates['header'] + templates['register'] + templates['footer']);
 	});