started consolidating editor functions

cms/static/coffee/src/client_templates/course_info_update.html

@@ -1,10 +1,10 @@
-<li>
+<li name="<%- updateModel.cid %>">
 	<!-- FIXME what style should we use for initially hidden? --> <!-- TODO decide whether this should use codemirror -->
 	<form class="new-update-form">
 		<div class="row">
 			<label class="inline-label">Date:</label>
 			<!-- TODO replace w/ date widget and actual date (problem is that persisted version is "Month day" not an actual date obj -->
-			<input type="text" class="date" id="date-entry" value="<%= updateModel.get('date') %>">
+			<input type="text" class="date" value="<%= updateModel.get('date') %>">
 		</div>
 		<div class="row">
 			<textarea class="new-update-content text-editor"><%= updateModel.get('content') %></textarea>
@@ -21,7 +21,7 @@
 			<a href="#" class="delete-button" name="<%- updateModel.cid %>"><span class="delete-icon"></span>Delete</a>
 		</div>
 		<h2>
-			<span class="calendar-icon"></span><span id="date-display"><%=
+			<span class="calendar-icon"></span><span class="date-display"><%=
 				updateModel.get('date') %></span>
 		</h2>
 		<div class="update-contents"><%= updateModel.get('content') %></div>

cms/static/js/template_loader.js

@@ -5,7 +5,7 @@
 	if (typeof window.templateLoader == 'function') return;
 	
     var templateLoader = {
-      templateVersion: "0.0.3",
+      templateVersion: "0.0.4",
       templates: {},
       loadRemoteTemplate: function(templateName, filename, callback) {
         if (!this.templates[templateName]) {

cms/static/js/views/course_info_edit.js

@@ -53,36 +53,35 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
               $(updateEle).append(newEle);
           });
           this.$el.find(".new-update-form").hide();
-          this.$el.find('.date').datepicker({ 'dateFormat': 'MM d' });
+          this.$el.find('.date').datepicker({ 'dateFormat': 'MM d, yy' });
           return this;
     },
     
     onNew: function(event) {
+        var self = this;
         // create new obj, insert into collection, and render this one ele overriding the hidden attr
         var newModel = new CMS.Models.CourseUpdate();
         this.collection.add(newModel, {at : 0});
         
-        var newForm = this.template({ updateModel : newModel });
+        var $newForm = $(this.template({ updateModel : newModel }));
         var updateEle = this.$el.find("#course-update-list");
-        $(updateEle).prepend(newForm);
-
-
-        // TODO: remove the id on the datepicker field
-        // this is causing conflicts with the datepicker widget
+        $(updateEle).prepend($newForm);
+        $newForm.addClass('editing');
 
+        $modalCover.show();
+        $modalCover.bind('click', function() {
+            self.closeEditor(self);
+        });
 
         $('.date').datepicker('destroy');
-        $('.date').datepicker({ 'dateFormat': 'MM d' });
+        $('.date').datepicker({ 'dateFormat': 'MM d, yy' });
     },
     
     onSave: function(event) {
         var targetModel = this.eventModel(event);
         targetModel.set({ date : this.dateEntry(event).val(), content : this.contentEntry(event).val() });
-        // push change to display, hide the editor, submit the change
-        $(this.dateDisplay(event)).html(targetModel.get('date'));
-        $(this.contentDisplay(event)).html(targetModel.get('content'));
-        $(this.editor(event)).hide();
-        
+        // push change to display, hide the editor, submit the change        
+        this.closeEditor(this);
         targetModel.save();
     },
     
@@ -90,14 +89,21 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         // change editor contents back to model values and hide the editor
         $(this.editor(event)).hide();
         var targetModel = this.eventModel(event);
-        $(this.dateEntry(event)).html(targetModel.get('date'));
-        $(this.contentEntry(event)).html(targetModel.get('content'));
+        this.closeEditor(this);
     },
     
     onEdit: function(event) {
+        var self = this;
+        this.$currentPost = $(event.target).closest('li');
+        this.$currentPost.addClass('editing');
         $(this.editor(event)).slideDown(150);
+        $modalCover.show();
+        var targetModel = this.eventModel(event);
+        $modalCover.bind('click', function() {
+            self.closeEditor(self);
+        });
     },
-        
+
     onDelete: function(event) {
         // TODO ask for confirmation
         // remove the dom element and delete the model
@@ -109,6 +115,16 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         }
         });
     },
+
+    closeEditor: function(self) {
+        var targetModel = self.collection.getByCid(self.$currentPost.attr('name'));
+
+        self.$currentPost.removeClass('editing');
+        self.$currentPost.find('.date-display').html(targetModel.get('date'));
+        self.$currentPost.find('.update-contents').html(targetModel.get('content'));
+        self.$currentPost.find('form').hide();
+        $modalCover.hide();
+    },
     
     // Dereferencing from events to screen elements    
     eventModel: function(event) {
@@ -127,7 +143,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
 
     dateEntry: function(event) {
     	var li = $(event.currentTarget).closest("li");
-    	if (li) return $(li).find("#date-entry").first();
+    	if (li) return $(li).find(".date").first();
     },
 
     contentEntry: function(event) {

cms/static/sass/_course-info.scss

@@ -3,7 +3,20 @@
 
 	li {
 		padding: 34px 0 42px;
-		border-top: 1px solid #cbd1db;
+		border-top: 1px solid #cbd1db;		
+
+		&.editing {
+			position: relative;
+			z-index: 1001;
+			padding: 0;
+			border-top: none;
+			border-radius: 3px;
+			background: #fff;
+
+			.post-preview {
+				display: none;
+			}
+		}
 	}
 
 	h2 {
@@ -44,6 +57,7 @@
 	.new-update-form {
 		@include edit-box;
 		margin-bottom: 24px;
+		border: none;
 
 		textarea {
 			height: 180px;