92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
|
var _ = require('underscore');
|
||
|
|
var $ = require('jquery');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var template = require('./analysis-option.tpl');
|
||
|
|
var Analyses = require('builder/data/analyses');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* View for an individual analysis option.
|
||
|
|
*/
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
tagName: 'li',
|
||
|
|
className: 'ModalBlockList-item',
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'mouseenter': '_onMouseEnter',
|
||
|
|
'mouseleave': '_onMouseLeave',
|
||
|
|
'click': '_onClick'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
this._simpleGeometryTypeInput = opts.simpleGeometryTypeInput; // might be undefined/null, so don't check
|
||
|
|
|
||
|
|
this.listenTo(this.model, 'change:selected', this.render);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var props = this.model.pick('title', 'type_group', 'desc', 'selected', 'link');
|
||
|
|
|
||
|
|
props.enabled = this._acceptsInputGeometry();
|
||
|
|
|
||
|
|
if (!props.enabled) {
|
||
|
|
props.desc = this._disabledDesc();
|
||
|
|
}
|
||
|
|
|
||
|
|
var analysisType = this.model.get('type');
|
||
|
|
var analysisItem = Analyses.getAnalysisByType(analysisType);
|
||
|
|
var animationTemplate = analysisItem && analysisItem.animationTemplate;
|
||
|
|
var genericType = '';
|
||
|
|
|
||
|
|
if (animationTemplate) {
|
||
|
|
genericType = analysisItem.genericType || analysisType;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$el.html(template(_.extend(props, { type: genericType })));
|
||
|
|
|
||
|
|
if (animationTemplate) {
|
||
|
|
this.$('.js-animation').append(animationTemplate);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$el.toggleClass('is-selected', this.model.get('selected'));
|
||
|
|
this.$el.toggleClass('is-disabled', !props.enabled);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_onMouseEnter: function () {
|
||
|
|
if (this._acceptsInputGeometry()) {
|
||
|
|
this.$('.js-animation').addClass('has-autoplay');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_onMouseLeave: function () {
|
||
|
|
if (this._acceptsInputGeometry()) {
|
||
|
|
this.$('.js-animation').removeClass('has-autoplay');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_onClick: function (event) {
|
||
|
|
var linkClicked = event && event.target && $(event.target).hasClass('js-more');
|
||
|
|
if (!linkClicked && this._acceptsInputGeometry()) {
|
||
|
|
this.model.set('selected', true);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_disabledDesc: function (desc) {
|
||
|
|
return _t('components.modals.add-analysis.disabled-option-desc', {
|
||
|
|
simpleGeometryType: this._simpleGeometryTypeInput || _t('components.modals.add-analysis.unknown-geometry-type'),
|
||
|
|
requiredInputGeometries: this._getRequiredInputGeometries()
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_getRequiredInputGeometries: function () {
|
||
|
|
return _t('components.modals.add-analysis.geometry-types.' + this.model.getValidInputGeometries());
|
||
|
|
},
|
||
|
|
|
||
|
|
_acceptsInputGeometry: function () {
|
||
|
|
return this.model.acceptsGeometryTypeAsInput(this._simpleGeometryTypeInput);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|