Don't save subsection and unit names until the change event. Fixes bugs #18 and #228.

cms/static/coffee/src/views/unit.coffee

@@ -167,7 +167,7 @@ class CMS.Views.UnitEdit extends Backbone.View
 
 class CMS.Views.UnitEdit.NameEdit extends Backbone.View
   events:
-    "keyup .unit-display-name-input": "saveName"
+    'change .unit-display-name-input': 'saveName'
 
   initialize: =>
     @model.on('change:metadata', @render)
@@ -190,29 +190,10 @@ class CMS.Views.UnitEdit.NameEdit extends Backbone.View
     # Treat the metadata dictionary as immutable
     metadata = $.extend({}, @model.get('metadata'))
     metadata.display_name = @$('.unit-display-name-input').val()
+    @model.save(metadata: metadata)
+    # Update name shown in the right-hand side location summary.
     $('.unit-location .editing .unit-name').html(metadata.display_name)
 
-    inputField = this.$el.find('input')
-
-    # add a spinner
-    @$spinner.css({
-        'position': 'absolute',
-        'top': Math.floor(inputField.position().top + (inputField.outerHeight() / 2) + 3),
-        'left': inputField.position().left + inputField.outerWidth() - 24,
-        'margin-top': '-10px'
-    });
-    inputField.after(@$spinner);
-    @$spinner.fadeIn(10)
-
-    # save the name after a slight delay
-    if @timer
-      clearTimeout @timer
-    @timer = setTimeout( =>
-      @model.save(metadata: metadata)
-      @timer = null
-      @$spinner.delay(500).fadeOut(150)
-    , 500)
-
 class CMS.Views.UnitEdit.LocationState extends Backbone.View
   initialize: =>
     @model.on('change:state', @render)

cms/static/js/base.js

@@ -95,9 +95,9 @@ $(document).ready(function () {
     });
     $('.toggle-button-sections').bind('click', toggleSections);
 
