surface blueprints on layouts modal

7 files changed, 226 insertions, 212 deletions

diff --git a/public/assets/javascripts/ui/site/LayoutsIndex.js b/public/assets/javascripts/ui/site/LayoutsIndex.js
new file mode 100644
index 0000000..f7272bb
--- /dev/null
+++ b/public/assets/javascripts/ui/site/LayoutsIndex.js
@@ -0,0 +1,85 @@
+
+var LayoutsIndex = View.extend({
+
+	initialize: function(){
+		this.$templates = this.$(".templates")
+		this.$templatesList = this.$(".templates-list")
+		this.$noTemplates = this.$(".no-templates")
+		this.$form = this.$("form")
+		
+		this.$userTemplatesList = this.$(".userTemplatesList")
+		this.$blueprintsList = this.$(".blueprintsList")
+		this.$newBlueprintButton = this.$("[data-role='create-new-blueprint']")
+	},
+
+	load: function(type){
+		this.$templates.children("span").remove()
+		
+		$.get(this.action, this.populate.bind(this))
+	},
+
+	populate: function(data){
+		if (! data.layouts.length) {
+			this.$templates.hide()
+			this.$form.hide()
+			this.$noTemplates.show()
+		}
+		this.$templatesList.empty()
+		data.layouts.forEach(function(room){
+			var $span = $("<span>")
+			$span.data("slug", room.slug)
+			
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
+		}.bind(this))
+		this.show()
+	}
+
+})
+
+
+
+var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
+	el: ".mediaDrawer.projects",
+
+	action: "/api/project",
+
+	events: {
+		"click .templates span": 'toggleActive',
+		"submit form": 'newProject',
+	},
+	
+	populate: function(data){
+		if (! data.length) {
+			app.router.newProject()
+		}
+		else {
+			this.__super__.populate.call(this, 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") + "/edit"
+	},
+	
+	newProject: function(e){
+		e && e.preventDefault()
+		window.location.pathname = "/project/new"
+	}
+
+})
+
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index a9c6ef0..0222077 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -1,224 +1,35 @@
-
-var LayoutsIndex = View.extend({
-
-	initialize: function(){
-		this.$templates = this.$(".templates")
-		this.$templatesList = this.$(".templates-list")
-		this.$noTemplates = this.$(".no-templates")
-		this.$form = this.$("form")
-		
-		this.$userTemplatesList = this.$(".userTemplatesList")
-		this.$blueprintsList = this.$(".blueprintsList")
-		this.$newBlueprintButton = this.$("[data-role='create-new-blueprint']")
-	},
-
-	load: function(type){
-		this.$templates.children("span").remove()
-		
-		$.get(this.action, this.populate.bind(this))
-	},
-
-	populate: function(data){
-		if (! data.layouts.length) {
-			this.$templates.hide()
-			this.$form.hide()
-			this.$noTemplates.show()
-		}
-		this.$templatesList.empty()
-		data.layouts.forEach(function(room){
-			var $span = $("<span>")
-			$span.data("slug", room.slug)
-			
-			var $label = $("<label>")
-			$label.html( room.name )
-			
-			var $image = $("<span>")
-			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
-			
-      $span.append( $image )
-      $span.append( $label )
-			
-			this.$templatesList.append($span)
-		}.bind(this))
-		this.show()
-	}
-
-})
-
-var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
-	el: ".mediaDrawer.projects",
-
-	action: "/api/project",
-
-	events: {
-		"click .templates span": 'toggleActive',
-		"submit form": 'newProject',
-	},
-	
-	populate: function(data){
-		if (! data.length) {
-			app.router.newProject()
-		}
-		else {
-			this.__super__.populate.call(this, 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") + "/edit"
-	},
-	
-	newProject: function(e){
-		e && e.preventDefault()
-		window.location.pathname = "/project/new"
-	}
-
-})
-
-
 var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.layouts",
 
 	action: "/api/layout",
 
 	events: {
-		"click .templates span": 'pick',
-		"click .userTemplates span": 'pick',
-		"click .blueprints span": 'pickBlueprint',
-		"submit form": 'newLayout',
-	},
-	
-	pick: function(e){
-		e.preventDefault()
-		var $layout = $(e.currentTarget)
-		window.location.pathname = "/layout/" + $layout.data("slug")
-	},
-
-	pick: function(e){
-		e.preventDefault()
-		var $blueprint = $(e.currentTarget)
-		$blueprint.addClass("active")
-		
-		window.location.pathname = "/layout/" + $layout.data("slug")
-	},
-
-	populate: function(data){
-/*
-	  if (data.user.plan_level < 1 && data.projectCount == 1) {
-	    // show lockout message
-	  }
-*/
-		if (! data.layouts.length) {
-			this.$templates.hide()
-			this.$form.hide()
-			this.$noTemplates.show()
-		}
-		this.$templatesList.empty()
-		data.layouts.forEach(function(room){
-			var $span = $("<span>")
-			$span.data("slug", room.slug)
-			
-			var $label = $("<label>")
-			$label.html( room.name )
-			
-			var $image = $("<span>")
-			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
-			
-      $span.append( $image )
-      $span.append( $label )
-			
-			this.$templatesList.append($span)
-		}.bind(this))
-
-		data.user_layouts.forEach(function(room){
-			var $span = $("<span>")
-			$span.data("slug", room.slug)
-			
-			var $label = $("<label>")
-			$label.html( room.name )
-			
-			var $image = $("<span>")
-			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
-			
-      $span.append( $image )
-      $span.append( $label )
-			
-			this.$userTemplatesList.append($span)
-		}.bind(this))
-		
-		data.blueprints.forEach(function(blueprint){
-			var $span = $("<span>")
-			$span.data("slug", blueprint.slug)
-			
-			var $label = $("<label>")
-			$label.html( blueprint.name )
-			
-			var $image = $("<span>")
-			$image.addClass("image").css("background-image", "url(" + blueprint.url + ")")
-			
-      $span.append( $image )
-      $span.append( $label )
-			
-			this.$blueprintsList.append($span)
-		}.bind(this))
-		
-		this.show()
-	},
-
-	newLayout: function(e){
-		e && e.preventDefault()
-		window.location.pathname = "/layout/new"
-	}
-
-})
-
-
-var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
-	el: ".mediaDrawer.newProject",
-
-	action: "/api/layout",
-
-	events: {
 		"click [data-role='create-new-layout']": 'createNewLayout',
 		"click [data-role='create-new-blueprint']": 'createNewBlueprint',
 		"click .templates span": 'pick',
-		"click .userTemplates span": 'pick',
-		"click .blueprints span": 'pickBlueprint',
-	},
-	
-	toggleActive: function(e){
-		e.preventDefault()
-		this.$(".templates .active").removeClass("active")
-		$(e.currentTarget).addClass("active")
 	},
 	
 	pick: function(e){
-		e && e.preventDefault()
-// 		var layout = this.$(".templates .active").data("slug")
+		e.preventDefault()
  		var layout = $(e.currentTarget).data("slug")
  		var isBlueprint = $(e.currentTarget).data("blueprint")
+
 		if (! layout || ! layout.length) return
 		
 		if (isBlueprint) {
-      window.location.pathname = "/project/blueprint/" + layout
+      window.location.pathname = "/blueprint/" + layout
 		}
 		else {
-      window.location.pathname = "/project/new/" + layout
+      window.location.pathname = "/layout/" + layout
 		}
-	},
+  },
 
 	createNewLayout: function(e){
 	  e.preventDefault()
-	  window.location.pathname = "/project/new/empty"
+	  window.location.pathname = "/layout/new"
 	},
 
