Pull modal cover and date utils into their own files.

Move overview-specific functions into overview.js.

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/src/views/module_edit.coffee

 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()
 

cms/static/js/utils/get_date.js

+define(["jquery", "jquery.ui", "jquery.timepicker"], function($) {
+    var getDate = function (datepickerInput, timepickerInput) {
+        // given a pair of inputs (datepicker and timepicker), return a JS Date
+        // object that corresponds to the datetime.js that they represent. Assume
+        // UTC timezone, NOT the timezone of the user's browser.
+        var date = $(datepickerInput).datepicker("getDate");
+        var time = $(timepickerInput).timepicker("getTime");
+        if(date && time) {
+            return new Date(Date.UTC(
+                date.getFullYear(), date.getMonth(), date.getDate(),
+                time.getHours(), time.getMinutes()
+            ));
+        } else {
+            return null;
+        }
+    };
+    return getDate;
+});

cms/static/js/utils/modal.js

+define(["jquery"], function($) {
+    /**
+     * Hides the modal and modal cover, using the standard selectors.
+     * Note though that the class "is-fixed" on the modal cover
+     * prevents the closing operation.
+     */
+    var hideModal = function(e) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        var $modalCover = getModalCover();
+
+        // Unit editors (module_edit) do not want the modal cover to hide when users click outside
+        // of the editor. Users must press Cancel or Save to exit the editor.
+        if (!$modalCover.hasClass("is-fixed")) {
+            getModal().hide();
+            hideModalCover($modalCover);
+        }
+    };
+
+    /**
+     * Hides just the modal cover. Caller can pass in a specific
+     * element as the modal cover, otherwise the standard selector will be used.
+     *
+     * This method also unbinds the click handler on the modal cover.
+     */
+    var hideModalCover = function (modalCover) {
+        if (modalCover == undefined) {
+            modalCover = getModalCover();
+        }
+        modalCover.hide();
+        modalCover.removeClass("is-fixed");
+        modalCover.unbind('click');
+    };
+
+    /**
+     * Shows the modal and modal cover, using the standard selectors.
+     */
+    var showModal = function () {
+        getModal().show();
+        showModalCover();
+    };
+
+    /**
+     * Shows just the modal cover. The caller can optionally choose
+     * to have the class "is-fixed" added to the cover, and
+     * the user can also choose to specify a custom click handler
+     * for the modal cover.
+     *
+     * This method returns the modal cover element.
+     */
+    var showModalCover = function(addFixed, clickHandler) {
+        var $modalCover = getModalCover();
+        $modalCover.show();
+        if (addFixed) {
+            $modalCover.addClass("is-fixed");
+        }
+        $modalCover.unbind('click');
+        if (clickHandler) {
+            $modalCover.bind('click', clickHandler);
+        }
+        else {
+            $modalCover.bind('click', hideModal);
+        }
+        return $modalCover;
+    };
+
+    var getModalCover = function () {
+        return $('.modal-cover');
+    };
+
+    var getModal = function () {
+        return $(".modal, .showAsModal");
+    };
+
+    return {
+        showModal: showModal,
+        hideModal: hideModal,
+        showModalCover: showModalCover,
+        hideModalCover: hideModalCover
+    };
+});

cms/static/js/views/course_info_handout.js

