8480dbc228
* 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 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 * fix: all autofixable eslint issues * fix: all react related fixable issues * fix: autofixable eslint issues * chore: remove all template literals * fix: remaining autofixable issues * chore: apply amnesty on all existing issues * fix: failing xss-lint issues * refactor: apply amnesty on remaining issues * refactor: apply amnesty on new issues * fix: remove file level suppressions * refactor: apply amnesty on new issues
61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
// eslint-disable-next-line no-shadow-restricted-names
|
|
(function(define, undefined) {
|
|
'use strict';
|
|
|
|
define(['gettext', 'underscore',
|
|
'jquery', 'backbone', 'js/edxnotes/utils/template', 'edx-ui-toolkit/js/utils/html-utils'],
|
|
function(gettext, _, $, Backbone, templateUtils, HtmlUtils) {
|
|
var TabItemView = Backbone.View.extend({
|
|
tagName: 'li',
|
|
className: 'tab',
|
|
activeClassName: 'is-active',
|
|
|
|
events: {
|
|
click: 'selectHandler',
|
|
'click a': function(event) { event.preventDefault(); },
|
|
'click .action-close': 'closeHandler'
|
|
},
|
|
|
|
initialize: function(options) {
|
|
this.template = templateUtils.loadTemplate('tab-item');
|
|
this.$el.attr('id', this.model.get('identifier'));
|
|
this.listenTo(this.model, {
|
|
'change:is_active': function(model, value) {
|
|
this.$el.toggleClass(this.activeClassName, value);
|
|
if (value) {
|
|
this.$('.tab-label').prepend($('<span />', {
|
|
class: 'tab-aria-label sr',
|
|
text: gettext('Current tab')
|
|
}));
|
|
} else {
|
|
this.$('.tab-aria-label').remove();
|
|
}
|
|
},
|
|
destroy: this.remove
|
|
});
|
|
},
|
|
|
|
render: function() {
|
|
var html = this.template(this.model.toJSON());
|
|
this.$el.html(HtmlUtils.HTML(html).toString());
|
|
return this;
|
|
},
|
|
|
|
selectHandler: function(event) {
|
|
event.preventDefault();
|
|
if (!this.model.isActive()) {
|
|
this.model.activate();
|
|
}
|
|
},
|
|
|
|
closeHandler: function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.model.destroy();
|
|
}
|
|
});
|
|
|
|
return TabItemView;
|
|
});
|
|
}).call(this, define || RequireJS.define);
|