split up builder functionality

18 files changed, 365 insertions, 47 deletions

diff --git a/public/assets/javascripts/ui/BuilderView.js b/public/assets/javascripts/ui/BuilderView.js
deleted file mode 100644
index c91d9ee..0000000
--- a/public/assets/javascripts/ui/BuilderView.js
+++ /dev/null
@@ -1,23 +0,0 @@
-
-var BuilderView = View.extend({
-	el: "#builderView",
-
-	events: {
-		"click [data-role='toggle-map-view']": 'toggleMap',
-		"click [data-role='toggle-layout-settings']": 'toggleSettings',
-	},
-
-	load: function(){
-		$("#map").show()
-	},
-	
-	toggleMap: function(){
-		map.toggle()
-	},
-	
-	toggleSettings: function(){
-		this.$(".settings").toggleClass("active")
-	},
-
-})
-
diff --git a/public/assets/javascripts/ui/Router.js b/public/assets/javascripts/ui/SiteRouter.js
index 5b75162..c02b19c 100644
--- a/public/assets/javascripts/ui/Router.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -1,5 +1,5 @@
 
-var Router = View.extend({
+var SiteRouter = Router.extend({
 	el: "body",
 	
 	events: {
@@ -26,8 +26,6 @@ var Router = View.extend({
 	},
 
 	initialize: function(){
-		this.builderView = new BuilderView()
-		this.editorView = new EditorView()
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
 		this.newProjectModal = new NewProjectModal()
@@ -37,40 +35,24 @@ var Router = View.extend({
 		this.confirmModal = new ConfirmModal()
 		this.alertModal = new AlertModal()
 		
-		this.originalPath = window.location.pathname
+		this.route()
 		
-		var path = window.location.pathname.split("/")
-		// console.log(path)
-		for (var route in this.routes) {
-			var routePath = route.split("/")
-			if (routePath[1] == path[1]) {
-				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
-					this[this.routes[route]](null, path[2])
-					break;
-				}
-				else if (routePath[2] == path[2]) {
-					this[this.routes[route]](null)
-					break;
-				}
-				else if (! routePath[2] && (! path[2].length || ! path[2])) {
-					this[this.routes[route]](null)
-					break;
-				}
-			}
-		}
-
 		$("body").removeClass("loading")
 	},
 	
 	launchBuilder: function(){
 		app.mode.builder = true
 		app.launch()
+
+		this.builderView = new BuilderView()
 		this.builderView.load()
 	},
 
 	launchEditor: function(){
 		app.mode.editor = true
 		app.launch()
+
+		this.editorView = new EditorView()
 		this.editorView.load()
 	},
 	
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
new file mode 100644
index 0000000..b598a18
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -0,0 +1,18 @@
+
+
+
+
+var BuilderSettings = View.extend({
+	el: "#builderSettings",
+
+	events: {
+	},
+	
+	initialize: function(){
+	},
+
+	toggle: function(){
+		this.$el.toggleClass("active")
+	}
+
+})
diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js
new file mode 100644
index 0000000..42d4306
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js
@@ -0,0 +1,42 @@
+
+var BuilderToolbar = View.extend({
+	el: "#builderToolbar",
+
+	events: {
+		"click [data-role='toggle-map-view']": 'toggleMap',
+		"click [data-role='toggle-layout-settings']": 'toggleSettings',
+		"click [data-role='undo']": 'undo',
+		"click [data-role='draw']": 'draw',
+		"click [data-role='resize']": 'resize',
+		"click [data-role='move']": 'move',
+		"click [data-role='delete']": 'delete',
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+	},
+
+	toggleMap: function(){
+		map.toggle()
+	},
+	
+	toggleSettings: function(){
+		this.parent.settings.toggle()
+	},
+	
+	undo: function(){
+	},
+	
+	draw: function(){
+	},
+	
+	resize: function(){
+	},
+	
+	move: function(){
+	},
+	
+	delete: function(){
+	},
+
+})
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
new file mode 100644
index 0000000..d0659bb
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -0,0 +1,17 @@
+
+var BuilderView = View.extend({
+	el: "#builderView",
+
+	events: {
+	},
+	
+	initialize: function(){
+		this.toolbar = new BuilderToolbar ({ parent: this })
+		this.settings = new BuilderSettings ({ parent: this })
+	},
+
+	load: function(){
+		$("#map").show()
+	},
+
+})
diff --git a/public/assets/javascripts/ui/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 91329de..91329de 100644
--- a/public/assets/javascripts/ui/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
diff --git a/public/assets/javascripts/ui/AlertModal.js b/public/assets/javascripts/ui/lib/AlertModal.js
index c5693ad..c5693ad 100644
--- a/public/assets/javascripts/ui/AlertModal.js
+++ b/public/assets/javascripts/ui/lib/AlertModal.js
diff --git a/public/assets/javascripts/ui/ConfirmModal.js b/public/assets/javascripts/ui/lib/ConfirmModal.js
index 868ce8e..868ce8e 100644
--- a/public/assets/javascripts/ui/ConfirmModal.js
+++ b/public/assets/javascripts/ui/lib/ConfirmModal.js
diff --git a/public/assets/javascripts/ui/lib/ModalFormView.js b/public/assets/javascripts/ui/lib/ModalFormView.js
new file mode 100644
index 0000000..d084031
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/ModalFormView.js
@@ -0,0 +1,96 @@
+
+var ModalFormView = ModalView.extend({
+
+	method: "post",
+
+	events: {
+		"submit form": "submit"
+	},
+
+	initialize: function(){
+		this.$form = this.$("form")
+		this.$errors = this.$(".errors")
+		this.$errorList = this.$(".errorList")
+	},
+
+	reset: function(){
+		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();
+			for (var i in errors) {
+				this.$errorList.append('<div>' + errors[i] + '</div>');
+			}
+			this.$errors.css("opacity", 1.0);
+			setTimeout($.proxy(function(){
+				this.$errors.show().css("opacity", 1.0);
+			}, this), 200)
+		}
+	},
+	
+	serialize: function(){
+		var fd = new FormData()
+		
+		this.$("input[name], select[name], textarea[name]").each( function(){
+			if (this.type == "file") {
+				if (this.files.length > 0) {
+					fd.append(this.name, this.files[0]);
+				}
+			}
+			else if (this.type == "password") {
+				if (this.value.length > 0) {
+					fd.append(this.name, SHA1.hex('lol$' + this.value + '$vvalls'))
+				}
+			}
+			else {
+				fd.append(this.name, this.value);
+			}
+		});
+		
+		return fd
+	},
+	
+	submit: function(e){
+		e.preventDefault()
+
+		this.$errors.hide().css("opacity", 0.0);
+		
+		if (this.validate) {
+			var errors = this.validate()
+			if (errors && errors.length) {
+				this.showErrors(errors)
+				return
+			}
+		}
+
+		var request = $.ajax({
+			url: this.action,
+			type: this.method,
+			data: this.serialize(),
+			dataType: "json",
+			processData: false,
+			contentType: false,
+		});
+		request.done($.proxy(function (response) {
+			if (response.error) {
+				var errors = []
+				for (var key in response.error.errors) {
+					errors.push(response.error.errors[key].message);
+				}
+				this.showErrors(errors)
+				return
+			}
+			else {
+				this.success && this.success(response)
+			}
+		}, this));
+	}
+
+})
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
new file mode 100644
index 0000000..b90b3c4
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -0,0 +1,28 @@
+
+var ModalView = View.extend({
+	events: {
+		"click .close": 'close',
+	},
+	
+	show: function(){
+		$(".mediaDrawer").removeClass("active");
+		this.$el.addClass("active");
+    $("body").addClass("noOverflow");
+	},
+
+	hide: function(){
+    // $(".mediaDrawer, .room1").removeClass("active editing");
+		this.$el.removeClass("active");
+    $("body").removeClass("noOverflow");
+	},
+	
+	close: function(){
+		if (window.isModalView) {
+			window.location.pathname = "/"
+		}
+		else {
+			history.pushState(null, document.title, app.router.originalPath)
+			this.hide()
+		}
+	}
+})
diff --git a/public/assets/javascripts/ui/lib/Router.js b/public/assets/javascripts/ui/lib/Router.js
new file mode 100644
index 0000000..d06c07a
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/Router.js
@@ -0,0 +1,28 @@
+var Router = View.extend({
+
+	route: function(){
+
+		this.originalPath = window.location.pathname
+		
+		var path = window.location.pathname.split("/")
+		// console.log(path)
+		for (var route in this.routes) {
+			var routePath = route.split("/")
+			if (routePath[1] == path[1]) {
+				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
+					this[this.routes[route]](null, path[2])
+					break;
+				}
+				else if (routePath[2] == path[2]) {
+					this[this.routes[route]](null)
+					break;
+				}
+				else if (! routePath[2] && (! path[2].length || ! path[2])) {
+					this[this.routes[route]](null)
+					break;
+				}
+			}
+		}
+	}
+
+})
diff --git a/public/assets/javascripts/ui/lib/view.js b/public/assets/javascripts/ui/lib/view.js
new file mode 100644
index 0000000..823a75b
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/view.js
@@ -0,0 +1,130 @@
+var View = (function($, _){
+
+	var View = function(options) {
+		this.cid = _.uniqueId('view');
+		options || (options = {});
+		_.extend(this, _.pick(options, viewOptions));
+		this._ensureElement();
+		this.initialize.apply(this, arguments);
+		this.delegateEvents();
+	};
+
+	var delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+	var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+
+	_.extend(View.prototype, {
+
+		// The default `tagName` of a View's element is `"div"`.
+		tagName: 'div',
+
+		$: function(selector) {
+			return this.$el.find(selector);
+		},
+
+		initialize: function(){},
+
+		setElement: function(element, delegate) {
+			if (this.$el) this.undelegateEvents();
+			this.$el = element instanceof $ ? element : $(element);
+			this.el = this.$el[0];
+			if (delegate !== false) this.delegateEvents();
+			return this;
+		},
+
+		// Set callbacks, where `this.events` is a hash of
+		//
+		// *{"event selector": "callback"}*
+		//
+		//		 {
+		//			 'mousedown .title':	'edit',
+		//			 'click .button':		 'save',
+		//			 'click .open':			 function(e) { ... }
+		//		 }
+		//
+		// pairs. Callbacks will be bound to the view, with `this` set properly.
+		// Uses event delegation for efficiency.
+		// Omitting the selector binds the event to `this.el`.
+		// This only works for delegate-able events: not `focus`, `blur`, and
+		// not `change`, `submit`, and `reset` in Internet Explorer.
+		delegateEvents: function(events) {
+			if (!(events || (events = _.result(this, 'events')))) return this;
+			this.undelegateEvents();
+			for (var key in events) {
+				var method = events[key];
+				if (!_.isFunction(method)) method = this[events[key]];
+				if (!method) continue;
+
+				var match = key.match(delegateEventSplitter);
+				var eventName = match[1], selector = match[2];
+				method = _.bind(method, this);
+				eventName += '.delegateEvents' + this.cid;
+				if (selector === '') {
+					this.$el.on(eventName, method);
+				} else {
+					this.$el.on(eventName, selector, method);
+				}
+			}
+			return this;
+		},
+
+		// Clears all callbacks previously bound to the view with `delegateEvents`.
+		undelegateEvents: function() {
+			this.$el.off('.delegateEvents' + this.cid);
+			return this;
+		},
+
+		// Ensure that the View has a DOM element to render into.
+		// If `this.el` is a string, pass it through `$()`, take the first
+		// matching element, and re-assign it to `el`. Otherwise, create
+		// an element from the `id`, `className` and `tagName` properties.
+		_ensureElement: function() {
+			this.setElement(_.result(this, 'el'), false);
+		}
+
+	});
+
+
+	var extend = function(protoProps, staticProps) {
+		var staticProps = staticProps || {}
+		var parent = this;
+		var child;
+		var childEvents = {};
+
+		// The constructor function for the new subclass is either defined by you
+		// (the "constructor" property in your `extend` definition), or defaulted
+		// by us to simply call the parent's constructor.
+		if (protoProps && _.has(protoProps, 'constructor')) {
+			child = protoProps.constructor;
+		} else {
+			child = function(){ return parent.apply(this, arguments); };
+		}
+
+		// Extend events so we can subclass views
+		_.extend(childEvents, parent.prototype.events, protoProps.events)
+
+		// Add static properties to the constructor function, if supplied.
+		_.extend(child, parent, staticProps);
+
+		// Set the prototype chain to inherit from `parent`, without calling
+		// `parent`'s constructor function.
+		var Surrogate = function(){ this.constructor = child; };
+		Surrogate.prototype = parent.prototype;
+		child.prototype = new Surrogate;
+
+		// Add prototype properties (instance properties) to the subclass,
+		// if supplied.
+		if (protoProps) _.extend(child.prototype, protoProps);
+
+		// Set a convenience property in case the parent's prototype is needed
+		// later.
+		child.prototype.__super__ = parent.prototype;
+		child.prototype.events = childEvents
+
+		return child;
+	};
+
+	View.extend = extend;
+	
+	return View;
+})(jQuery, _)
diff --git a/public/assets/javascripts/ui/DocumentModal.js b/public/assets/javascripts/ui/site/DocumentModal.js
index 6f16169..6f16169 100644
--- a/public/assets/javascripts/ui/DocumentModal.js
+++ b/public/assets/javascripts/ui/site/DocumentModal.js
diff --git a/public/assets/javascripts/ui/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js
index 6b89ad8..6b89ad8 100644
--- a/public/assets/javascripts/ui/EditProfileModal.js
+++ b/public/assets/javascripts/ui/site/EditProfileModal.js
diff --git a/public/assets/javascripts/ui/EditProjectModal.js b/public/assets/javascripts/ui/site/EditProjectModal.js
index 356d8b7..356d8b7 100644
--- a/public/assets/javascripts/ui/EditProjectModal.js
+++ b/public/assets/javascripts/ui/site/EditProjectModal.js
diff --git a/public/assets/javascripts/ui/NewProjectModal.js b/public/assets/javascripts/ui/site/NewProjectModal.js
index cf2044f..cf2044f 100644
--- a/public/assets/javascripts/ui/NewProjectModal.js
+++ b/public/assets/javascripts/ui/site/NewProjectModal.js
diff --git a/public/assets/javascripts/ui/SignInModal.js b/public/assets/javascripts/ui/site/SignInModal.js
index 4c91b54..4c91b54 100644
--- a/public/assets/javascripts/ui/SignInModal.js
+++ b/public/assets/javascripts/ui/site/SignInModal.js
diff --git a/public/assets/javascripts/ui/SignUpModal.js b/public/assets/javascripts/ui/site/SignUpModal.js
index 5c651ee..5c651ee 100644
--- a/public/assets/javascripts/ui/SignUpModal.js
+++ b/public/assets/javascripts/ui/site/SignUpModal.js