Skip to content

E
edx-platform
Commit 52f4f6af by cahrens
Options

Pull modal cover and date utils into their own files. 

Move overview-specific functions into overview.js.
parent a16c567b
Showing with 136 additions and 58 deletions
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 0 → 100644
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 0 → 100644
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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment