wire up layout index modals

5 files changed, 91 insertions, 39 deletions

diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js
index c02b19c..92816be 100644
--- a/public/assets/javascripts/ui/SiteRouter.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -11,6 +11,7 @@ var SiteRouter = Router.extend({
 		"click [data-role='new-document-modal']": 'newDocument',
 		"click [data-role='edit-document-modal']": 'editDocument',
 		"click [data-role='delete-document-modal']": 'destroyDocument',
+		"click [data-role='show-layouts-modal']": 'showLayoutsModal',
 	},
 	
 	routes: {
@@ -22,13 +23,15 @@ var SiteRouter = Router.extend({
 		"/about/:name/edit": 'editDocument',
 		"/about/new":        'newDocument',
 		"/editor":           'launchEditor',
-		"/builder":          'launchBuilder',
+		"/builder":          'showLayoutsModal',
+		"/builder/new":      'launchBuilder',
+		"/builder/:name":    'launchBuilder',
 	},
 
 	initialize: function(){
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
-		this.newProjectModal = new NewProjectModal()
+		this.layoutsModal = new LayoutsModal()
 		this.editProjectModal = new EditProjectModal()
 		this.editProfileModal = new EditProfileModal()
 		this.documentModal = new DocumentModal()
@@ -47,6 +50,12 @@ var SiteRouter = Router.extend({
 		this.builderView = new BuilderView()
 		this.builderView.load()
 	},
+	
+	showLayoutsModal: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/builder")
+		this.layoutsModal.load("builder")
+	},
 
 	launchEditor: function(){
 		app.mode.editor = true
@@ -72,7 +81,7 @@ var SiteRouter = Router.extend({
 		e && e.preventDefault()
 		window.history.pushState(null, document.title, "/project/new")	
 
-		this.newProjectModal.load()
+		this.layoutsModal.load()
 	},
 
 	editProject: function(e){
diff --git a/public/assets/javascripts/ui/lib/ModalFormView.js b/public/assets/javascripts/ui/lib/FormView.js
index d084031..2de4554 100644
--- a/public/assets/javascripts/ui/lib/ModalFormView.js
+++ b/public/assets/javascripts/ui/lib/FormView.js
@@ -1,5 +1,4 @@
-
-var ModalFormView = ModalView.extend({
+var FormView = View.extend({
 
 	method: "post",
 
@@ -17,11 +16,6 @@ var ModalFormView = ModalView.extend({
 		this.$("input,textarea").not("[type='submit']").not("[type='hidden']").val("")
 	},
 	
-	load: function(){
-		this.reset()
-		this.show()
-	},
-	
 	showErrors: function(errors){
 		if (errors && errors.length) {
 			this.$errorList.empty();
@@ -94,3 +88,13 @@ var ModalFormView = ModalView.extend({
 	}
 
 })
+
+
+var ModalFormView = ModalView.extend(FormView.prototype).extend({
+
+	load: function(){
+		this.reset()
+		this.show()
+	}
+
+})
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
new file mode 100644
index 0000000..f80a6cc
--- /dev/null
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -0,0 +1,67 @@
+
+var LayoutsIndex = View.extend({
+
+	load: function(type){
+		this.show()
+
+		$.get("/api/layouts", $.proxy(function(data){
+			console.log(data)
+			data.forEach($.proxy(function(room){
+				var $span = $("<span>")
+				$span.html(JSON.stringify(room))
+				this.$(".templates").append($span)
+			}, this))
+			this.show()
+		}, this))
+
+	}
+
+})
+
+
+var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
+	el: ".mediaDrawer.layouts",
+
+	events: {
+		"click .templates span": 'toggleActive',
+		"submit form": 'newBuilder',
+	},
+	
+	toggleActive: function(e){
+		e.preventDefault()
+		this.$(".templates .active").removeClass("active")
+		$(e.currentTarget).addClass("active")
+		
+		// actually do
+		// window.location.pathname = "/builder/" + $(this).data("name")
+	},
+	
+	newBuilder: function(e){
+		e && e.preventDefault()
+		window.location.pathname = "/builder/new"
+	}
+
+})
+
+
+
+
+var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
+	el: ".mediaDrawer.newProject",
+
+	events: {
+		"click .templates span": 'toggleActive',
+		"submit form": 'choose',
+	},
+	
+	toggleActive: function(e){
+		e.preventDefault()
+		this.$(".templates .active").removeClass("active")
+		$(e.currentTarget).addClass("active")
+	},
+	
+	choose: function(e){
+		e && e.preventDefault()
+	}
+	
+})
diff --git a/public/assets/javascripts/ui/site/NewProjectModal.js b/public/assets/javascripts/ui/site/NewProjectModal.js
deleted file mode 100644
index cf2044f..0000000
--- a/public/assets/javascripts/ui/site/NewProjectModal.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-var NewProjectModal = ModalFormView.extend({
-	el: ".mediaDrawer.newProject",
-	action: "/project/new",
-
-	load: function(){
-		this.reset()
-		this.show()
-	},
-	
-	success: function(){
-		//
-	}
-
-})
-
diff --git a/public/assets/javascripts/ui/z_misc.js b/public/assets/javascripts/ui/z_misc.js
index 612057e..37e41c6 100644
--- a/public/assets/javascripts/ui/z_misc.js
+++ b/public/assets/javascripts/ui/z_misc.js
@@ -120,18 +120,7 @@ function bind () {
   $(".deleteArmed .mediaContainer").click(function(){
     $(this).addClass("deleted");
   });
-  
-  
-  $("#createProject").click(function(){
-    $(".mediaDrawer.newProject").toggleClass("active");
-    $("body").addClass("noOverflow")
-  });
-  
-  $(".templates span").click(function(){
-    $(".templates span").removeClass("active");
-    $(this).toggleClass("active");
-  });
-  
+
   $(document).on("click", ".icon-close", disable_mode)
 
   function disable_mode(){