78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
|
var CoreView = require('backbone/core-view');
|
||
|
|
var template = require('./custom-carousel-item.tpl');
|
||
|
|
var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
|
||
|
|
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
className: 'Carousel-item',
|
||
|
|
tagName: 'li',
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'mouseenter': '_onMouseEnter',
|
||
|
|
'mouseleave': '_onMouseLeave',
|
||
|
|
'click': '_onClick'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
this._itemClassName = opts && opts.itemOptions ? opts.itemOptions.className : '';
|
||
|
|
this._initBinds();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
// NOTE: this function calls destroyTipsy for each tooltip, which calls:
|
||
|
|
// this.$el.unbind('mouseleave mouseenter');
|
||
|
|
// So we need to bind the events again after calling clearSubViews
|
||
|
|
this.clearSubViews();
|
||
|
|
|
||
|
|
this.$el.bind('mouseenter', this._onMouseEnter.bind(this));
|
||
|
|
this.$el.bind('mouseleave', this._onMouseLeave.bind(this));
|
||
|
|
|
||
|
|
this.$el.html(
|
||
|
|
template({
|
||
|
|
name: this.model.getName(),
|
||
|
|
className: this._itemClassName,
|
||
|
|
template: this.model.get('template')()
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
if (this.model.getValue()) {
|
||
|
|
this.$el.addClass('js-' + this.model.getValue());
|
||
|
|
}
|
||
|
|
this.$el.toggleClass('is-selected', !!this.model.get('selected'));
|
||
|
|
|
||
|
|
this._initViews();
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_initViews: function () {
|
||
|
|
if (this.model.get('tooltip')) {
|
||
|
|
var tooltip = new TipsyTooltipView({
|
||
|
|
el: this.$el,
|
||
|
|
gravity: 's',
|
||
|
|
title: function () {
|
||
|
|
return this.model.get('tooltip');
|
||
|
|
}.bind(this)
|
||
|
|
});
|
||
|
|
this.addView(tooltip);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
this.model.bind('change:selected', this.render, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onMouseEnter: function () {
|
||
|
|
this.model.set('highlighted', true);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onMouseLeave: function () {
|
||
|
|
this.model.set('highlighted', false);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onClick: function (e) {
|
||
|
|
this.killEvent(e);
|
||
|
|
this.model.set('selected', true);
|
||
|
|
}
|
||
|
|
});
|