100 lines
3.5 KiB
JavaScript
100 lines
3.5 KiB
JavaScript
define(["backbone", "underscore", "codemirror", "js/views/feedback_notification", "js/views/course_info_helper", "js/utils/modal"],
|
|
function(Backbone, _, CodeMirror, NotificationView, CourseInfoHelper, ModalUtils) {
|
|
|
|
// 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
|
|
events: {
|
|
"click .save-button" : "onSave",
|
|
"click .cancel-button" : "onCancel",
|
|
"click .edit-button" : "onEdit"
|
|
},
|
|
|
|
initialize: function() {
|
|
this.template = _.template($("#course_info_handouts-tpl").text());
|
|
var self = this;
|
|
this.model.fetch({
|
|
complete: function() {
|
|
self.render();
|
|
},
|
|
reset: true
|
|
});
|
|
},
|
|
|
|
render: function () {
|
|
CourseInfoHelper.changeContentToPreview(
|
|
this.model, 'data', this.options['base_asset_url']);
|
|
|
|
this.$el.html(
|
|
$(this.template({
|
|
model: this.model
|
|
}))
|
|
);
|
|
$('.handouts-content').html(this.model.get('data'));
|
|
this.$preview = this.$el.find('.handouts-content');
|
|
this.$form = this.$el.find(".edit-handouts-form");
|
|
this.$editor = this.$form.find('.handouts-content-editor');
|
|
this.$form.hide();
|
|
|
|
return this;
|
|
},
|
|
|
|
onEdit: function(event) {
|
|
var self = this;
|
|
this.$editor.val(this.$preview.html());
|
|
this.$form.show();
|
|
|
|
this.$codeMirror = CourseInfoHelper.editWithCodeMirror(
|
|
self.model, 'data', self.options['base_asset_url'], this.$editor.get(0));
|
|
|
|
ModalUtils.showModalCover(false, function() { self.closeEditor() });
|
|
},
|
|
|
|
onSave: function(event) {
|
|
$('#handout_error').removeClass('is-shown');
|
|
$('.save-button').removeClass('is-disabled');
|
|
if ($('.CodeMirror-lines').find('.cm-error').length == 0){
|
|
this.model.set('data', this.$codeMirror.getValue());
|
|
var saving = new NotificationView.Mini({
|
|
title: gettext('Saving…')
|
|
});
|
|
saving.show();
|
|
this.model.save({}, {
|
|
success: function() {
|
|
saving.hide();
|
|
}
|
|
});
|
|
this.render();
|
|
this.$form.hide();
|
|
this.closeEditor();
|
|
|
|
analytics.track('Saved Course Handouts', {
|
|
'course': course_location_analytics
|
|
});
|
|
}else{
|
|
$('#handout_error').addClass('is-shown');
|
|
$('.save-button').addClass('is-disabled');
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
|
|
onCancel: function(event) {
|
|
$('#handout_error').removeClass('is-shown');
|
|
$('.save-button').removeClass('is-disabled');
|
|
this.$form.hide();
|
|
this.closeEditor();
|
|
},
|
|
|
|
closeEditor: function() {
|
|
$('#handout_error').removeClass('is-shown');
|
|
$('.save-button').removeClass('is-disabled');
|
|
this.$form.hide();
|
|
ModalUtils.hideModalCover();
|
|
this.$form.find('.CodeMirror').remove();
|
|
this.$codeMirror = null;
|
|
}
|
|
});
|
|
|
|
return CourseInfoHandoutsView;
|
|
}); // end define()
|