tweaked saving mechanisms on subsection page

cms/static/js/base.js

@@ -35,7 +35,7 @@ $(document).ready(function() {
     $('.save-subsection').bind('click', saveSubsection);
 
     // autosave when a field is updated on the subsection page
-    $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value', checkForNewValue);
+    $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
     $('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
         this.nameString = $(this).val();
     });
@@ -112,7 +112,7 @@ function showImportSubmit(e) {
         $('.file-name-block').show();
         $('.import .choose-file-button').hide();
         $('.submit-button').show();
-        $('.progress').show();    
+        $('.progress').show();
     } else {
         $('.error-block').html('File format not supported. Please upload a file with a <code>tar.gz</code> extension.').show();
     }
@@ -120,27 +120,44 @@ function showImportSubmit(e) {
 
 function syncReleaseDate(e) {
     e.preventDefault();
+    $(this).closest('.notice').hide();
     $("#start_date").val("");
     $("#start_time").val("");
 }
 
 function addPolicyMetadata(e) {
     e.preventDefault();
-    var template =$('#add-new-policy-element-template > li'); 
+    var template =$('#add-new-policy-element-template > li');
     var newNode = template.clone();
     var _parent_el = $(this).parent('ol:.policy-list');
     newNode.insertBefore('.add-policy-data');
     $('.remove-policy-data').bind('click', removePolicyMetadata);
+    newNode.find('.policy-list-name').focus();
+    newNode.find('.save-button').bind('click', savePolicyMetadata);
+    newNode.find('.cancel-button').bind('click', cancelPolicyMetadata);
+}
+
+function savePolicyMetadata(e) {
+    e.preventDefault();
+    $('.save-subsection').click();
+    $(this).parents('.policy-list-element').removeClass('new-policy-list-element');
+}
+
+function cancelPolicyMetadata(e) {
+    e.preventDefault();
+    $(this).parents('.policy-list-element').remove();
 }
 
 function removePolicyMetadata(e) {
     e.preventDefault();
     policy_name = $(this).data('policy-name');
     var _parent_el = $(this).parent('li:.policy-list-element');
-    if ($(_parent_el).hasClass("new-policy-list-element"))
-        _parent_el.remove();
-    else
+    if ($(_parent_el).hasClass("new-policy-list-element")) {
+        _parent_el.remove();        
+    } else {
         _parent_el.appendTo("#policy-to-delete");
+    }
+    $('.save-subsection').click();
 }
 
 
@@ -219,6 +236,10 @@ function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
 }
 
 function checkForNewValue(e) {
+    if($(this).parents('.new-policy-list-element')[0]) {
+        return;
+    }
+
     this.hasChanged = this.nameString != $(this).val() && this.nameString;
     this.nameString = $(this).val();
     if(this.hasChanged) {
@@ -239,7 +260,7 @@ function autosaveInput(e) {
         clearTimeout(this.saveTimer);
     }
 
-    this.saveTimer = setTimeout(function() {
+    this.saveTimer = setTimeout(function() {        
         $changedInput = $(e.target);
         $('.save-subsection').click();
         this.saveTimer = null;
@@ -249,14 +270,15 @@ function autosaveInput(e) {
 function saveSubsection(e) {
     e.preventDefault();
 
-    // add an inline spinner
-    $spinner.css({
-        'position': 'absolute',
-        'top': Math.floor($changedInput.position().top + ($changedInput.outerHeight() / 2) + 3),
-        'left': $changedInput.position().left + $changedInput.outerWidth() - 24,
-        'margin-top': '-10px'
-    });
-    $changedInput.after($spinner);
+    if($changedInput && !$changedInput.hasClass('no-spinner')) {
+        $spinner.css({
+            'position': 'absolute',
+            'top': Math.floor($changedInput.position().top + ($changedInput.outerHeight() / 2) + 3),
+            'left': $changedInput.position().left + $changedInput.outerWidth() - 24,
+            'margin-top': '-10px'
+        });
+        $changedInput.after($spinner);
+    }
     
     var id = $(this).data('id');
 
@@ -598,7 +620,7 @@ function addNewSubsection(e) {
     e.preventDefault();
     var $section = $(this).closest('.courseware-section');
     var $newSubsection = $($('#new-subsection-template').html());
-    $section.find('.unit-list > ol').append($newSubsection);
+    $section.find('.subsection-list > ol').append($newSubsection);
     $section.find('.new-subsection-name-input').focus().select();
 
     var $saveButton = $newSubsection.find('.new-subsection-name-save');
@@ -609,7 +631,7 @@ function addNewSubsection(e) {
     $saveButton.data('parent', parent)
     $saveButton.data('template', $(this).data('template'));
 
-    $newSubsection.find('.new-subsection-name-cancel').bind('click', cancelNewSubsection);    
+    $newSubsection.find('.new-subsection-name-cancel').bind('click', cancelNewSubsection);
 }
 
 function saveNewSubsection(e) {
@@ -631,8 +653,6 @@ function saveNewSubsection(e) {
                 location.reload();             
             }
        });  
-
-            
 }
 
 function cancelNewSubsection(e) {

cms/static/sass/_subsection.scss

@@ -35,6 +35,27 @@
 		}
 	}
 
+	.policy-list-element {
+		.save-button,
+		.cancel-button {
+			display: none;
+		}
+	}
+
+	.new-policy-list-element {
+		.save-button {
+			@include blue-button;
+		}
+
+		.cancel-button {
+			@include white-button;
+		}
+
+		.delete-icon {
+			display: none;
+		}
+	}
+
 	.new-policy-item {
 		margin: 10px 0;
 

cms/templates/edit_subsection.html

@@ -51,7 +51,12 @@
     </div>
 
     <div id="add-new-policy-element-template" style="display:none">
-           <li class="policy-list-element new-policy-list-element"><input type="text" class="policy-list-name" autocomplete="off" size="15"/>:&nbsp;<input type="text" class="policy-list-value" size=40 autocomplete="off"/><a href="#" class="delete-icon remove-policy-data"></a></li>       
+           <li class="policy-list-element new-policy-list-element">
+             <input type="text" class="policy-list-name" autocomplete="off" size="15"/>:&nbsp;<input type="text" class="policy-list-value" size=40 autocomplete="off"/>
+             <a href="#" class="save-button">Save</a>
+             <a href="#" class="cancel-button">Cancel</a>
+             <a href="#" class="delete-icon remove-policy-data"></a>
+           </li>       
     </div>
 
     <div class="sidebar">
@@ -74,7 +79,7 @@
             % else:
             <p class="notice">The date above differs from the release date of ${parent_item.display_name} – ${parent_start_date.strftime('%m/%d/%Y')} at ${parent_start_date.strftime('%H:%M')}.
             % endif
-            <a href="#" class="sync-date">Sync to ${parent_item.display_name}.</a></p>
+            <a href="#" class="sync-date no-spinner">Sync to ${parent_item.display_name}.</a></p>
         % endif
       </div>
     <div class="due-date-input row">