a63cc0b30f
Fix bok_choy test by changing course separator. Change format of the modal title to '[Subsection/Section Name] Settings'. Improve bok_choy test stability. Studio: correcting modal window size name for outline settings editor Specify full date in bok_choy tests. Refactor bok_choy tests. Remove .modal-editor from basic-modal.underscore Set classes in modal window dynamically. Studio: revising outline edit modal tip content and overall size Rename isEditable to isEditableOnCourseOutline. Interpolate display name. Use graded instead of format as flag. Studio: revising outline settings edit modal size Fix selectors in bok_choy tests.
122 lines
5.2 KiB
JavaScript
122 lines
5.2 KiB
JavaScript
define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", "jquery.form"],
|
|
function($, _, gettext, BaseModal) {
|
|
var UploadDialog = BaseModal.extend({
|
|
events: {
|
|
"change input[type=file]": "selectFile",
|
|
"click .action-upload": "upload"
|
|
},
|
|
|
|
options: $.extend({}, BaseModal.prototype.options, {
|
|
modalName: 'assetupload',
|
|
modalSize: 'med',
|
|
successMessageTimeout: 2000, // 2 seconds
|
|
viewSpecificClasses: 'confirm'
|
|
}),
|
|
|
|
initialize: function() {
|
|
BaseModal.prototype.initialize.call(this);
|
|
this.events = _.extend({}, BaseModal.prototype.events, this.events);
|
|
this.template = this.loadTemplate("upload-dialog");
|
|
this.listenTo(this.model, "change", this.renderContents);
|
|
this.options.title = this.model.get('title');
|
|
},
|
|
|
|
addActionButtons: function() {
|
|
this.addActionButton('upload', gettext("Upload"), true);
|
|
BaseModal.prototype.addActionButtons.call(this);
|
|
},
|
|
|
|
renderContents: function() {
|
|
var isValid = this.model.isValid(),
|
|
selectedFile = this.model.get('selectedFile'),
|
|
oldInput = this.$("input[type=file]").get(0);
|
|
BaseModal.prototype.renderContents.call(this);
|
|
// Ideally, we'd like to tell the browser to pre-populate the
|
|
// <input type="file"> with the selectedFile if we have one -- but
|
|
// browser security prohibits that. So instead, we'll swap out the
|
|
// new input (that has no file selected) with the old input (that
|
|
// already has the selectedFile selected). However, we only want to do
|
|
// this if the selected file is valid: if it isn't, we want to render
|
|
// a blank input to prompt the user to upload a different (valid) file.
|
|
if (selectedFile && isValid) {
|
|
$(oldInput).removeClass("error");
|
|
this.$('input[type=file]').replaceWith(oldInput);
|
|
this.$('.action-upload').removeClass('disabled');
|
|
} else {
|
|
this.$('.action-upload').addClass('disabled');
|
|
}
|
|
return this;
|
|
},
|
|
|
|
getContentHtml: function() {
|
|
return this.template({
|
|
url: this.options.url || CMS.URL.UPLOAD_ASSET,
|
|
message: this.model.escape('message'),
|
|
selectedFile: this.model.get('selectedFile'),
|
|
uploading: this.model.get('uploading'),
|
|
uploadedBytes: this.model.get('uploadedBytes'),
|
|
totalBytes: this.model.get('totalBytes'),
|
|
finished: this.model.get('finished'),
|
|
error: this.model.validationError
|
|
});
|
|
},
|
|
|
|
selectFile: function(e) {
|
|
var selectedFile = e.target.files[0] || null;
|
|
this.model.set({
|
|
selectedFile: selectedFile
|
|
});
|
|
// This change event triggering necessary for FireFox, because the browser don't
|
|
// consider change of File object (file input field) as a change in model.
|
|
if (selectedFile && $.isEmptyObject(this.model.changed)){
|
|
this.model.trigger('change');
|
|
}
|
|
},
|
|
|
|
upload: function(e) {
|
|
if (e && e.preventDefault) { e.preventDefault(); }
|
|
this.model.set('uploading', true);
|
|
this.$("form").ajaxSubmit({
|
|
success: _.bind(this.success, this),
|
|
error: _.bind(this.error, this),
|
|
uploadProgress: _.bind(this.progress, this),
|
|
data: {
|
|
// don't show the generic error notification; we're in a modal,
|
|
// and we're better off modifying it instead.
|
|
notifyOnError: false
|
|
}
|
|
});
|
|
},
|
|
|
|
progress: function(event, position, total) {
|
|
this.model.set({
|
|
"uploadedBytes": position,
|
|
"totalBytes": total
|
|
});
|
|
},
|
|
|
|
success: function(response, statusText, xhr, form) {
|
|
this.model.set({
|
|
uploading: false,
|
|
finished: true
|
|
});
|
|
if (this.options.onSuccess) {
|
|
this.options.onSuccess(response, statusText, xhr, form);
|
|
}
|
|
var that = this;
|
|
this.removalTimeout = setTimeout(function() {
|
|
that.hide();
|
|
}, this.options.successMessageTimeout);
|
|
},
|
|
|
|
error: function() {
|
|
this.model.set({
|
|
"uploading": false,
|
|
"uploadedBytes": 0,
|
|
"title": gettext("We're sorry, there was an error")
|
|
});
|
|
}
|
|
});
|
|
return UploadDialog;
|
|
}); // end define()
|