228180b1ef
* fix: eslint operator-linebreak issue * fix: eslint quotes issue * fix: react jsx indent and props issues * fix: eslint trailing spaces issues * fix: eslint line around directives issue * fix: eslint prefer template issue * fix: eslint semi rule * fix: eslint newline per chain rule * fix: eslint space infix ops rule * fix: eslint space-in-parens issue * fix: eslint space before function paren issue * fix: eslint space before blocks issue * fix: eslint arrow body style issue * fix: eslint dot-location issue * fix: eslint quotes issue * fix: eslint quote props issue * fix: eslint operator assignment issue * fix: eslint new line after import issue * fix: indent issues * fix: operator assignment issue
83 lines
3.3 KiB
JavaScript
83 lines
3.3 KiB
JavaScript
/**
|
|
* This is a simple component that renders add buttons for all available XBlock template types.
|
|
*/
|
|
define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/components/utils/view_utils',
|
|
'js/views/components/add_xblock_button', 'js/views/components/add_xblock_menu',
|
|
'edx-ui-toolkit/js/utils/html-utils'],
|
|
function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, HtmlUtils) {
|
|
'use strict';
|
|
|
|
var AddXBlockComponent = BaseView.extend({
|
|
events: {
|
|
'click .new-component .new-component-type .multiple-templates': 'showComponentTemplates',
|
|
'click .new-component .new-component-type .single-template': 'createNewComponent',
|
|
'click .new-component .cancel-button': 'closeNewComponent',
|
|
'click .new-component-templates .new-component-template .button-component': 'createNewComponent',
|
|
'click .new-component-templates .cancel-button': 'closeNewComponent'
|
|
},
|
|
|
|
initialize: function(options) {
|
|
BaseView.prototype.initialize.call(this, options);
|
|
this.template = this.loadTemplate('add-xblock-component');
|
|
},
|
|
|
|
render: function() {
|
|
var that;
|
|
if (!this.$el.html()) {
|
|
that = this;
|
|
this.$el.html(HtmlUtils.HTML(this.template({})).toString());
|
|
this.collection.each(
|
|
function(componentModel) {
|
|
var view, menu;
|
|
|
|
view = new AddXBlockButton({model: componentModel});
|
|
that.$el.find('.new-component-type').append(view.render().el);
|
|
|
|
menu = new AddXBlockMenu({model: componentModel});
|
|
that.$el.append(menu.render().el);
|
|
}
|
|
);
|
|
}
|
|
},
|
|
|
|
showComponentTemplates: function(event) {
|
|
var type;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
type = $(event.currentTarget).data('type');
|
|
this.$('.new-component').slideUp(250);
|
|
this.$(`.new-component-${type}`).slideDown(250);
|
|
this.$(`.new-component-${type} div`).focus();
|
|
},
|
|
|
|
closeNewComponent: function(event) {
|
|
var type;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
type = $(event.currentTarget).data('type');
|
|
this.$('.new-component').slideDown(250);
|
|
this.$('.new-component-templates').slideUp(250);
|
|
this.$(`ul.new-component-type li button[data-type=${type}]`).focus();
|
|
},
|
|
|
|
createNewComponent: function(event) {
|
|
var self = this,
|
|
$element = $(event.currentTarget),
|
|
saveData = $element.data(),
|
|
oldOffset = ViewUtils.getScrollOffset(this.$el);
|
|
event.preventDefault();
|
|
this.closeNewComponent(event);
|
|
ViewUtils.runOperationShowingMessage(
|
|
gettext('Adding'),
|
|
_.bind(this.options.createComponent, this, saveData, $element)
|
|
).always(function() {
|
|
// Restore the scroll position of the buttons so that the new
|
|
// component appears above them.
|
|
ViewUtils.setScrollOffset(self.$el, oldOffset);
|
|
});
|
|
}
|
|
});
|
|
|
|
return AddXBlockComponent;
|
|
}); // end define();
|