diff --git a/public/src/ajaxify.js b/public/src/ajaxify.js index 17a64a6563..0b588571f4 100644 --- a/public/src/ajaxify.js +++ b/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; diff --git a/public/src/app.js b/public/src/app.js index 844fa9ef6b..7418b2d5a6 100644 --- a/public/src/app.js +++ b/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) + } + } + }()); diff --git a/public/templates/header.tpl b/public/templates/header.tpl index 4982b4adc0..8799e79534 100644 --- a/public/templates/header.tpl +++ b/public/templates/header.tpl @@ -11,9 +11,18 @@ @@ -31,6 +40,6 @@ - +
diff --git a/public/templates/home.tpl b/public/templates/home.tpl index 5aa8892973..9e208b7747 100644 --- a/public/templates/home.tpl +++ b/public/templates/home.tpl @@ -1 +1,10 @@ -dis is home nibs \ No newline at end of file +dis is home nibs + + \ No newline at end of file diff --git a/public/templates/register.tpl b/public/templates/register.tpl index f374c3ea27..d4d2c9a4d8 100644 --- a/public/templates/register.tpl +++ b/public/templates/register.tpl @@ -58,6 +58,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) { diff --git a/src/webserver.js b/src/webserver.js index 44064f99ae..e1553d8ffc 100644 --- a/src/webserver.js +++ b/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']); });