From d385f80d0942494410432f11d3f3ca0f05d9e4a9 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Sun, 8 Jun 2014 12:22:59 -0400
Subject: new views and redirection logic

---
 public/assets/javascripts/ui/CreateProjectModal.js | 50 ------------
 public/assets/javascripts/ui/MasterView.js         | 63 ++++++++++-----
 public/assets/javascripts/ui/ModalView.js          | 11 ++-
 public/assets/javascripts/ui/NewProjectModal.js    | 50 ++++++++++++
 server/index.js                                    |  6 +-
 server/lib/views.js                                | 12 ++-
 views/login.ejs                                    | 29 -------
 views/modal.ejs                                    | 22 +++++
 views/partials/header.ejs                          |  2 +-
 views/partials/meta.ejs                            |  4 +-
 views/partials/scripts.ejs                         | 94 +++++++++++-----------
 views/profile.ejs                                  |  4 +-
 views/projects/create-project.ejs                  | 18 -----
 views/projects/new-project.ejs                     | 18 +++++
 14 files changed, 209 insertions(+), 174 deletions(-)
 delete mode 100644 public/assets/javascripts/ui/CreateProjectModal.js
 create mode 100644 public/assets/javascripts/ui/NewProjectModal.js
 delete mode 100644 views/login.ejs
 create mode 100644 views/modal.ejs
 delete mode 100644 views/projects/create-project.ejs
 create mode 100644 views/projects/new-project.ejs

