Pull modal cover and date utils into their own files.

cms/static/coffee/spec/views/course_info_spec.coffee

@@ -54,17 +54,14 @@ define ["js/views/course_info_handout", "js/views/course_info_update", "js/model
                 @courseInfoEdit.$el.find('.save-button').click()
 
             @cancelNewCourseInfo = (useCancelButton) ->
-                spyOn(@courseInfoEdit.$modalCover, 'show').andCallThrough()
-                spyOn(@courseInfoEdit.$modalCover, 'hide').andCallThrough()
-
                 @courseInfoEdit.onNew(@event)
-                expect(@courseInfoEdit.$modalCover.show).toHaveBeenCalled()
+                spyOn(@courseInfoEdit.$modalCover, 'hide').andCallThrough()
 
                 spyOn(@courseInfoEdit.$codeMirror, 'getValue').andReturn('unsaved changes')
                 model = @collection.at(0)
                 spyOn(model, "save").andCallThrough()
 
-                cancelEditingUpdate(useCancelButton)
+                cancelEditingUpdate(@courseInfoEdit, @courseInfoEdit.$modalCover, useCancelButton)
 
                 expect(@courseInfoEdit.$modalCover.hide).toHaveBeenCalled()
                 expect(model.save).not.toHaveBeenCalled()
@@ -73,28 +70,25 @@ define ["js/views/course_info_handout", "js/views/course_info_update", "js/model
 
             @cancelExistingCourseInfo = (useCancelButton) ->
                 @createNewUpdate('existing update')
-
-                spyOn(@courseInfoEdit.$modalCover, 'show').andCallThrough()
-                spyOn(@courseInfoEdit.$modalCover, 'hide').andCallThrough()
                 @courseInfoEdit.$el.find('.edit-button').click()
-                expect(@courseInfoEdit.$modalCover.show).toHaveBeenCalled()
+                spyOn(@courseInfoEdit.$modalCover, 'hide').andCallThrough()
 
                 spyOn(@courseInfoEdit.$codeMirror, 'getValue').andReturn('modification')
                 model = @collection.at(0)
                 spyOn(model, "save").andCallThrough()
-
-                cancelEditingUpdate(useCancelButton)
+                model.id = "saved_to_server"
+                cancelEditingUpdate(@courseInfoEdit, @courseInfoEdit.$modalCover, useCancelButton)
 
                 expect(@courseInfoEdit.$modalCover.hide).toHaveBeenCalled()
                 expect(model.save).not.toHaveBeenCalled()
                 previewContents = @courseInfoEdit.$el.find('.update-contents').html()
                 expect(previewContents).toEqual('existing update')
 
-            cancelEditingUpdate = (update, useCancelButton) ->
+            cancelEditingUpdate = (update, modalCover, useCancelButton) ->
                 if useCancelButton
                     update.$el.find('.cancel-button').click()
                 else
-                    $('.modal-cover').click()
+                    modalCover.click()
 
         afterEach ->
             @xhrRestore()

cms/static/coffee/spec/views/overview_spec.coffee

@@ -1,5 +1,5 @@
 define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base", "date", "jquery.timepicker"],
-(OverviewDragger, Notification, sinon) ->
+(Overview, Notification, sinon) ->
 
     describe "Course Overview", ->
         beforeEach ->
@@ -62,9 +62,9 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                               </ol>
                               """
 
-            spyOn(window, 'saveSetSectionScheduleDate').andCallThrough()
+            spyOn(Overview, 'saveSetSectionScheduleDate').andCallThrough()
             # Have to do this here, as it normally gets bound in document.ready()
-            $('a.save-button').click(saveSetSectionScheduleDate)
+            $('a.save-button').click(Overview.saveSetSectionScheduleDate)
             $('a.delete-section-button').click(deleteSection)
             $(".edit-subsection-publish-settings .start-date").datepicker()
 
@@ -75,7 +75,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
             requests = @requests = []
             @xhr.onCreate = (req) -> requests.push(req)
 
-            OverviewDragger.makeDraggable(
+            Overview.overviewDragger.makeDraggable(
                 '.unit',
                 '.unit-drag-handle',
                 'ol.sortable-unit-list',
@@ -90,7 +90,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
         it "should save model when save is clicked", ->
             $('a.edit-button').click()
             $('a.save-button').click()
-            expect(saveSetSectionScheduleDate).toHaveBeenCalled()
+            expect(Overview.saveSetSectionScheduleDate).toHaveBeenCalled()
 
         it "should show a confirmation on save", ->
             $('a.edit-button').click()
@@ -120,7 +120,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 $ele.offset(
                     top: $ele.offset().top + 10, left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, 1)
+                destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#unit-2'))
                 expect(destination.attachMethod).toBe('before')
 
@@ -130,7 +130,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     top: $('#unit-4').offset().top + 8
                     left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, 1)
+                destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#unit-4'))
                 # Dragging down into first element, we have a fudge factor makes it easier to drag at beginning.
                 expect(destination.attachMethod).toBe('before')
@@ -139,7 +139,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     top: $('#unit-4').offset().top + 12
                     left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, 1)
+                destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#unit-4'))
                 expect(destination.attachMethod).toBe('after')
 
@@ -149,7 +149,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     top: $('#unit-3').offset().bottom + 4
                     left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, -1)
+                destination = Overview.overviewDragger.findDestination($ele, -1)
                 expect(destination.ele).toBe($('#unit-3'))
                 # Dragging down up into last element, we have a fudge factor makes it easier to drag at beginning.
                 expect(destination.attachMethod).toBe('after')
@@ -158,7 +158,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     top: $('#unit-3').offset().top + 4
                     left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, -1)
+                destination = Overview.overviewDragger.findDestination($ele, -1)
                 expect(destination.ele).toBe($('#unit-3'))
                 expect(destination.attachMethod).toBe('before')
 
@@ -168,7 +168,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     top: $('#subsection-3').offset().top + 10
                     left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, 1)
+                destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#subsection-list-3'))
                 expect(destination.attachMethod).toBe('prepend')
 
@@ -177,7 +177,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 $ele.offset(
                     top: $ele.offset().top + 200, left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, 1)
+                destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination).toEqual(
                     ele: null
                     attachMethod: ""
@@ -190,21 +190,21 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     top: $('#subsection-2').offset().top + 3
                     left: $ele.offset().left
                 )
-                destination = OverviewDragger.findDestination($ele, 1)
+                destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#subsection-list-2'))
                 expect(destination.parentList).toBe($('#subsection-2'))
                 expect(destination.attachMethod).toBe('prepend')
 
         describe "onDragStart", ->
             it "sets the dragState to its default values", ->
-                expect(OverviewDragger.dragState).toEqual({})
+                expect(Overview.overviewDragger.dragState).toEqual({})
                 # Call with some dummy data
-                OverviewDragger.onDragStart(
+                Overview.overviewDragger.onDragStart(
                     {element: $('#unit-1')},
                     null,
                     null
                 )
-                expect(OverviewDragger.dragState).toEqual(
+                expect(Overview.overviewDragger.dragState).toEqual(
                     dropDestination: null,
                     attachMethod: '',
                     parentList: null,
@@ -214,7 +214,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
 
             it "collapses expanded elements", ->
                 expect($('#subsection-1')).not.toHaveClass('collapsed')
-                OverviewDragger.onDragStart(
+                Overview.overviewDragger.onDragStart(
                     {element: $('#subsection-1')},
                     null,
                     null
@@ -233,7 +233,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 $ele.offset(
                     top: dragY, left: dragX
                 )
-                OverviewDragger.onDragMove(
+                Overview.overviewDragger.onDragMove(
                     {element: $ele, dragPoint:
                         {y: dragY}}, '', {clientX: dragX}
                 )
@@ -246,57 +246,57 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 $ele.offset(
                     top: dragY, left: $ele.offset().left
                 )
-                OverviewDragger.onDragMove(
+                Overview.overviewDragger.onDragMove(
                     {element: $ele, dragPoint:
                         {y: dragY}}, '', {clientX: $ele.offset().left - 3}
                 )
                 expect($('#unit-2')).not.toHaveClass('drop-target drop-target-before')
                 expect($ele).not.toHaveClass('valid-drop')
 
             it "scrolls up if necessary", ->
-                OverviewDragger.onDragMove(
+                Overview.overviewDragger.onDragMove(
                     {element: $('#unit-1')}, '', {clientY: 2}
                 )
                 expect(@scrollSpy).toHaveBeenCalledWith(0, -10)
 
             it "scrolls down if necessary", ->
-                OverviewDragger.onDragMove(
+                Overview.overviewDragger.onDragMove(
                     {element: $('#unit-1')}, '', {clientY: (window.innerHeight - 5)}
                 )
                 expect(@scrollSpy).toHaveBeenCalledWith(0, 10)
 
         describe "onDragEnd", ->
             beforeEach ->
-                @reorderSpy = spyOn(OverviewDragger, 'handleReorder')
+                @reorderSpy = spyOn(Overview.overviewDragger, 'handleReorder')
 
             afterEach ->
                 @reorderSpy.reset()
 
             it "calls handleReorder on a successful drag", ->
-                OverviewDragger.dragState.dropDestination = $('#unit-2')
-                OverviewDragger.dragState.attachMethod = "before"
-                OverviewDragger.dragState.parentList = $('#subsection-1')
+                Overview.overviewDragger.dragState.dropDestination = $('#unit-2')
+                Overview.overviewDragger.dragState.attachMethod = "before"
+                Overview.overviewDragger.dragState.parentList = $('#subsection-1')
                 $('#unit-1').offset(
                     top: $('#unit-1').offset().top + 10
                     left: $('#unit-1').offset().left
                 )
-                OverviewDragger.onDragEnd(
+                Overview.overviewDragger.onDragEnd(
                     {element: $('#unit-1')},
                 null,
                     {clientX: $('#unit-1').offset().left}
                 )
                 expect(@reorderSpy).toHaveBeenCalled()
 
             it "clears out the drag state", ->
-                OverviewDragger.onDragEnd(
+                Overview.overviewDragger.onDragEnd(
                     {element: $('#unit-1')},
                 null,
                 null
                 )
-                expect(OverviewDragger.dragState).toEqual({})
+                expect(Overview.overviewDragger.dragState).toEqual({})
 
             it "sets the element to the correct position", ->
-                OverviewDragger.onDragEnd(
+                Overview.overviewDragger.onDragEnd(
                     {element: $('#unit-1')},
                 null,
                 null
@@ -308,7 +308,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
             it "expands an element if it was collapsed on drag start", ->
                 $('#subsection-1').addClass('collapsed')
                 $('#subsection-1').addClass('expand-on-drop')
-                OverviewDragger.onDragEnd(
+                Overview.overviewDragger.onDragEnd(
                     {element: $('#subsection-1')},
                 null,
                 null
@@ -318,10 +318,10 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
 
             it "expands a collapsed element when something is dropped in it", ->
                 $('#subsection-2').addClass('collapsed')
-                OverviewDragger.dragState.dropDestination = $('#list-2')
-                OverviewDragger.dragState.attachMethod = "prepend"
-                OverviewDragger.dragState.parentList = $('#subsection-2')
-                OverviewDragger.onDragEnd(
+                Overview.overviewDragger.dragState.dropDestination = $('#list-2')
+                Overview.overviewDragger.dragState.attachMethod = "prepend"
+                Overview.overviewDragger.dragState.parentList = $('#subsection-2')
+                Overview.overviewDragger.onDragEnd(
                     {element: $('#unit-1')},
                 null,
                     {clientX: $('#unit-1').offset().left}
@@ -344,15 +344,15 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 @clock.restore()
 
             it "should send an update on reorder", ->
-                OverviewDragger.dragState.dropDestination = $('#unit-4')
-                OverviewDragger.dragState.attachMethod = "after"
-                OverviewDragger.dragState.parentList = $('#subsection-2')
+                Overview.overviewDragger.dragState.dropDestination = $('#unit-4')
+                Overview.overviewDragger.dragState.attachMethod = "after"
+                Overview.overviewDragger.dragState.parentList = $('#subsection-2')
                 # Drag Unit 1 from Subsection 1 to the end of Subsection 2.
                 $('#unit-1').offset(
                     top: $('#unit-4').offset().top + 10
                     left: $('#unit-4').offset().left
                 )
-                OverviewDragger.onDragEnd(
+                Overview.overviewDragger.onDragEnd(
                     {element: $('#unit-1')},
                     null,
                     {clientX: $('#unit-1').offset().left}

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

@@ -1,7 +1,7 @@
 define ["backbone", "jquery", "underscore", "gettext", "xblock/runtime.v1",
         "js/views/feedback_notification", "js/views/metadata", "js/collections/metadata"
-        "jquery.inputnumber", "xmodule"],
-(Backbone, $, _, gettext, XBlock, NotificationView, MetadataView, MetadataCollection) ->
+        "js/utils/modal", "jquery.inputnumber", "xmodule"],
+(Backbone, $, _, gettext, XBlock, NotificationView, MetadataView, MetadataCollection, ModalUtils) ->
   class ModuleEdit extends Backbone.View
     tagName: 'li'
     className: 'component'
@@ -87,7 +87,7 @@ define ["backbone", "jquery", "underscore", "gettext", "xblock/runtime.v1",
         id: _this.model.id
 
       data.metadata = _.extend(data.metadata || {}, @changedMetadata())
-      @hideModal()
+      ModalUtils.hideModalCover()
       saving = new NotificationView.Mini
         title: gettext('Saving…')
       saving.show()
@@ -102,17 +102,12 @@ define ["backbone", "jquery", "underscore", "gettext", "xblock/runtime.v1",
       event.preventDefault()
       @$el.removeClass('editing')
       @$component_editor().slideUp(150)
-      @hideModal()
-
-    hideModal: ->
-      $modalCover = $(".modal-cover")
-      $modalCover.hide()
-      $modalCover.removeClass('is-fixed')
+      ModalUtils.hideModalCover()
 
     clickEditButton: (event) ->
       event.preventDefault()
       @$el.addClass('editing')
-      $(".modal-cover").show().addClass('is-fixed')
+      ModalUtils.showModalCover(true)
       @$component_editor().slideDown(150)
       @loadEdit()