routes for starting a new project

18 files changed, 353 insertions, 78 deletions

diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js
index c224b6a..70523d7 100644
--- a/public/assets/javascripts/ui/SiteRouter.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -15,22 +15,28 @@ var SiteRouter = Router.extend({
 	},
 	
 	routes: {
-		"/login":            'signin',
-		"/signup":           'signup',
-		"/project/new":      'newProject',
-		"/profile":          'profile',
-		"/profile/edit":     'editProfile',
-		"/about/:name/edit": 'editDocument',
-		"/about/new":        'newDocument',
-		"/editor":           'launchEditor',
-		"/builder":          'pickLayout',
-		"/builder/:name":    'builder',
+		"/login":               'signin',
+		"/signup":              'signup',
+		"/profile":             'profile',
+		"/profile/edit":        'editProfile',
+		"/about/:name/edit":    'editDocument',
+		"/about/new":           'newDocument',
+
+		"/layout":              'pickLayout',
+		"/layout/:name":        'layouts',
+
+		"/project":             'pickProject',
+		"/project/new":         'newProject',
+		"/project/new/:layout": 'newProjectWithLayout',
+		"/project/:name":       'editor',
 	},
 
 	initialize: function(){
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
 		this.layoutsModal = new LayoutsModal()
+		this.projectsModal = new ProjectsModal()
+		this.newProjectModal = new NewProjectModal()
 		this.editProjectModal = new EditProjectModal()
 		this.editProfileModal = new EditProfileModal()
 		this.documentModal = new DocumentModal()
@@ -39,7 +45,8 @@ var SiteRouter = Router.extend({
 		
 		$("body").removeClass("loading")
 	},
-	
+
+
 	builder: function(e, name){
 		app.mode.builder = true
 		app.launch()
@@ -50,18 +57,53 @@ var SiteRouter = Router.extend({
 	
 	pickLayout: function(e){
 		e && e.preventDefault()
-		window.history.pushState(null, document.title, "/builder")
+		window.history.pushState(null, document.title, "/layout")
 		this.layoutsModal.load()
 	},
 
-	launchEditor: function(){
+
+	pickProject: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/project")
+		this.projectsModal.load()
+	},
+
+	newProject: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/project/new")
+		this.newProjectModal.load()
+	},
+
+	newProjectWithLayout: function(e, layout){
+		e && e.preventDefault()
+
+		app.mode.editor = true
+		app.launch()
+		
+		layout = slugify(layout)
+		
+		window.history.pushState(null, document.title, "/project/new/" + layout)
+		this.editorView = new EditorView()
+		this.editorView.loadLayout(layout)
+	},
+
+	editor: function(e, layout){
 		app.mode.editor = true
 		app.launch()
 
 		this.editorView = new EditorView()
-		this.editorView.load()
+		this.editorView.loadLayout(name)
 	},
+
 	
+/*
+	editProject: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/project/edit")	
+		this.editProjectModal.load()
+	},
+*/
+
 	signup: function(e){
 		e && e.preventDefault()
 		window.history.pushState(null, document.title, "/signup")
@@ -74,19 +116,6 @@ var SiteRouter = Router.extend({
 		this.signInModal.load()
 	},
 	
-	newProject: function(e){
-		e && e.preventDefault()
-		window.history.pushState(null, document.title, "/project/new")	
-
-		this.layoutsModal.load()
-	},
-
-	editProject: function(e){
-		e && e.preventDefault()
-		window.history.pushState(null, document.title, "/project/edit")	
-		this.editProjectModal.load()
-	},
-	
 	profile: function(e){
 		var classes = ['one', 'two', 'three', 'four',
 		               'five', 'six', 'seven', 'eight',
@@ -102,6 +131,7 @@ var SiteRouter = Router.extend({
 		this.editProfileModal.load()
 	},
 
+
 	newDocument: function(e){
 		e && e.preventDefault()
 
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 66bf84b..9b2f753 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -63,7 +63,7 @@ var BuilderSettings = FormView.extend({
 				type: "delete",
 				data: { _id: this.$id.val(), _csrf: this.$csrf.val() },
 				success: function(data){
-					window.location.href = "/builder"
+					window.location.href = "/layout"
 				}
 			})
 		}, this))
@@ -121,7 +121,7 @@ var BuilderSettings = FormView.extend({
 		this.$name.val(data.name)
 		this.action = this.updateAction
 		
-		window.history.pushState(null, document.title, "/builder/" + data.slug)
+		window.history.pushState(null, document.title, "/layout/" + data.slug)
 	},
 
 })
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
new file mode 100644
index 0000000..ad578d2
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -0,0 +1,124 @@
+
+var EditorSettings = FormView.extend({
+	el: "#editorSettings",
+	
+	createAction: "/api/projects/new",
+	updateAction: "/api/projects/edit",
+	destroyAction: "/api/projects/destroy",
+
+	events: {
+		"keydown [name=name]": 'enterSubmit',
+		"click [data-role='save-project']": 'save',
+		"click [data-role='clone-project']": 'clone',
+		"click [data-role='clear-project']": 'clear',
+		"click [data-role='destroy-project']": 'destroy',
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$id = this.$("[name=_id]")
+		this.$csrf = this.$("[name=_csrf]")
+		this.$name = this.$("[name=name]")
+		this.$privacy = this.$("[name=privacy]")
+	},
+	
+	load: function(data){
+		this.$id.val(data._id)
+		this.$name.val(data.name)
+
+		data.rooms && Rooms.deserialize(data.rooms)
+		data.startPosition && scene.camera.move(data.startPosition)
+		data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop('checked', "checked")
+
+		this.action = data.isNew ? this.createAction : this.updateAction
+	},
+	
+	clone: function(){
+		var names = this.$name.val().split(" ")
+		if ( ! isNaN(Number( names[names.length-1] )) ) {
+			names[names.length-1] = Number( names[names.length-1] ) + 1
+		}
+		else {
+			names.push("2")
+		}
+
+		this.$id.val('new')
+		this.$name.val( names.join(" ") )
+		this.action = this.createAction
+		
+		window.history.pushState(null, document.title, "/builder/new")
+	},
+	
+	clear: function(){
+		Rooms.removeAll()
+	},
+	
+	destroy: function(){
+		var msg = "Are you sure you want to delete the project " + sanitize(this.$name.val()) + "?"
+		ConfirmModal.confirm(msg, $.proxy(function(){
+			$.ajax({
+				url: this.destroyAction,
+				type: "delete",
+				data: { _id: this.$id.val(), _csrf: this.$csrf.val() },
+				success: function(data){
+					window.location.href = "/project"
+				}
+			})
+		}, this))
+	},
+
+	toggle: function(){
+		this.$el.toggleClass("active")
+	},
+
+	enterSubmit: function (e) {
+		e.stopPropagation()
+		var base = this
+		if (e.keyCode == 13) {
+			setTimeout(function(){ base.save(e) }, 100)
+		}
+	},
+
+	validate: function(){
+		var errors = []
+		var name = this.$name.val()
+		if (! name || ! name.length) {
+			errors.push("Please name your project.")
+		}
+		return errors
+	},
+	
+	showErrors: function(errors){
+		var $errors = $("<span>")
+		errors.forEach(function(err){
+			var $row = $("<div>")
+			$row.html(err)
+			$errors.append( $row )
+		})
+		ErrorModal.alert($errors)
+	},
+	
+	serialize: function(){
+		map.draw.render()
+		var fd = new FormData()
+		fd.append( "_csrf", this.$csrf.val() )
+		fd.append( "_id", this.$id.val() )
+		fd.append( "name", this.$name.val() )
+		fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" )
+		fd.append( "rooms", JSON.stringify( Rooms.serialize() ) )
+		fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) )
+		fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) )
+		return fd
+	},
+	
+	success: function(data){
+		this.$id.val(data._id)
+		this.$name.val(data.name)
+		this.action = this.updateAction
+		
+		window.history.pushState(null, document.title, "/project/" + data.slug)
+	},
+
+})
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
new file mode 100644
index 0000000..1942fe8
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -0,0 +1,22 @@
+
+var EditorToolbar = View.extend({
+	el: "#builderToolbar",
+
+	events: {
+		"click [data-role='toggle-map-view']": 'toggleMap',
+		"click [data-role='toggle-layout-settings']": 'toggleSettings',
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+	},
+
+	toggleMap: function(){
+		map.toggle()
+	},
+	
+	toggleSettings: function(){
+		this.parent.settings.toggle()
+	},
+
+})
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 91329de..7cabeb7 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -1,13 +1,35 @@
 
 var EditorView = View.extend({
-//	el: "#editorControls",
+	el: "#editorView",
+	
+	action: "/api/layouts/",
 
 	events: {
 	},
+	
+	initialize: function(){
+		this.toolbar = new EditorToolbar ({ parent: this })
+		this.settings = new EditorSettings ({ parent: this })
+	},
 
-	load: function(){
+	load: function(name){
+	},
+	
+	loadLayout: function(name){
+		if (! name || name == "new") {
+			this.ready({ isNew: true, _id: "new", name: "" })
+			return
+		}
+		
+		name = sanitize(name)
+		
+		$.get(this.action + name, $.proxy(this.ready, this))
+	},
+	
+	ready: function(data){
 		$("#map").hide()
-	}
+		this.settings.load(data)
+	},
 
 })
 
diff --git a/public/assets/javascripts/ui/lib/Router.js b/public/assets/javascripts/ui/lib/Router.js
index d06c07a..214603c 100644
--- a/public/assets/javascripts/ui/lib/Router.js
+++ b/public/assets/javascripts/ui/lib/Router.js
@@ -5,7 +5,12 @@ var Router = View.extend({
 		this.originalPath = window.location.pathname
 		
 		var path = window.location.pathname.split("/")
-		// console.log(path)
+		for (var i = 0; i < path.length; i++) {
+			if (! path[i].length) {
+				path[i] = null
+			}
+		}
+
 		for (var route in this.routes) {
 			var routePath = route.split("/")
 			if (routePath[1] == path[1]) {
@@ -14,8 +19,20 @@ var Router = View.extend({
 					break;
 				}
 				else if (routePath[2] == path[2]) {
-					this[this.routes[route]](null)
-					break;
+					if (routePath[3] && path[3]) {
+						if (routePath[3].indexOf(":") !== -1) {
+							this[this.routes[route]](null, path[3])
+							break;
+						}
+						else if (routePath[3] == path[3]) {
+							this[this.routes[route]](null)
+							break;
+						}
+					}
+					else if (! routePath[3] && ! path[3]) {
+						this[this.routes[route]](null)
+						break;
+					}
 				}
 				else if (! routePath[2] && (! path[2].length || ! path[2])) {
 					this[this.routes[route]](null)
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 0a03878..18bd27d 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -8,30 +8,63 @@ var LayoutsIndex = View.extend({
 	load: function(type){
 		this.$templates.children("span").remove()
 		
-		$.get("/api/layouts", $.proxy(function(data){
-
-			data.forEach($.proxy(function(room){
-				var $span = $("<span>")
-				// $span.html(JSON.stringify(room))
-				$span.data("slug", room.slug)
-				$span.css("background-image", "url(" + room.photo + ")")
-				
-				this.$templates.append($span)
-			}, this))
+		$.get(this.action, $.proxy(this.populate, this))
+	},
 
-			this.show()
+	populate: function(data){
+		data.forEach($.proxy(function(room){
+			var $span = $("<span>")
+			// $span.html(JSON.stringify(room))
+			$span.data("slug", room.slug)
+			$span.css("background-image", "url(" + room.photo + ")")
+			
+			this.$templates.append($span)
 		}, this))
+		this.show()
+	}
+
+})
+
+var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
+	el: ".mediaDrawer.projects",
 
+	action: "/api/projects",
+
+	events: {
+		"click .templates span": 'toggleActive',
+		"submit form": 'newProject',
+	},
+	
+	populate: function(data){
+		if (! data.length) {
+			app.router.newProject()
+		}
+		else {
+			this.__super__.populate(data)
+		}
+	},
+	
+	toggleActive: function(e){
+		e.preventDefault()
+		this.$(".templates .active").removeClass("active")
+		var $layout = $(e.currentTarget)
+		$layout.addClass("active")
+		
+		// actually do
+		window.location.pathname = "/project/" + $layout.data("slug")
 	}
+
 })
 
 
 var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.layouts",
 
+	action: "/api/layouts",
+
 	events: {
 		"click .templates span": 'toggleActive',
-		"submit form": 'newBuilder',
+		"submit form": 'newLayout',
 	},
 	
 	toggleActive: function(e){
@@ -41,12 +74,12 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 		$layout.addClass("active")
 		
 		// actually do
-		window.location.pathname = "/builder/" + $layout.data("slug")
+		window.location.pathname = "/layout/" + $layout.data("slug")
 	},
 	
-	newBuilder: function(e){
+	newLayout: function(e){
 		e && e.preventDefault()
-		window.location.pathname = "/builder/new"
+		window.location.pathname = "/layout/new"
 	}
 
 })
@@ -55,6 +88,8 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.newProject",
 
+	action: "/api/layouts",
+
 	events: {
 		"click .templates span": 'toggleActive',
 		"submit form": 'choose',
@@ -68,6 +103,10 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	
 	choose: function(e){
 		e && e.preventDefault()
+		var layout = this.$(".templates .active").data("slug")
+		console.log(layout)
+		if (! layout || ! layout.length) return
+		window.location.pathname = "/project/new/" + layout
 	}
 	
 })
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index ec2760c..ebb1919 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -10,6 +10,7 @@ function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
 function sanitize (s){ return (s || "").replace(new RegExp("[<>&\"\']", 'g'), "") }
 function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") }
 function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) }
+function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") }
 
 
 var E = Math.E
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b785f54..ee8be3d 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -455,7 +455,6 @@ h5{
 .profilepage .bio span:last-of-type:after { display: none; }
 
 .templates {
-  padding-top: 7vh;
 }
 
 .templates span{
@@ -739,7 +738,8 @@ h5{
   transform:translateY(0%);
 }
 .mediaDrawer.signin, .mediaDrawer.signup,
-.mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.error{
+.mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.error,
+.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject {
     display:table;
 }
 .confirm button {
diff --git a/server/index.js b/server/index.js
index 27d0d8e..b2fb568 100644
--- a/server/index.js
+++ b/server/index.js
@@ -97,8 +97,6 @@ site.route = function () {
 	app.get('/api/profile', middleware.ensureAuthenticated, api.profile.show)
 	app.put('/api/profile', middleware.ensureAuthenticated, api.profile.update)
 
-	app.get('/project/new', middleware.ensureAuthenticated, views.modal);
-
 	app.get('/staff', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.staff.index);
 	app.get('/staff/bless', middleware.ensureAuthenticated, views.staff.bless);
 
@@ -107,11 +105,13 @@ site.route = function () {
 	app.post('/api/docs/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.update)
 	app.delete('/api/docs/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.destroy)
 
-	app.get('/builder', middleware.ensureAuthenticated, views.modal)
-	app.get('/builder/:name', middleware.ensureAuthenticated, views.builder)
+	app.get('/layout', middleware.ensureAuthenticated, views.modal)
+	app.get('/layout/:name', middleware.ensureAuthenticated, views.builder)
 
-	app.get('/editor', middleware.ensureAuthenticated, views.modal)
-	app.get('/editor/:name', middleware.ensureAuthenticated, views.editor)
+	app.get('/project', middleware.ensureAuthenticated, views.modal)
+	app.get('/project/new', middleware.ensureAuthenticated, views.modal)
+	app.get('/project/new/:layout', middleware.ensureAuthenticated, views.editor)
+	app.get('/project/:name', middleware.ensureAuthenticated, views.editor)
 
 	app.get('/api/layouts', middleware.ensureAuthenticated, api.layouts.index)
 	app.get('/api/layouts/:slug', middleware.ensureAuthenticated, api.layouts.show)
diff --git a/server/lib/api.js b/server/lib/api.js
index d760ba9..f840a66 100644
--- a/server/lib/api.js
+++ b/server/lib/api.js
@@ -10,7 +10,8 @@ var passport = require('passport'),
 	config = require('../../config.json'),
 	User = require('./schemas/User'),
 	Documentation = require('./schemas/Documentation'),
-	Layout = require('./schemas/Layout');
+	Layout = require('./schemas/Layout'),
+	Project = require('./schemas/Project');
 
 var api = {
 
diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js
index 5176e06..6f6ec7a 100644
--- a/server/lib/schemas/Project.js
+++ b/server/lib/schemas/Project.js
@@ -11,7 +11,7 @@ var ProjectSchema = new mongoose.Schema({
 		type: String,
 		required: true,
 		validate: [function (val){
-			val = util.sanitize(val || this.displayName || "")
+			val = util.slugify(val || this.name || "")
 			if (! val.length) return false
 			return true
 		},"{PATH} name is required"]
diff --git a/server/lib/util.js b/server/lib/util.js
index 2ff4e16..aaa8274 100644
--- a/server/lib/util.js
+++ b/server/lib/util.js
@@ -8,6 +8,7 @@ var nonAlphanumerics = new RegExp('[^-_a-zA-Z0-9]', 'g')
 var consecutiveDashes = new RegExp("-+", 'g')
 var entities = new RegExp("[<>&]", 'g')
 
+
 var util = {}
 
 util.trim = function (s){ return (s || "").replace(whitespaceHead,"").replace(whitespaceTail,"") }
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 1bf87eb..37f8114 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -1,4 +1,4 @@
-<div class="edit menu vvbox">
+<div class="edit menu vvbox" id="editorToolbar">
 	<span class="icon-ios7-photos-outline addMedia" data-info="add media"></span>
 	<span class="icon-arrow-resize" data-info="resize media"></span>
 	<span class="icon-ios7-keypad-outline" data-info="add wallpaper"></span>
diff --git a/views/editor.ejs b/views/editor.ejs
index 133cbd3..f4c303d 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -11,12 +11,14 @@
 	<div class="rapper">
 		[[ include partials/header ]]
 
-		[[ include controls/editor/toolbar ]]
-		[[ include controls/editor/video-toolbar ]]
-		[[ include controls/editor/media-drawer ]]
-		[[ include controls/editor/wallpaper ]]
-		[[ include controls/editor/light-control ]]
-		[[ include controls/editor/settings ]]
+		<div id="editorView">
+			[[ include controls/editor/toolbar ]]
+			[[ include controls/editor/video-toolbar ]]
+			[[ include controls/editor/media-drawer ]]
+			[[ include controls/editor/wallpaper ]]
+			[[ include controls/editor/light-control ]]
+			[[ include controls/editor/settings ]]
+		</div>
 
 	<!-- 
 		<div id="minimap" class="vvbox">
@@ -24,20 +26,21 @@
 		</div>
 	 -->
 
+		<select id="palette">
+			<option>colors</option>
+			<option>redblue</option>
+			<option>gray</option>
+			<option selected>bone</option>
+			<option>alpha</option>
+			<option>white</option>
+			<option>black</option>
+		</select>
+
 		<div id="hud">
 			<div id="map" style="display: block">
 			</div>
 
 			<div id="info">
-				<select id="palette">
-					<option>colors</option>
-					<option>redblue</option>
-					<option>gray</option>
-					<option selected>bone</option>
-					<option>alpha</option>
-					<option>white</option>
-					<option>black</option>
-				</select>
 				<div id="intersects"></div>
 			</div>
 		</div>
@@ -45,6 +48,7 @@
 	</div>
 
 	[[ include partials/confirm-modal ]]	
+	[[ include projects/layouts-modal ]]	
 	[[ include partials/sign-in ]]	
 
 </body>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 55c8545..94d5a43 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -2,8 +2,8 @@
 
 <span class="topLinks">
 [[ if (logged_in) { ]]
-	<a href="/builder" data-role="show-layouts-modal" class="topLink">Layouts</a>
-	<a href="/editor" class="topLink">Projects</a>
+	<a href="/layout" data-role="show-layouts-modal" class="topLink">Layouts</a>
+	<a href="/project" class="topLink">Projects</a>
 	[[ if (profile && String(user._id) == String(profile._id)) { ]]
 	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Edit Profile <span class="icon-ios7-gear-outline"></span></a>
 	[[ } else if (! profile) { ]]
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index bf04547..3b3ee8f 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -62,6 +62,8 @@
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderToolbar.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script>
 
+<script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/SiteRouter.js"></script>
diff --git a/views/projects/layouts-modal.ejs b/views/projects/layouts-modal.ejs
index 90585c3..75b2641 100644
--- a/views/projects/layouts-modal.ejs
+++ b/views/projects/layouts-modal.ejs
@@ -11,6 +11,18 @@
 	</div>
 </div>
 
+<div class="mediaDrawer fixed animate projects">
+	<span class="close">X</span>
+	<div class="box">
+		
+		<div class="templates">
+			<h1>Your Projects</h1>
+		</div>
+		<form>
+			<input class="button_text" type="submit" value="New Project">
+		</form>
+	</div>
+</div>
 
 <div class="mediaDrawer fixed animate newProject">
 	<span class="close">X</span>