-	createNewBlueprint: function(s){
+	createNewBlueprint: function(e){
 	  e.preventDefault()
 	  window.location.pathname = "/blueprint/new"
 	},
@@ -227,7 +38,6 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 /*
 	  if (data.user.plan_level < 1 && data.projectCount == 1) {
 	    // show lockout message
-      this.$newBlueprintButton.hide()
 	  }
 */
 		if (! data.layouts.length) {
@@ -235,13 +45,6 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 			this.$form.hide()
 			this.$noTemplates.show()
 		}
-		if (! data.blueprints.length) {
-		  this.$blueprintsList.parent().hide()
-    }
-		if (! data.user_layouts.length) {
-		  this.$userTemplatesList.parent().hide()
-    }
-
 		this.$templatesList.empty()
 		data.layouts.forEach(function(room){
 			var $span = $("<span>")
@@ -276,11 +79,9 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 		}.bind(this))
 		
 		data.blueprints.forEach(function(blueprint){
-		  if (! blueprint.slug) { return }
-		  
 			var $span = $("<span>")
-			$span.data("blueprint", true)
 			$span.data("slug", blueprint.slug)
+			$span.data("blueprint", true)
 			
 			var $label = $("<label>")
 			$label.html( blueprint.name )
@@ -297,5 +98,9 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 		this.show()
 	},
 
-	
+	newLayout: function(e){
+		e && e.preventDefault()
+		window.location.pathname = "/layout/new"
+	}
+
 })
