62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
|
var CoreView = require('backbone/core-view');
|
||
|
|
var template = require('./tabs.tpl');
|
||
|
|
var tabItemTemplate = require('./tab-item.tpl');
|
||
|
|
var checkAndBuildOpts = require('builder/helpers/required-opts');
|
||
|
|
|
||
|
|
var REQUIRED_OPTS = [
|
||
|
|
'tabs'
|
||
|
|
];
|
||
|
|
|
||
|
|
var TabsView = CoreView.extend({
|
||
|
|
module: 'embed:tabs:tabs-view',
|
||
|
|
|
||
|
|
tagName: 'nav',
|
||
|
|
|
||
|
|
className: 'CDB-Embed-tabs CDB-NavMenu js-tabs',
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'click .js-tab': '_onTabClicked'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (options) {
|
||
|
|
checkAndBuildOpts(options, REQUIRED_OPTS, this);
|
||
|
|
|
||
|
|
this.listenTo(this.model, 'change:selected', this._onSelectedTabChanged);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this.$el.empty();
|
||
|
|
|
||
|
|
this.$el.html(template());
|
||
|
|
|
||
|
|
this._tabs.map(function (tab) {
|
||
|
|
this.$('.js-tabs-container').append(tabItemTemplate({
|
||
|
|
name: tab.name,
|
||
|
|
title: tab.title || tab.name,
|
||
|
|
isSelected: tab.isSelected
|
||
|
|
}));
|
||
|
|
}.bind(this));
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_onSelectedTabChanged: function () {
|
||
|
|
var tabName = this.model.get('selected');
|
||
|
|
var tab = this.$('[data-tab="' + tabName + '"]');
|
||
|
|
|
||
|
|
tab.siblings().removeClass('is-selected');
|
||
|
|
tab.addClass('is-selected');
|
||
|
|
},
|
||
|
|
|
||
|
|
_onTabClicked: function (event) {
|
||
|
|
var tab = this.$(event.currentTarget);
|
||
|
|
var tabName = tab.data('tab');
|
||
|
|
|
||
|
|
this.model.set({
|
||
|
|
selected: tabName
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = TabsView;
|