Turn course sections into Backbone models

Hook up course name edit interaction, with notification framework

cms/static/js/base.js

@@ -140,11 +140,6 @@ $(document).ready(function() {
 
     $('.new-course-button').bind('click', addNewCourse);
 
-    // section name editing
-    $('.section-name').bind('click', editSectionName);
-    $('.edit-section-name-cancel').bind('click', cancelEditSectionName);
-    // $('.edit-section-name-save').bind('click', saveEditSectionName);
-
     // section date setting
     $('.set-publish-date').bind('click', setSectionScheduleDate);
     $('.edit-section-start-cancel').bind('click', cancelSetSectionScheduleDate);
@@ -763,72 +758,6 @@ function cancelNewSubsection(e) {
     $(this).parents('li.branch').remove();
 }
 
-function editSectionName(e) {
-    e.preventDefault();
-    $(this).unbind('click', editSectionName);
-    $(this).children('.section-name-edit').show();
-    $(this).find('.edit-section-name').focus();
-    $(this).children('.section-name-span').hide();
-    $(this).find('.section-name-edit').bind('submit', saveEditSectionName);
-    $(this).find('.edit-section-name-cancel').bind('click', cancelNewSection);
-    $body.bind('keyup', {
-        $cancelButton: $(this).find('.edit-section-name-cancel')
-    }, checkForCancel);
-}
-
-function cancelEditSectionName(e) {
-    e.preventDefault();
-    $(this).parent().hide();
-    $(this).parent().siblings('.section-name-span').show();
-    $(this).closest('.section-name').bind('click', editSectionName);
-    e.stopPropagation();
-}
-
-function saveEditSectionName(e) {
-    e.preventDefault();
-
-    $(this).closest('.section-name').unbind('click', editSectionName);
-
-    var id = $(this).closest('.courseware-section').data('id');
-    var display_name = $.trim($(this).find('.edit-section-name').val());
-
-    $(this).closest('.courseware-section .section-name').append($spinner);
-    $spinner.show();
-
-    if (display_name == '') {
-        alert("You must specify a name before saving.");
-        return;
-    }
-
-    analytics.track('Edited Section Name', {
-        'course': course_location_analytics,
-        'display_name': display_name,
-        'id': id
-    });
-
-
-    var $_this = $(this);
-    // call into server to commit the new order
-    $.ajax({
-        url: "/save_item",
-        type: "POST",
-        dataType: "json",
-        contentType: "application/json",
-        data: JSON.stringify({
-            'id': id,
-            'metadata': {
-                'display_name': display_name
-            }
-        })
-    }).success(function() {
-        $spinner.delay(250).fadeOut(250);
-        $_this.closest('h3').find('.section-name-span').html(display_name).show();
-        $_this.hide();
-        $_this.closest('.section-name').bind('click', editSectionName);
-        e.stopPropagation();
-    });
-}
-
 function setSectionScheduleDate(e) {
     e.preventDefault();
     $(this).closest("h4").hide();

cms/templates/overview.html

@@ -128,6 +128,135 @@
     </header>
   </div>
 
+<%text>
+<script type="text/template" id="section-name-edit-tpl">
+  <form class="section-name-edit">
+    <input type="text" value="<%= name %>" autocomplete="off"/>
+    <input type="submit" class="save-button" value="Save" />
+    <input type="button" class="cancel-button" value="Cancel" />
+  </form>
+</script>
+<script type="text/javascript">
+CMS.Models.Section = Backbone.Model.extend({
+    defaults: {
+        "name": ""
+    },
+    validate: function(attrs, options) {
+        if (!attrs.name) {
+            return "You must specify a name"
+        }
+    },
+    url: "/save_item",
+    toJSON: function() {
+        return {
+            id: this.get("id"),
+            metadata: {
+                display_name: this.get("name")
+            }
+        }
+    },
+    initialize: function() {
+        this.listenTo(this, "request", this.showNotification);
+        this.listenTo(this, "sync", this.hideNotification);
+        this.listenTo(this, "error", this.hideNotification);
+    },
+    showNotification: function() {
+        if(!this.msg) {
+            this.msg = new CMS.Models.SystemFeedback({
+                type: "saving",
+                title: "Saving&hellip;",
+                icon: true,
+                status: true
+            })
+        }
+        if(!this.msgView) {
+            this.msgView = new CMS.Views.Notification({model: this.msg});
+        }
+        this.msg.show();
+    },
+    hideNotification: function() {
+        if(!this.msg) { return }
+        this.msg.hide();
+    }
+});
+
+CMS.Views.SectionShow = Backbone.View.extend({
+    template: _.template('<span data-tooltip="Edit this section\'s name" class="section-name-span"><%= name %></span>'),
+    render: function() {
+        this.$el.html(this.template(this.model.attributes));
+        this.delegateEvents();
+        return this;
+    },
+    events: {
+        "click": "switchToEditView"
+    },
+    switchToEditView: function() {
+        if(!this.editView) {
+            this.editView = new CMS.Views.SectionEdit({
+                model: this.model, el: this.el, showView: this});
+        }
+        this.undelegateEvents();
+        this.editView.render();
+    }
+})
+CMS.Views.SectionEdit = Backbone.View.extend({
+    template: _.template($("#section-name-edit-tpl").text()),
+    render: function() {
+        this.$el.html(this.template(this.model.attributes));
+        this.delegateEvents();
+        return this;
+    },
+    initialize: function() {
+        this.listenTo(this.model, "invalid", this.showErrorMessage);
+        this.render();
+    },
+    events: {
+        "click .save-button": "saveName",
+        "submit": "saveName",
+        "click .cancel-button": "switchToShowView"
+    },
+    saveName: function(e) {
+        if (e) { e.preventDefault() }
+        var name = this.$("input[type=text]").val();
+        var that = this;
+        this.model.save("name", name, {
+            success: function() {
+                analytics.track('Edited Section Name', {
+                    'course': course_location_analytics,
+                    'display_name': that.model.get('name'),
+                    'id': that.model.get('id')
+                });
+                that.switchToShowView();
+            }
+        })
+    },
+    switchToShowView: function() {
+        if(!this.showView) {
+            this.showView = new CMS.Views.SectionShow({
+                model: this.model, el: this.el, editView: this});
+        }
+        this.undelegateEvents();
+        this.stopListening();
+        this.showView.render();
+    },
+    showErrorMessage: function(model, error, options) {
+        alert(error);
+    }
+})
+
+$(function() {
+    $(".section-name").each(function() {
+        var model = new CMS.Models.Section({
+            id: $(this).parent(".item-details").data("id"),
+            name: $(this).data("name")
+        });
+        new CMS.Views.SectionShow({model: model, el: this}).render();
+    })
+})
+
+</script>
+</%text>
+
   <div class="main-wrapper">
     <div class="inner-wrapper">
       <article class="courseware-overview" data-course-id="${context_course.location.url()}">
@@ -137,14 +266,7 @@
             <a href="#" data-tooltip="Expand/collapse this section" class="expand-collapse-icon collapse"></a>
 
             <div class="item-details" data-id="${section.location}">
-              <h3 class="section-name">
-                <span data-tooltip="Edit this section's name" class="section-name-span">${section.display_name_with_default}</span>
-                <form class="section-name-edit" style="display:none">
-                  <input type="text" value="${section.display_name_with_default | h}" class="edit-section-name" autocomplete="off"/>
-                  <input type="submit" class="save-button edit-section-name-save" value="Save" />
-                  <input type="button" class="cancel-button edit-section-name-cancel" value="Cancel" />
-                </form>
-              </h3>
+              <h3 class="section-name" data-name="${section.display_name_with_default}"></h3>
               <div class="section-published-date">
                 <%
                   start_date_str = get_time_struct_display(section.lms.start, '%m/%d/%Y')