60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
|
var _ = require('underscore');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var CarouselView = require('./custom-carousel/custom-carousel-view');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Carousel form view
|
||
|
|
*/
|
||
|
|
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
module: 'components:carousel-form-view',
|
||
|
|
|
||
|
|
className: 'js-aggregationTypes',
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
if (!opts.collection) throw new Error('Carousel collection is required');
|
||
|
|
if (!opts.template) throw new Error('template is required');
|
||
|
|
this.template = opts.template;
|
||
|
|
this._initBinds();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var selectedItem = this.collection.getSelected();
|
||
|
|
var selectedName = selectedItem && selectedItem.getName();
|
||
|
|
this.$el.html(
|
||
|
|
this.template({
|
||
|
|
name: selectedName
|
||
|
|
})
|
||
|
|
);
|
||
|
|
this._initViews();
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
this.collection.bind('change:highlighted', this._onChangeHighlighted, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
_initViews: function () {
|
||
|
|
var carousel = new CarouselView(_.extend(this.options, {
|
||
|
|
collection: this.collection
|
||
|
|
}));
|
||
|
|
|
||
|
|
if (!this.$('.js-selector').length) throw new Error('HTML element with js-selector class is required');
|
||
|
|
|
||
|
|
this.$('.js-selector').append(carousel.render().el);
|
||
|
|
carousel.initScroll();
|
||
|
|
this.addView(carousel);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onChangeHighlighted: function () {
|
||
|
|
var item = this.collection.getHighlighted() || this.collection.getSelected();
|
||
|
|
if (item) {
|
||
|
|
var $el = this.$('.js-highlight');
|
||
|
|
if ($el) {
|
||
|
|
$el.text(item.getName());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|