-define(["backbone", "underscore", "codemirror", "js/views/feedback_notification", "js/views/course_info_helper"],
-    function(Backbone, _, CodeMirror, NotificationView, CourseInfoHelper) {
+define(["backbone", "underscore", "codemirror", "js/views/feedback_notification", "js/views/course_info_helper", "js/utils/modal"],
+    function(Backbone, _, CodeMirror, NotificationView, CourseInfoHelper, ModalUtils) {
 
-    var $modalCover = $(".modal-cover");
     // the handouts view is dumb right now; it needs tied to a model and all that jazz
     var CourseInfoHandoutsView = Backbone.View.extend({
         // collection is CourseUpdateCollection
@@ -47,10 +46,7 @@ define(["backbone", "underscore", "codemirror", "js/views/feedback_notification"
             this.$codeMirror = CourseInfoHelper.editWithCodeMirror(
                 self.model, 'data', self.options['base_asset_url'], this.$editor.get(0));
 
-            $modalCover.show();
-            $modalCover.bind('click', function() {
-                self.closeEditor();
-            });
+            ModalUtils.showModalCover(false, function() { self.closeEditor() });
         },
 
         onSave: function(event) {
@@ -81,8 +77,7 @@ define(["backbone", "underscore", "codemirror", "js/views/feedback_notification"
 
         closeEditor: function() {
             this.$form.hide();
-            $modalCover.unbind('click');
-            $modalCover.hide();
+            ModalUtils.hideModalCover();
             this.$form.find('.CodeMirror').remove();
             this.$codeMirror = null;
         }

cms/static/js/views/course_info_update.js

 define(["backbone", "underscore", "codemirror", "js/models/course_update",
-    "js/views/feedback_prompt", "js/views/feedback_notification", "js/views/course_info_helper"],
-    function(Backbone, _, CodeMirror, CourseUpdateModel, PromptView, NotificationView, CourseInfoHelper) {
+    "js/views/feedback_prompt", "js/views/feedback_notification", "js/views/course_info_helper", "js/utils/modal"],
+    function(Backbone, _, CodeMirror, CourseUpdateModel, PromptView, NotificationView, CourseInfoHelper, ModalUtils) {
 
     var CourseInfoUpdateView = Backbone.View.extend({
         // collection is CourseUpdateCollection
@@ -17,8 +17,6 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
             this.render();
             // when the client refetches the updates as a whole, re-render them
             this.listenTo(this.collection, 'reset', this.render);
-
-            this.$modalCover = $(".modal-cover");
         },
 
         render: function () {
@@ -64,9 +62,9 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
             $newForm.addClass('editing');
             this.$currentPost = $newForm.closest('li');
 
-            this.$modalCover.show();
-            this.$modalCover.bind('click', function() {
-                self.closeEditor(true);
+            // Variable stored for unit test.
+            this.$modalCover = ModalUtils.showModalCover(false, function() {
+                self.closeEditor(true)
             });
 
             $('.date').datepicker('destroy');
@@ -91,7 +89,7 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
                     ele.remove();
                 }
             });
-            this.closeEditor();
+            this.closeEditor(false);
 
             analytics.track('Saved Course Update', {
                 'course': course_location_analytics,
@@ -121,10 +119,12 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
             this.$codeMirror = CourseInfoHelper.editWithCodeMirror(
                 targetModel, 'content', self.options['base_asset_url'], $textArea.get(0));
 
-            this.$modalCover.show();
-            this.$modalCover.bind('click', function() {
-                self.closeEditor(false);
-            });
+            // Variable stored for unit test.
+            this.$modalCover = ModalUtils.showModalCover(false,
+                function() {
+                    self.closeEditor(false)
+                }
+            );
         },
 
         onDelete: function(event) {
@@ -198,8 +198,7 @@ define(["backbone", "underscore", "codemirror", "js/models/course_update",
                 this.$currentPost.find('.CodeMirror').remove();
             }
 
-            this.$modalCover.unbind('click');
-            this.$modalCover.hide();
+            ModalUtils.hideModalCover(this.$modalCover);
             this.$codeMirror = null;
         },
 

cms/templates/asset_index.html

@@ -18,29 +18,25 @@
 <script type="text/javascript">
 require(["domReady", "jquery", "gettext", "js/models/asset", "js/collections/asset",
          "js/views/assets", "js/views/feedback_prompt",
-         "js/views/feedback_notification", "jquery.fileupload"],
-        function(domReady, $, gettext, AssetModel, AssetCollection, AssetsView, PromptView, NotificationView) {
+         "js/views/feedback_notification", "js/utils/modal", "jquery.fileupload"],
+        function(domReady, $, gettext, AssetModel, AssetCollection, AssetsView, PromptView, NotificationView, ModalUtils) {
 
     var assets = new AssetCollection(${asset_list});
     assets.url = "${update_asset_callback_url}";
     var assetsView = new AssetsView({collection: assets, el: $('#asset_table_body')});
-    var $modal = $(".upload-modal");
-    var $modalCover = $(".modal-cover");
-
 
     var hideModal = function (e) {
         if (e) {
             e.preventDefault();
         }
         $('.file-input').unbind('change.startUpload');
-        $modal.hide();
-        $modalCover.hide();
-    }
+        ModalUtils.hideModal();
+    };
 
     var showUploadModal = function (e) {
         e.preventDefault();
         resetUploadModal();
-        $modal.show();
+        ModalUtils.showModal();
         $('.file-input').bind('change', startUpload);
         $('.upload-modal .file-chooser').fileupload({
             dataType: 'json',
@@ -63,8 +59,6 @@ require(["domReady", "jquery", "gettext", "js/models/asset", "js/collections/ass
             }
 
         });
-
-        $modalCover.show();
     };
 
     var showFileSelectionMenu = function(e) {

cms/templates/overview.html

@@ -225,7 +225,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
   </div>
   <footer></footer>
 
-  <div class="edit-subsection-publish-settings">
+  <div class="edit-subsection-publish-settings showAsModal">
     <div class="settings">
       <h3>${_("Section Release Date")}</h3>
       <div class="picker datepair">