Merge pull request #368 from MITx/feature/victor/cms-drag-and-drop

Feature/victor/cms drag and drop

cms/static/coffee/spec/main_spec.coffee

@@ -2,7 +2,7 @@ describe "CMS", ->
   beforeEach ->
     CMS.unbind()
 
-  it "should iniitalize Models", ->
+  it "should initialize Models", ->
     expect(CMS.Models).toBeDefined()
 
   it "should initialize Views", ->

cms/static/coffee/spec/models/module_spec.coffee

@@ -11,14 +11,25 @@ describe "CMS.Models.Module", ->
         @fakeModule = jasmine.createSpy("fakeModuleObject")
         window.FakeModule = jasmine.createSpy("FakeModule").andReturn(@fakeModule)
         @module = new CMS.Models.Module(type: "FakeModule")
-        @stubElement = $("<div>")
-        @module.loadModule(@stubElement)
+        @stubDiv = $('<div />')
+        @stubElement = $('<div class="xmodule_edit" />')
+        @stubElement.data('type', "FakeModule")
+
+        @stubDiv.append(@stubElement)
+        @module.loadModule(@stubDiv)
 
       afterEach ->
         window.FakeModule = undefined
 
       it "initialize the module", ->
-        expect(window.FakeModule).toHaveBeenCalledWith(@stubElement)
+        expect(window.FakeModule).toHaveBeenCalled()
+        # Need to compare underlying nodes, because jquery selectors
+        # aren't equal even when they point to the same node.
+        # http://stackoverflow.com/questions/9505437/how-to-test-jquery-with-jasmine-for-element-id-if-used-as-this
+        expectedNode = @stubElement[0]
+        actualNode = window.FakeModule.mostRecentCall.args[0][0]
+
+        expect(actualNode).toEqual(expectedNode)
         expect(@module.module).toEqual(@fakeModule)
 
     describe "when the module does not exists", ->
@@ -32,7 +43,8 @@ describe "CMS.Models.Module", ->
         window.console = @previousConsole
 
       it "print out error to log", ->
-        expect(window.console.error).toHaveBeenCalledWith("Unable to load HTML.")
+        expect(window.console.error).toHaveBeenCalled()
+        expect(window.console.error.mostRecentCall.args[0]).toMatch("^Unable to load")
 
 
   describe "editUrl", ->

cms/static/coffee/spec/views/module_edit_spec.coffee

@@ -8,11 +8,11 @@ describe "CMS.Views.ModuleEdit", ->
         <a href="#" class="cancel">cancel</a>
         <ol>
           <li>
-            <a href="#" class="module-edit" data-id="i4x://mitx.edu/course/module" data-type="html">submodule</a>
+            <a href="#" class="module-edit" data-id="i4x://mitx/course/html/module" data-type="html">submodule</a>
           </li>
         </ol>
       </div>
-      """
+      """ #"
     CMS.unbind()
 
   describe "defaults", ->
@@ -27,7 +27,7 @@ describe "CMS.Views.ModuleEdit", ->
       @stubModule.editUrl.andReturn("/edit_item?id=stub_module")
       new CMS.Views.ModuleEdit(el: $("#module-edit"), model: @stubModule)
 
-    it "load the edit from via ajax and pass to the model", ->
+    it "load the edit via ajax and pass to the model", ->
       expect($.fn.load).toHaveBeenCalledWith("/edit_item?id=stub_module", jasmine.any(Function))
       if $.fn.load.mostRecentCall
         $.fn.load.mostRecentCall.args[1]()
@@ -37,9 +37,9 @@ describe "CMS.Views.ModuleEdit", ->
     beforeEach ->
       @stubJqXHR = jasmine.createSpy("stubJqXHR")
       @stubJqXHR.success = jasmine.createSpy("stubJqXHR.success").andReturn(@stubJqXHR)
-      @stubJqXHR.error= jasmine.createSpy("stubJqXHR.success").andReturn(@stubJqXHR)
+      @stubJqXHR.error = jasmine.createSpy("stubJqXHR.error").andReturn(@stubJqXHR)
       @stubModule.save = jasmine.createSpy("stubModule.save").andReturn(@stubJqXHR)
-      new CMS.Views.ModuleEdit(el: $("#module-edit"), model: @stubModule)
+      new CMS.Views.ModuleEdit(el: $(".module-edit"), model: @stubModule)
       spyOn(window, "alert")
       $(".save-update").click()
 
@@ -77,5 +77,5 @@ describe "CMS.Views.ModuleEdit", ->
       expect(CMS.pushView).toHaveBeenCalledWith @view
       expect(CMS.Views.ModuleEdit).toHaveBeenCalledWith model: @model
       expect(CMS.Models.Module).toHaveBeenCalledWith
-        id: "i4x://mitx.edu/course/module"
+        id: "i4x://mitx/course/html/module"
         type: "html"

cms/static/coffee/spec/views/module_spec.coffee

 describe "CMS.Views.Module", ->
   beforeEach ->
     setFixtures """
-      <div id="module" data-id="i4x://mitx.edu/course/module" data-type="html">
+      <div id="module" data-id="i4x://mitx/course/html/module" data-type="html">
         <a href="#" class="module-edit">edit</a>
       </div>
       """
@@ -20,5 +20,5 @@ describe "CMS.Views.Module", ->
       expect(CMS.replaceView).toHaveBeenCalledWith @view
       expect(CMS.Views.ModuleEdit).toHaveBeenCalledWith model: @model
       expect(CMS.Models.Module).toHaveBeenCalledWith
-        id: "i4x://mitx.edu/course/module"
+        id: "i4x://mitx/course/html/module"
         type: "html"

cms/static/coffee/spec/views/week_spec.coffee

 describe "CMS.Views.Week", ->
   beforeEach ->
     setFixtures """
-      <div id="week" data-id="i4x://mitx.edu/course/week">
+      <div id="week" data-id="i4x://mitx/course/chapter/week">
         <div class="editable"></div>
         <textarea class="editable-textarea"></textarea>
         <a href="#" class="week-edit" >edit</a>

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

@@ -4,7 +4,8 @@ class CMS.Models.Module extends Backbone.Model
     data: ''
 
   loadModule: (element) ->
-    @module = XModule.loadModule($(element).find('.xmodule_edit'))
+    elt = $(element).find('.xmodule_edit').first()
+    @module = XModule.loadModule(elt)
 
   editUrl: ->
     "/edit_item?#{$.param(id: @get('id'))}"

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

@@ -13,6 +13,16 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
       # Load preview modules
       XModule.loadModules('display')
+      @enableDrag()
+
+  enableDrag: ->
+      # Enable dragging things in the #sortable div (if there is one)
+      if $("#sortable").length > 0
+        $("#sortable").sortable({
+          placeholder: "ui-state-highlight"
+          })
+        $("#sortable").disableSelection();
+
 
   save: (event) ->
     event.preventDefault()
@@ -32,6 +42,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
   cancel: (event) ->
     event.preventDefault()
     CMS.popView()
+    @enableDrag()
 
   editSubmodule: (event) ->
     event.preventDefault()
@@ -42,3 +53,4 @@ class CMS.Views.ModuleEdit extends Backbone.View
             id: $(event.target).data('id')
             type: if moduleType == 'None' then null else moduleType
             previewType: if previewType == 'None' then null else previewType
+    @enableDrag()

cms/templates/widgets/sequence-edit.html

@@ -33,7 +33,7 @@
     <section class="modules">
       <ol>
         <li>
-          <ol>
+          <ol id="sortable">
             % for child in module.get_children():
             <li class="${module.category}">
               <a href="#" class="module-edit"