diff --git a/public/assets/javascripts/ui/site/NewProjectModal.js b/public/assets/javascripts/ui/site/NewProjectModal.js
new file mode 100644
index 0000000..31675ba
--- /dev/null
+++ b/public/assets/javascripts/ui/site/NewProjectModal.js
@@ -0,0 +1,118 @@
+var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
+	el: ".mediaDrawer.newProject",
+
+	action: "/api/layout",
+
+	events: {
+		"click [data-role='create-new-layout']": 'createNewLayout',
+		"click [data-role='create-new-blueprint']": 'createNewBlueprint',
+		"click .templates span": 'pick',
+	},
+	
+	toggleActive: function(e){
+		e.preventDefault()
+		this.$(".templates .active").removeClass("active")
+		$(e.currentTarget).addClass("active")
+	},
+	
+	pick: function(e){
+		e && e.preventDefault()
+// 		var layout = this.$(".templates .active").data("slug")
+ 		var layout = $(e.currentTarget).data("slug")
+ 		var isBlueprint = $(e.currentTarget).data("blueprint")
+		if (! layout || ! layout.length) return
+		
+		if (isBlueprint) {
+      window.location.pathname = "/project/blueprint/" + layout
+		}
+		else {
+      window.location.pathname = "/project/new/" + layout
+		}
+	},
+
+	createNewLayout: function(e){
+	  e.preventDefault()
+	  window.location.pathname = "/project/new/empty"
+	},
+
+	createNewBlueprint: function(e){
+	  e.preventDefault()
+	  window.location.pathname = "/blueprint/new"
+	},
+
+	populate: function(data){
+/*
+	  if (data.user.plan_level < 1 && data.projectCount == 1) {
+	    // show lockout message
+      this.$newBlueprintButton.hide()
+	  }
+*/
+		if (! data.layouts.length) {
+			this.$templates.hide()
+			this.$form.hide()
+			this.$noTemplates.show()
+		}
+		if (! data.blueprints.length) {
+		  this.$blueprintsList.parent().hide()
+    }
+		if (! data.user_layouts.length) {
+		  this.$userTemplatesList.parent().hide()
+    }
+
+		this.$templatesList.empty()
+		data.layouts.forEach(function(room){
+			var $span = $("<span>")
+			$span.data("slug", room.slug)
+			
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
+		}.bind(this))
+
+		data.user_layouts.forEach(function(room){
+			var $span = $("<span>")
+			$span.data("slug", room.slug)
+			
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
+		}.bind(this))
+		
+		data.blueprints.forEach(function(blueprint){
+		  if (! blueprint.slug) { return }
+		  
+			var $span = $("<span>")
+			$span.data("blueprint", true)
+			$span.data("slug", blueprint.slug)
+			
+			var $label = $("<label>")
+			$label.html( blueprint.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + blueprint.url + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
+		}.bind(this))
+		
+		this.show()
+	},
+
+	
+})
\ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index a1bb466..634ea60 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -2784,7 +2784,7 @@ form input[type="submit"]:hover {
 	border:1px solid black;
 	cursor:pointer;
 }
-form p{
+form p {
 	display: block;
 	float: left;
 	font-size: 15px;
@@ -3361,6 +3361,10 @@ a[data-role="forgot-password"] {
 }
 
 
+[data-role="create-new-blueprint"] {
+  margin-bottom: 10px;
+}
+
 /* KEYBOARD SHORTCUTS */
 
 .keyboard { float: left; width: 50%; margin-top: 50px; }
diff --git a/views/home.ejs b/views/home.ejs
index 6d76f1c..14fc0e3 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -8,7 +8,7 @@
 	<div class="rapper page home">
 	[[ include partials/header ]]
 
-	<div class="hero" style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls-video-still1.jpg)">
+	<div class="hero" style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls-video-still2.jpg)">
 			<div class="holder">
 				<span class="circle">
 				<span class="videoTitle">Create 3D Rooms</span><br>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index af7fe96..bac4120 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -121,7 +121,9 @@
 <script type="text/javascript" src="/assets/javascripts/ui/site/UsernameTaken.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/PasswordForgot.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/PasswordReset.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/LayoutsIndex.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/LayoutsModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/NewProjectModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/EditProjectModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/EditProfileModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/EditSubscriptionModal.js"></script>
diff --git a/views/projects/layouts-modal.ejs b/views/projects/layouts-modal.ejs
index 31ba7bf..0d648cd 100644
--- a/views/projects/layouts-modal.ejs
+++ b/views/projects/layouts-modal.ejs
@@ -7,7 +7,8 @@
 			<div class="templates-list">
 			</div>
 			<form>
-				<input data-role="create-new-layout" class="button_text" type="submit" value="New Layout">
+				<input data-role="create-new-blueprint" class="button_text" type="submit" value="Trace a Blueprint">
+				<input data-role="create-new-layout" class="button_text" type="submit" value="Make a Standard Layout">
 			</form>
 		</div>
 		<div class="no-templates">
@@ -46,7 +47,6 @@
 
 			<form>
 				<input data-role="create-new-blueprint" class="button_text" type="submit" value="trace a blueprint">
-				<br><br>
 				<input data-role="create-new-layout" class="button_text" type="submit" value="or make your own template">
 			</form>
 		</div>