Make inline editing save to mongo and then update the preview

cms/djangoapps/contentstore/views.py

@@ -327,7 +327,10 @@ def load_preview_module(request, preview_id, descriptor, instance_state, shared_
         module,
         "xmodule_edit.html",
         {
+            'location': descriptor.location.url(),
             'editor_content': descriptor.get_html(),
+            'editor_type': descriptor.js_module_name,
+            'editor_class': descriptor.__class__.__name__,
             # TODO (cpennington): Make descriptors know if they have data that can be editng
             'editable_data': descriptor.definition.get('data'),
             'editable_class': 'editable' if descriptor.definition.get('data') else '',
@@ -396,7 +399,7 @@ def save_item(request):
         export_to_github(course, "CMS Edit", author_string)
 
     descriptor = modulestore().get_item(item_location)
-    preview_html = get_module_previews(request, descriptor)
+    preview_html = get_module_previews(request, descriptor)[0]
 
     return HttpResponse(json.dumps(preview_html))
 

cms/static/coffee/src/models/module.coffee

@@ -5,24 +5,12 @@ class CMS.Models.Module extends Backbone.Model
     children: ''
     metadata: {}
 
-  loadModule: (element) ->
-    elt = $(element).find('.xmodule_edit').first()
-    @module = XModule.loadModule(elt)
-    # find the metadata edit region which should be setup server side,
-    # so that we can wire up posting back those changes
-    @metadata_elt = $(element).find('.metadata_edit')
-
-  editUrl: ->
-    "/edit_item?#{$.param(id: @get('id'))}"
+  initialize: (attributes) ->
+    @module = attributes.module
+    @unset('module')
+    delete attributes.module
+    super(attributes)
 
   save: (args...) ->
     @set(data: @module.save()) if @module
-    # cdodge: package up metadata which is separated into a number of input fields
-    # there's probably a better way to do this, but at least this lets me continue to move onwards
-    if @metadata_elt
-      _metadata = {}
-      # walk through the set of elments which have the 'xmetadata_name' attribute and
-      # build up a object to pass back to the server on the subsequent POST
-      _metadata[$(el).data("metadata-name")]=el.value for el in $('[data-metadata-name]', @metadata_elt)
-      @set(metadata: _metadata)
     super(args...)

cms/static/coffee/src/views/module_edit.coffee

 class CMS.Views.ModuleEdit extends Backbone.View
-  tagName: 'section'
-  className: 'edit-pane'
-
-  events:
-    'click .cancel': 'cancel'
-    'click .module-edit': 'editSubmodule'
-    'click .save-update': 'save'
+  tagName: 'div'
+  className: 'xmodule_edit'
 
   initialize: ->
-    @$el.load @model.editUrl(), =>
-      @model.loadModule(@el)
-
-      # Load preview modules
-      XModule.loadModules('display')
-      @$children = @$el.find('#sortable')
-      @enableDrag()
-
-  enableDrag: =>
-      # Enable dragging things in the #sortable div (if there is one)
-      if @$children.length > 0
-        @$children.sortable(
-          placeholder: "ui-state-highlight"
-          update: (event, ui) =>
-            @model.set(children: @$children.find('.module-edit').map(
-                (idx, el) -> $(el).data('id')
-            ).toArray())
-        )
-        @$children.disableSelection()
+    @delegate()
+
+    @$component_editor = @$el.find('.component-editor')
+    @$metadata = @$component_editor.find('.metadata_edit')
+
+  delegate: ->
+    id = @$el.data('id')
+
+    events = {}
+    events["click .component-editor[data-id=#{ id }] .cancel-button"] = 'cancel'
+    events["click .component-editor[data-id=#{ id }] .save-button"] = 'save'
+    events["click .component-actions[data-id=#{ id }] .edit-button"] = 'edit'
+
+    @delegateEvents(events)
+
+  metadata: ->
+    # cdodge: package up metadata which is separated into a number of input fields
+    # there's probably a better way to do this, but at least this lets me continue to move onwards
+    _metadata = {}
+
+    if @$metadata
+      # walk through the set of elments which have the 'xmetadata_name' attribute and
+      # build up a object to pass back to the server on the subsequent POST
+      _metadata[$(el).data("metadata-name")] = el.value for el in $('[data-metadata-name]', @$metadata)
+
+    _metadata
 
   save: (event) =>
     event.preventDefault()
-    @model.save().done((previews) =>
+    @model.save(
+      metadata: @metadata()
+    ).done((preview) =>
       alert("Your changes have been saved.")
-      previews_section = @$el.find('.previews').empty()
-      $.each(previews, (idx, preview) =>
-        preview_wrapper = $('<section/>', class: 'preview').append preview
-        previews_section.append preview_wrapper
-      )
+      
+      new_el = $(preview)
+      @$el.replaceWith(new_el)
+      @$el = new_el
+
+      @delegate()
 
-      XModule.loadModules('display')
+      @model.module = XModule.loadModule(@$el)
+      XModule.loadModules(@$el)
     ).fail( ->
       alert("There was an error saving your changes. Please try again.")
     )
 
   cancel: (event) ->
     event.preventDefault()
-    CMS.popView()
-    @enableDrag()
+    @$el.removeClass('editing')
+    @$component_editor.slideUp(150)
 
-  editSubmodule: (event) ->
+  edit: (event) ->
     event.preventDefault()
-    previewType = $(event.target).data('preview-type')
-    moduleType = $(event.target).data('type')
-    CMS.pushView new CMS.Views.ModuleEdit
-        model: new CMS.Models.Module
-            id: $(event.target).data('id')
-            type: if moduleType == 'None' then null else moduleType
-            previewType: if previewType == 'None' then null else previewType
-    @enableDrag()
+    @$el.addClass('editing')
+    @$component_editor.slideDown(150)

common/lib/xmodule/xmodule/js/src/sequence/display.coffee

@@ -84,7 +84,7 @@ class @Sequence
 
       @mark_active new_position
       @$('#seq_content').html @contents.eq(new_position - 1).text()
-      XModule.loadModules('display', @$('#seq_content'))
+      XModule.loadModules(@$('#seq_content'))
 
       MathJax.Hub.Queue(["Typeset", MathJax.Hub, "seq_content"]) # NOTE: Actually redundant. Some other MathJax call also being performed
       window.update_schematics() # For embedded circuit simulator exercises in 6.002x

common/static/coffee/src/xmodule.coffee

 @XModule =
-    ###
-    Load a single module (either an edit module or a display module)
-    from the supplied element, which should have a data-type attribute
-    specifying the class to load
-    ###
-    loadModule: (element) ->
-        moduleType = $(element).data('type')
-        if moduleType == 'None'
-            return
+  ###
+  Load a single module (either an edit module or a display module)
+  from the supplied element, which should have a data-type attribute
+  specifying the class to load
+  ###
+  loadModule: (element) ->
+    moduleType = $(element).data('type')
+    if moduleType == 'None'
+      return
 
-        try
-            new window[moduleType](element)
-        catch error
-            console.error "Unable to load #{moduleType}: #{error.message}" if console
+    try
+      $(element).data('module', new window[moduleType](element))
+      $(document).trigger('XModule.loaded', [element])
+    catch error
+      console.error "Unable to load #{moduleType}: #{error.message}" if console
 
-    ###
-    Load all modules on the page of the specified type.
-    If container is provided, only load modules inside that element
-    Type is one of 'display' or 'edit'
-    ###
-    loadModules: (type, container) ->
-        selector = ".xmodule_#{type}"
+  ###
+  Load all modules on the page of the specified type.
+  If container is provided, only load modules inside that element
+  Type is one of 'display' or 'edit'
+  ###
+  loadModules: (container) ->
+    selector = ".xmodule_edit, .xmodule_display"
 
-        if container?
-            modules = $(container).find(selector)
-        else
-            modules = $(selector)
+    if container?
+      modules = $(container).find(selector)
+    else
+      modules = $(selector)
 
-        modules.each (idx, element) -> XModule.loadModule element
+    modules.each (idx, element) -> XModule.loadModule element

common/templates/xmodule_edit.html

-<div class="xmodule_edit xmodule_${class_} ${editable_class}" data-type="${module_name}">
+<div class="xmodule_edit xmodule_${editor_class} ${editable_class}" data-type="${editor_type}" data-id="${location}">
   <%include file="xmodule_display.html"/>
   % if editable_data:
-  <div class="component-actions">
+  <div class="component-actions" data-id="${location}">
     <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
     <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>	
   </div>
-  <div class="component-editor">
+  <div class="component-editor" data-id="${location}">
     ${editor_content}
     <a href="#" class="save-button">Save</a>
     <a href="#" class="cancel-button">Cancel</a>

lms/static/coffee/src/courseware.coffee

@@ -11,7 +11,7 @@ class @Courseware
     new Courseware
 
   render: ->
-    XModule.loadModules('display')
+    XModule.loadModules()
     $('.course-content .histogram').each ->
       id = $(this).attr('id').replace(/histogram_/, '')
       try