-    // autosave when a field is updated on the subsection page
-    $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) {
+    // autosave when leaving input field
+    $body.on('change', '.subsection-display-name-input', saveSubsection);
+    $('.subsection-display-name-input').each(function () {
         this.val = $(this).val();
     });
     $("#start_date, #start_time, #due_date, #due_time").bind('change', autosaveInput);
@@ -113,11 +113,6 @@ $(document).ready(function () {
     // add new/delete subsection
     $('.new-subsection-item').bind('click', addNewSubsection);
     $('.delete-subsection-button').bind('click', deleteSubsection);
-    // add/remove policy metadata button click handlers
-    $('.add-policy-data').bind('click', addPolicyMetadata);
-    $('.remove-policy-data').bind('click', removePolicyMetadata);
-    $body.on('click', '.policy-list-element .save-button', savePolicyMetadata);
-    $body.on('click', '.policy-list-element .cancel-button', cancelPolicyMetadata);
 
     $('.sync-date').bind('click', syncReleaseDate);
 
@@ -156,11 +151,6 @@ $(document).ready(function () {
     });
 });
 
-// function collapseAll(e) {
-//     $('.branch').addClass('collapsed');
-//     $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
-// }
-
 function toggleSections(e) {
     e.preventDefault();
 
@@ -219,56 +209,6 @@ function syncReleaseDate(e) {
     $("#start_time").val("");
 }
 
-function addPolicyMetadata(e) {
-    e.preventDefault();
-    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();
-}
-
-function savePolicyMetadata(e) {
-    e.preventDefault();
-
-    var $policyElement = $(this).parents('.policy-list-element');
-    saveSubsection()
-    $policyElement.removeClass('new-policy-list-element');
-    $policyElement.find('.policy-list-name').attr('disabled', 'disabled');
-    $policyElement.removeClass('editing');
-}
-
-function cancelPolicyMetadata(e) {
-    e.preventDefault();
-
-    var $policyElement = $(this).parents('.policy-list-element');
-    if (!$policyElement.hasClass('editing')) {
-        $policyElement.remove();
-    } else {
-        $policyElement.removeClass('new-policy-list-element');
-        $policyElement.find('.policy-list-name').val($policyElement.data('currentValues')[0]);
-        $policyElement.find('.policy-list-value').val($policyElement.data('currentValues')[1]);
-    }
-    $policyElement.removeClass('editing');
-}
-
-function removePolicyMetadata(e) {
-    e.preventDefault();
-
-    if (!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
-        return;
-
-    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 {
-        _parent_el.appendTo("#policy-to-delete");
-    }
-    saveSubsection()
-}
-
 function getEdxTimeFromDateTimeVals(date_val, time_val, format) {
     var edxTimeStr = null;
 
@@ -294,31 +234,6 @@ function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
     return getEdxTimeFromDateTimeVals(input_date, input_time, format);
 }
 
-function checkForNewValue(e) {
-    if ($(this).parents('.new-policy-list-element')[0]) {
-        return;
-    }
-
-    if (this.val) {
-        this.hasChanged = this.val != $(this).val();
-    } else {
-        this.hasChanged = false;
-    }
-
-    this.val = $(this).val();
-    if (this.hasChanged) {
-        if (this.saveTimer) {
-            clearTimeout(this.saveTimer);
-        }
-
-        this.saveTimer = setTimeout(function () {
-            $changedInput = $(e.target);
-            saveSubsection();
-            this.saveTimer = null;
-        }, 500);
-    }
-}
-
 function autosaveInput(e) {
     if (this.saveTimer) {
         clearTimeout(this.saveTimer);
@@ -332,6 +247,7 @@ function autosaveInput(e) {
 }
 
 function saveSubsection() {
+    // Spinner is no longer used by subsection name, but is still used by date and time pickers on the right.
     if ($changedInput && !$changedInput.hasClass('no-spinner')) {
         $spinner.css({
             'position': 'absolute',
@@ -354,20 +270,6 @@ function saveSubsection() {
         metadata[$(el).data("metadata-name")] = el.value;
     }
 
-    // now add 'free-formed' metadata which are presented to the user as dual input fields (name/value)
-    $('ol.policy-list > li.policy-list-element').each(function (i, element) {
-        var name = $(element).children('.policy-list-name').val();
-        metadata[name] = $(element).children('.policy-list-value').val();
-    });
-
-    // now add any 'removed' policy metadata which is stored in a separate hidden div
-    // 'null' presented to the server means 'remove'
-    $("#policy-to-delete > li.policy-list-element").each(function (i, element) {
-        var name = $(element).children('.policy-list-name').val();
-        if (name != "")
-            metadata[name] = null;
-    });
-
     // Piece back together the date/time UI elements into one date/time string
     // NOTE: our various "date/time" metadata elements don't always utilize the same formatting string
     // so make sure we're passing back the correct format

cms/static/sass/views/_subsection.scss

@@ -172,89 +172,11 @@ body.course.subsection {
       font-size: 14px;
     }
 
-    .unit-subtitle {
-      display: block;
-      width: 100%;
-    }
-
     .sortable-unit-list {
       ol {
         @include tree-view;
       }
     }
-
-    .policy-list {
-      input[disabled] {
-        border: none;
-        @include box-shadow(none);
-      }
-
-      .policy-list-name {
-        margin-right: 5px;
-        margin-bottom: 10px;
-      }
-
-      .policy-list-value {
-        width: 320px;
-        margin-right: 10px;
-      }
-    }
-
-    .policy-list-element {
-      .save-button,
-      .cancel-button {
-        display: none;
-      }
-
-      .edit-icon {
-        margin-right: 8px;
-      }
-
-      &.editing,
-      &.new-policy-list-element {
-        .policy-list-name,
-        .policy-list-value {
-          border: 1px solid #b0b6c2;
-          @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
-          background-color: #edf1f5;
-          @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
-        }
-      }
-    }
-
-    .new-policy-list-element {
-      padding: 10px 10px 0;
-      margin: 0 -10px 10px;
-      border-radius: 3px;
-      background: $mediumGrey;
-
-      .save-button {
-        @include blue-button;
-        margin-bottom: 10px;
-      }
-
-      .cancel-button {
-        @include white-button;
-      }
-
-      .edit-icon {
-        display: none;
-      }
-
-      .delete-icon {
-        display: none;
-      }
-    }
-
-    .new-policy-item {
-      margin: 10px 0;
-
-      .plus-icon-small {
-        position: relative;
-        top: -1px;
-        vertical-align: middle;
-      }
-    }
   }
 
   .subsection-name-input {

cms/templates/edit_subsection.html

@@ -31,18 +31,6 @@
       </article>
     </div>
 
-    <div id="policy-to-delete" style="display:none">
-    </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="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">
       <div class="unit-settings window id-holder" data-id="${subsection.location}">
     <h4 class="header">Subsection Settings</h4>