Initial commit

lib/assets/javascripts/builder/components/modals/add-analysis/analysis-option-view.js

@@ -0,0 +1,91 @@
+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);
+  }
+
+});