arrange edit project/profile modals

6 files changed, 275 insertions, 105 deletions

diff --git a/public/assets/javascripts/ui/CreateProjectModal.js b/public/assets/javascripts/ui/CreateProjectModal.js
new file mode 100644
index 0000000..44c5a20
--- /dev/null
+++ b/public/assets/javascripts/ui/CreateProjectModal.js
@@ -0,0 +1,50 @@
+
+
+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/EditProfileModal.js b/public/assets/javascripts/ui/EditProfileModal.js
new file mode 100644
index 0000000..de8a8be
--- /dev/null
+++ b/public/assets/javascripts/ui/EditProfileModal.js
@@ -0,0 +1,49 @@
+
+var EditProfileModal = ModalView.extend({
+	el: ".mediaDrawer.editProfile",
+	action: "/project/edit",
+
+	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/EditProjectModal.js b/public/assets/javascripts/ui/EditProjectModal.js
new file mode 100644
index 0000000..356d8b7
--- /dev/null
+++ b/public/assets/javascripts/ui/EditProjectModal.js
@@ -0,0 +1,49 @@
+
+var EditProjectModal = ModalView.extend({
+	el: ".mediaDrawer.editProject",
+	action: "/project/edit",
+
+	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 9657c56..e99777e 100644
--- a/public/assets/javascripts/ui/MasterView.js
+++ b/public/assets/javascripts/ui/MasterView.js
@@ -5,11 +5,17 @@ var MasterView = View.extend({
 	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',
 	},
 	
 	initialize: function(){
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
+		this.createProjectModal = new CreateProjectModal()
+		this.editProjectModal = new EditProjectModal()
+		this.editProfileModal = new EditProfileModal()
 
 		$("body").removeClass("loading")
 		// app.launch()
@@ -25,6 +31,21 @@ var MasterView = View.extend({
 		e.preventDefault()
 		this.signInModal.load()
 	},
+	
+	showCreateProjectModal: function(e){
+		e.preventDefault()
+		this.createProjectModal.load()
+	},
+
+	showEditProjectModal: function(e){
+		e.preventDefault()
+		this.editProjectModal.load()
+	},
+	
+	showEditProfileModal: function(e){
+		e.preventDefault()
+		this.editProfileModal.load()
+	},
 
 })
 
diff --git a/public/assets/javascripts/vendor/view.js b/public/assets/javascripts/vendor/view.js
index ef5d330..823a75b 100644
--- a/public/assets/javascripts/vendor/view.js
+++ b/public/assets/javascripts/vendor/view.js
@@ -1,128 +1,128 @@
 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 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 delegateEventSplitter = /^(\S+)\s*(.*)$/;
 
-  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+	var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
 
-  _.extend(View.prototype, {
+	_.extend(View.prototype, {
 
-    // The default `tagName` of a View's element is `"div"`.
-    tagName: 'div',
+		// The default `tagName` of a View's element is `"div"`.
+		tagName: 'div',
 
-    $: function(selector) {
-      return this.$el.find(selector);
-    },
+		$: function(selector) {
+			return this.$el.find(selector);
+		},
 
-    initialize: function(){},
+		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;
-    },
+		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;
+		// 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;
-    },
+				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;
-    },
+		// 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() {
+		// 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 = {};
+	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); };
-    }
+		// 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)
+		// 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);
+		// 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;
+		// 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);
+		// 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;
+		// Set a convenience property in case the parent's prototype is needed
+		// later.
+		child.prototype.__super__ = parent.prototype;
 		child.prototype.events = childEvents
 
-    return child;
-  };
+		return child;
+	};
 
 	View.extend = extend;
 	
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 48e5e20..85ecdb4 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -333,20 +333,15 @@ h5{
 /* PROFILE PAGE */
 .profilepage .profilePic {
   font-size: 148px;
-  background: url(http://www.clevelandfoundation.org/wp-content/uploads/2012/10/ivan-discussing-his-eye-surgery.jpg);
   background-size: cover;
   background-position: center;
 }
 .editProfile {
-  padding: 8px;
-  float: right;
   margin-right: 10px;
-  font-size: 38px;
   color: black;
   font-weight: 100;
   text-decoration: none
 }
-
 .editProfile span {
   vertical-align: middle;
 }
@@ -356,6 +351,9 @@ h5{
   padding: 8px;
   margin: 14px;
 }
+.topLinks span {
+  font-weight: 300;
+}
 .topLinks a {
   padding: 8px;
   color: black;
@@ -426,6 +424,9 @@ h5{
 	font-size: 16px;
 	font-weight: 300;
 }
+.profilepage .bio span:nth-of-type:after { content: ' &middot; ' }
+.profilepage .bio span:last-of-type:after { display: none; }
+
 
 .templates {
   padding-top: 7vh;