diff --git a/public/assets/javascripts/ui/CreateProjectModal.js b/public/assets/javascripts/ui/CreateProjectModal.js
deleted file mode 100644
index 44c5a20..0000000
--- a/public/assets/javascripts/ui/CreateProjectModal.js
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-var CreateProjectModal = ModalView.extend({
-	el: ".mediaDrawer.newProject",
-	action: "/project/new",
-
-	events: {
-		"submit form": "submit"
-	},
-
-	initialize: function(){
-		this.$form = this.$("form")
-		this.$errors = this.$(".errors")
-		this.$errorList = this.$(".errorList")
-	},
-
-	reset: function(){
-		this.$("input").not("[type='submit']").not("[type='hidden']").val("")
-	},
-	
-	load: function(){
-		this.reset()
-		this.show()
-	},
-	
-	submit: function(e){
-		e.preventDefault()
-
-		this.$errors.hide();
-		this.$errorList.empty()
-
-		var fields = this.$form.serializeArray()
-		
-		var request = $.post(this.action, $.param(fields));
-		request.done($.proxy(function (response) {
-			if (response.error) {
-				this.$errors.show();
-				for (var key in response.error.errors) {
-					this.$errorList.append('<div>' + response.error.errors[key].message + '</div>');
-				}
-				return
-			}
-			else {
-				window.location.href = "/profile"
-			}
-		}, this));
-	}
-
-})
-
diff --git a/public/assets/javascripts/ui/MasterView.js b/public/assets/javascripts/ui/MasterView.js
index e99777e..a39c6f0 100644
--- a/public/assets/javascripts/ui/MasterView.js
+++ b/public/assets/javascripts/ui/MasterView.js
@@ -3,47 +3,72 @@ var MasterView = View.extend({
 	el: "body",
 	
 	events: {
-		"click [data-role='show-signup-modal']": 'showSignUpModal',
-		"click [data-role='show-signin-modal']": 'showSignInModal',
-		"click [data-role='create-project-modal']": 'showCreateProjectModal',
-		"click [data-role='edit-project-modal']": 'showEditProjectModal',
-		"click [data-role='edit-profile-modal']": 'showEditProfileModal',
+		"click [data-role='show-signup-modal']": 'signup',
+		"click [data-role='show-signin-modal']": 'signin',
+		"click [data-role='new-project-modal']": 'newProject',
+		"click [data-role='edit-project-modal']": 'editProject',
+		"click [data-role='edit-profile-modal']": 'editProfile',
 	},
 	
+	routes: {
+		"/login":          'signin',
+		"/signup":         'signup',
+		"/project/new":    'newProject',
+		"/profile/edit":   'editProfile',
+		"/app":            'launch',
+	},
+
 	initialize: function(){
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
-		this.createProjectModal = new CreateProjectModal()
+		this.newProjectModal = new NewProjectModal()
 		this.editProjectModal = new EditProjectModal()
 		this.editProfileModal = new EditProfileModal()
+		
+		for (var route in this.routes) {
+			if (window.location.pathname.indexOf(route) === 0) {
+				this[this.routes[route]]()
+				break;
+			}
+		}
 
 		$("body").removeClass("loading")
-		// app.launch()
-
 	},
 	
-	showSignUpModal: function(e){
-		e.preventDefault()
+	launch: function(){
+		app.launch()
+	},
+	
+	signup: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/signup")
 		this.signUpModal.load()
 	},
 
-	showSignInModal: function(e){
-		e.preventDefault()
+	signin: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/login")
 		this.signInModal.load()
 	},
 	
-	showCreateProjectModal: function(e){
-		e.preventDefault()
-		this.createProjectModal.load()
+	newProject: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/project/new")	
+
+		this.newProjectModal.load()
 	},
 
-	showEditProjectModal: function(e){
-		e.preventDefault()
+	editProject: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/project/edit")	
+
 		this.editProjectModal.load()
 	},
 	
-	showEditProfileModal: function(e){
-		e.preventDefault()
+	editProfile: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/profile/edit")	
+
 		this.editProfileModal.load()
 	},
 
diff --git a/public/assets/javascripts/ui/ModalView.js b/public/assets/javascripts/ui/ModalView.js
index 5c8e832..a34520f 100644
--- a/public/assets/javascripts/ui/ModalView.js
+++ b/public/assets/javascripts/ui/ModalView.js
@@ -1,7 +1,7 @@
 
 var ModalView = View.extend({
 	events: {
-		"click .close": 'hide',
+		"click .close": 'close',
 	},
 	
 	show: function(){
@@ -14,5 +14,14 @@ var ModalView = View.extend({
     // $(".mediaDrawer, .room1").removeClass("active editing");
 		this.$el.removeClass("active");
     $("body").removeClass("noOverflow");
+	},
+	
+	close: function(){
+		if (window.isModalView) {
+			window.location.pathname = "/"
+		}
+		else {
+			this.hide()
+		}
 	}
 })
diff --git a/public/assets/javascripts/ui/NewProjectModal.js b/public/assets/javascripts/ui/NewProjectModal.js
new file mode 100644
index 0000000..58dcb73
--- /dev/null
+++ b/public/assets/javascripts/ui/NewProjectModal.js
@@ -0,0 +1,50 @@
+
+
+var NewProjectModal = ModalView.extend({
+	el: ".mediaDrawer.newProject",
+	action: "/project/new",
+
+	events: {
+		"submit form": "submit"
+	},
+
+	initialize: function(){
+		this.$form = this.$("form")
+		this.$errors = this.$(".errors")
+		this.$errorList = this.$(".errorList")
+	},
+
+	reset: function(){
+		this.$("input").not("[type='submit']").not("[type='hidden']").val("")
+	},
+	
+	load: function(){
+		this.reset()
+		this.show()
+	},
+	
+	submit: function(e){
+		e.preventDefault()
+
+		this.$errors.hide();
+		this.$errorList.empty()
+
+		var fields = this.$form.serializeArray()
+		
+		var request = $.post(this.action, $.param(fields));
+		request.done($.proxy(function (response) {
+			if (response.error) {
+				this.$errors.show();
+				for (var key in response.error.errors) {
+					this.$errorList.append('<div>' + response.error.errors[key].message + '</div>');
+				}
+				return
+			}
+			else {
+				window.location.href = "/profile"
+			}
+		}, this));
+	}
+
+})
+
diff --git a/server/index.js b/server/index.js
index 05d353d..fc77660 100644
--- a/server/index.js
+++ b/server/index.js
@@ -60,7 +60,8 @@ app.all('*', middleware.ensureLocals);
 
 // Initialize views
 app.get('/', views.home);
-app.get('/login', views.login);
+app.get('/login', views.modal);
+app.get('/signup', views.modal);
 app.post('/auth/signin', auth.loggedIn('local'));
 app.post('/auth/signup', auth.signup);
 app.get('/logout', auth.logout);
@@ -70,6 +71,9 @@ app.get('/auth/facebook', auth.login('facebook'));
 app.get('/auth/facebook/callback', auth.loggedIn('facebook'));
 app.get('/profile', views.profile)
 app.get('/profile/edit', views.profile)
+
+app.get('/project/new', views.modal);
+
 app.get(/^\/([-_a-zA-Z0-9]+)\/?$/, views.profile)
 
 
diff --git a/server/lib/views.js b/server/lib/views.js
index a8723eb..4f2402b 100644
--- a/server/lib/views.js
+++ b/server/lib/views.js
@@ -5,17 +5,19 @@ var User = require('./schemas/User'),
 	config = require('../../config'),
 	_ = require('lodash');
 
-exports.login = function (req, res) {
-	res.render('login', {
+var views = {}
+
+views.modal = function (req, res) {
+	res.render('modal', {
 	});
 };
 
-exports.home = function (req, res) {
+views.home = function (req, res) {
 	res.render('home', {
 	})
 }
 
-exports.profile = function (req, res) {
+views.profile = function (req, res) {
 	var username = req.params[0]
 	if (username) {
 		User.findOne({ username: username }, function (err, user) {
@@ -43,3 +45,5 @@ exports.profile = function (req, res) {
 		})
 	}
 }
+
+module.exports = views
diff --git a/views/login.ejs b/views/login.ejs
deleted file mode 100644
index b37d18d..0000000
--- a/views/login.ejs
+++ /dev/null
@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<title>vvalls</title>
-	[[ include partials/meta ]]
-	<script>
-		window.addEventListener("load",function() {
-			window.scrollTo(0,0)
-		}, false);
-	</script>
-</head>
-<body class="loading">
-	<div class="rapper page" style="height: 100%;">
-	[[ include partials/header ]]
-
-	<div style="height: 70%; clear: both;"></div>
-
-	[[ include partials/signin ]]	
-	[[ include partials/footer ]]
-
-</div>
-</body>
-[[ include partials/scripts ]]
-<script>
-setTimeout(function(){
-	$("[data-role='show-signin-modal']").trigger("click")
-})
-</script>
-</html>
diff --git a/views/modal.ejs b/views/modal.ejs
new file mode 100644
index 0000000..b47f6aa
--- /dev/null
+++ b/views/modal.ejs
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+	<title>vvalls</title>
+	[[ include partials/meta ]]
+</head>
+<body class="loading">
+	<div class="rapper page" style="height: 100%;">
+	[[ include partials/header ]]
+
+	<div style="height: 70%; clear: both;"></div>
+
+	[[ include partials/signin ]]	
+	[[ include projects/new-project ]]
+	[[ include projects/edit-project ]]
+	[[ include partials/footer ]]
+
+</div>
+</body>
+[[ include partials/scripts ]]
+<script>window.isModalView = true</script>
+</html>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index d6c8fa9..c706aa1 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -1,4 +1,4 @@
-<a href="/" class="logo"><img src="assets/img/logo4.svg"></a>
+<a href="/" class="logo"><img src="/assets/img/logo4.svg"></a>
 
 <span class="topLinks">
 [[ if (logged_in) { ]]
diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs
index 32a3318..d1397c6 100644
--- a/views/partials/meta.ejs
+++ b/views/partials/meta.ejs
@@ -13,8 +13,8 @@
 	<meta property="og:site_name" content="" />
 	<link rel="icon" href="favicon.ico" type="image/x-icon">
 	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-	<link href='assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
-	<link href='assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
+	<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
+	<link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
 	<!--[if lt IE 9]>
 	<style>
 
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index c8f65f6..e466f8b 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -1,54 +1,54 @@
-<script type="text/javascript" src="assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/bower_components/lodash/dist/lodash.min.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/tube.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/loader.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/polyfill.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/view.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/sha1.js"></script>
-<script type="text/javascript" src="assets/javascripts/util.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/bower_components/lodash/dist/lodash.min.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/tube.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/view.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/sha1.js"></script>
+<script type="text/javascript" src="/assets/javascripts/util.js"></script>
 
-<script type="text/javascript" src="assets/javascripts/rectangles/_env.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/colors.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/constants.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/debug.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/sort.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/wheel.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/mouse.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/keys.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/wall.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/tree.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/vec3.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/mat4.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/_env.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/colors.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/debug.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/sort.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/wheel.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/keys.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/models/room.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/models/wall.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/models/tree.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/models/vec3.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/models/mat4.js"></script>
 
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/_rooms.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/builder.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/clipper.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/mover.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/_rooms.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/builder.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/clipper.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/mover.js"></script>
 
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/_scenery.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/image/_image.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/image/move.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/image/resize.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/_scenery.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/image/_image.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/image/move.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/image/resize.js"></script>
 
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/map/_map.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/map/ui.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/map/draw.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
-<script type="text/javascript" src="assets/javascripts/mx/mx.js"></script>
-<script type="text/javascript" src="assets/javascripts/mx/extensions/mx.scene.js"></script>
-<script type="text/javascript" src="assets/javascripts/mx/extensions/mx.movements.js"></script>
-<script type="text/javascript" src="assets/javascripts/mx/primitives/mx.image.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/mx.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 
-<script type="text/javascript" src="assets/javascripts/ui/ModalView.js"></script>
-<script type="text/javascript" src="assets/javascripts/ui/MasterView.js"></script>
-<script type="text/javascript" src="assets/javascripts/ui/SignInModal.js"></script>
-<script type="text/javascript" src="assets/javascripts/ui/SignUpModal.js"></script>
-<script type="text/javascript" src="assets/javascripts/ui/CreateProjectModal.js"></script>
-<script type="text/javascript" src="assets/javascripts/ui/EditProjectModal.js"></script>
-<script type="text/javascript" src="assets/javascripts/ui/EditProfileModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/ModalView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/MasterView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/SignInModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/SignUpModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/NewProjectModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/EditProjectModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/EditProfileModal.js"></script>
 
-<script type="text/javascript" src="assets/javascripts/app.js"></script>
+<script type="text/javascript" src="/assets/javascripts/app.js"></script>
diff --git a/views/profile.ejs b/views/profile.ejs
index 26f1ee1..8540785 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -41,10 +41,10 @@
 	
 	[[ include projects/list-projects ]]
 
-	<a href="#" data-role="create-project-modal" class="viewMore" id="createProject">create project</a>
+	<a href="#" data-role="new-project-modal" class="viewMore" id="createProject">create project</a>
 	
 	[[ include partials/edit-profile ]]
-	[[ include projects/create-project ]]
+	[[ include projects/new-project ]]
 	[[ include projects/edit-project ]]
 	[[ include partials/footer ]]
 
diff --git a/views/projects/create-project.ejs b/views/projects/create-project.ejs
deleted file mode 100644
index e151f3a..0000000
--- a/views/projects/create-project.ejs
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="mediaDrawer fixed animate newProject">
-	<span class="close">X</span>
-	<div class="box">
-		
-		<div class="templates">
-			<h1>Choose Room Template</h1>
-			<span></span>
-			<span></span>
-			<span></span>
-			<span></span>
-			<span></span>
-			<span></span>
-		</div>
-		<form>
-			<input id="saveForm" class="button_text" type="submit" name="submit" value="Create Project" />
-		</form>
-	</div>
-</div>
diff --git a/views/projects/new-project.ejs b/views/projects/new-project.ejs
new file mode 100644
index 0000000..e151f3a
--- /dev/null
+++ b/views/projects/new-project.ejs
@@ -0,0 +1,18 @@
+<div class="mediaDrawer fixed animate newProject">
+	<span class="close">X</span>
+	<div class="box">
+		
+		<div class="templates">
+			<h1>Choose Room Template</h1>
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+			<span></span>
+		</div>
+		<form>
+			<input id="saveForm" class="button_text" type="submit" name="submit" value="Create Project" />
+		</form>
+	</div>
+</div>
-- 
cgit v1.2.3-70-g09d2