Enable reordering on the unit page

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

@@ -41,6 +41,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
       template: template
     }, (data) => 
       @model.set(id: data.id)
+      @$el.data('id', data.id)
       @render()
     )
 

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

+class CMS.Views.UnitEdit extends Backbone.View
+  events:
+    'click .new-component .new-component-type a': 'showComponentTemplates'
+    'click .new-component .cancel-button': 'closeNewComponent'
+    'click .new-component-templates .new-component-template a': 'saveNewComponent'
+    'click .new-component-templates .cancel-button': 'closeNewComponent'
+    'click .new-component-button': 'showNewComponentForm'
+    'click .unit-actions .save-button': 'save'
+
+  initialize: =>
+    @$newComponentItem = @$('.new-component-item')
+    @$newComponentTypePicker = @$('.new-component')
+    @$newComponentTemplatePickers = @$('.new-component-templates')
+    @$newComponentButton = @$('.new-component-button')
+
+    @$('.components').sortable(
+      handle: '.drag-handle'
+      update: (event, ui) => @saveOrder()
+    )
+
+    @$('.component').each((idx, element) ->
+        new CMS.Views.ModuleEdit(
+            el: element,
+            model: new CMS.Models.Module(
+                id: $(element).data('id'),
+            )
+        )
+    )
+
+    @model.components = @components()
+
+  showNewComponentForm: (event) =>
+    event.preventDefault()
+    @$newComponentItem.addClass('adding')
+    $(event.target).slideUp(150)
+    @$newComponentTypePicker.slideDown(250)
+
+  showComponentTemplates: (event) =>
+    event.preventDefault()
+
+    type = $(event.currentTarget).data('type')
+    @$newComponentTypePicker.slideUp(250)
+    @$(".new-component-#{type}").slideDown(250)
+
+  closeNewComponent: (event) =>
+    event.preventDefault()
+
+    @$newComponentTypePicker.slideUp(250)
+    @$newComponentTemplatePickers.slideUp(250)
+    @$newComponentButton.slideDown(250)
+    @$newComponentItem.removeClass('adding')
+    @$newComponentItem.find('.rendered-component').remove()
+
+  saveNewComponent: (event) =>
+    event.preventDefault()
+
+    editor = new CMS.Views.ModuleEdit(
+      model: new CMS.Models.Module()
+    )
+
+    @$newComponentItem.before(editor.$el)
+
+    editor.cloneTemplate($(event.currentTarget).data('location'))
+
+    @closeNewComponent(event)
+
+  components: => @$('.component').map((idx, el) -> $(el).data('id')).get()
+
+  saveOrder: =>
+    @model.save(
+      children: @components()
+    )

cms/static/js/base.js

@@ -14,24 +14,9 @@ $(document).ready(function() {
     $newComponentTemplatePickers = $('.new-component-templates');
     $newComponentButton = $('.new-component-button');
 
-    $('li.component').each(function(idx, element) {
-        new CMS.Views.ModuleEdit({
-            el: element,
-            model: new CMS.Models.Module({
-                id: $(element).data('id'),
-            })
-        });
-    });
-
     $('.expand-collapse-icon').bind('click', toggleSubmodules);
     $('.visibility-options').bind('change', setVisibility);
 
-    $newComponentButton.bind('click', showNewComponentForm);
-    $newComponentTypePicker.find('.new-component-type a').bind('click', showComponentTemplates);
-    $newComponentTypePicker.find('.cancel-button').bind('click', closeNewComponent);
-    $newComponentTemplatePickers.find('.new-component-template a').bind('click', saveNewComponent);
-    $newComponentTemplatePickers.find('.cancel-button').bind('click', closeNewComponent);
-
     $('.unit-history ol a').bind('click', showHistoryModal);
     $modal.bind('click', hideHistoryModal);
     $modalCover.bind('click', hideHistoryModal);
@@ -58,44 +43,6 @@ function closeComponentEditor(e) {
     $(this).closest('.xmodule_edit').removeClass('editing').find('.component-editor').slideUp(150);
 }
 
-function showNewComponentForm(e) {
-    e.preventDefault();
-    $newComponentItem.addClass('adding');
-    $(this).slideUp(150);
-    $newComponentTypePicker.slideDown(250);
-}
-
-function showComponentTemplates(e) {
-    e.preventDefault();
-
-    var type = $(this).data('type');
-    $newComponentTypePicker.slideUp(250);
-    $('.new-component-'+type).slideDown(250);
-}
-
-function closeNewComponent(e) {
-    e.preventDefault();
-
-    $newComponentTypePicker.slideUp(250);
-    $newComponentTemplatePickers.slideUp(250);
-    $newComponentButton.slideDown(250);
-    $newComponentItem.removeClass('adding');
-    $newComponentItem.find('.rendered-component').remove();
-}
-
-function saveNewComponent(e) {
-    e.preventDefault();
-
-    editor = new CMS.Views.ModuleEdit({
-        model: new CMS.Models.Module()
-    })
-
-    $newComponentItem.before(editor.$el)
-
-    editor.cloneTemplate($(this).data('location'))
-
-    closeNewComponent(e);
-}
 
 function showHistoryModal(e) {
     e.preventDefault();

cms/templates/base.html

@@ -38,6 +38,8 @@
 
     <%block name="content"></%block>
 
+    <%block name="jsextra"></%block>
+
   </body>
 </html>
 

cms/templates/component.html

@@ -3,7 +3,7 @@ ${preview}
   <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
   <a href="#" class="delete-button wip"><span class="delete-icon white"></span>Delete</a>  
 </div>
-<a href="#" class="drag-handle wip"></a>
+<a href="#" class="drag-handle"></a>
 <div class="component-editor">
   <div class="module-editor">
     ${editor}

cms/templates/unit.html

@@ -2,6 +2,16 @@
 <%! from django.core.urlresolvers import reverse %>
 <%block name="bodyclass">unit</%block>
 <%block name="title">CMS Unit</%block>
+<%block name="jsextra">
+  <script type='text/javascript'>
+    new CMS.Views.UnitEdit({
+      el: $('.main-wrapper'),
+      model: new CMS.Models.Module({
+        id: '${unit.location.url()}'
+      })
+    });
+  </script>
+</%block>
 <%block name="content">
   <div class="main-wrapper">
     <div class="inner-wrapper">
@@ -49,8 +59,8 @@
         </article>
       </div>
 
-      <div class="sidebar">
-        <div class="unit-properties window wip-box">
+      <div class="sidebar wip-box">
+        <div class="unit-properties window">
           <h4>Unit Properties</h4>
           <div class="window-contents">
             <div class="due-date-input row">