124 lines
3.3 KiB
JavaScript
Executable File
124 lines
3.3 KiB
JavaScript
Executable File
var _ = require('underscore');
|
|
var Backbone = require('backbone');
|
|
var CoreView = require('backbone/core-view');
|
|
var analyses = require('builder/data/analyses');
|
|
require('builder/components/form-components/index');
|
|
var CustomListItemView = require('builder/components/form-components/editors/select/select-layer-list-item-view');
|
|
var itemListTemplate = require('builder/components/form-components/editors/select/select-layer-item.tpl');
|
|
var selectedItemTemplate = require('builder/components/form-components/editors/select/select-layer-list-item.tpl');
|
|
|
|
/**
|
|
* View for selecting the layer through which to load the column data.
|
|
*/
|
|
module.exports = CoreView.extend({
|
|
|
|
className: 'CDB-SelectorLayer',
|
|
|
|
events: {
|
|
'click': '_onClick',
|
|
'change': '_onChange'
|
|
},
|
|
|
|
initialize: function (opts) {
|
|
this._stateModel = new Backbone.Model({
|
|
highlighted: false
|
|
});
|
|
|
|
this._initBinds();
|
|
},
|
|
|
|
render: function () {
|
|
this._unbindEvents();
|
|
this._initViews();
|
|
this._bindEvents();
|
|
return this;
|
|
},
|
|
|
|
_initBinds: function () {
|
|
this.listenTo(this._stateModel, 'change:highlighted', this._toggleHover);
|
|
},
|
|
|
|
_initViews: function () {
|
|
var self = this;
|
|
var options = this._buildOptions();
|
|
|
|
this._selectView = new Backbone.Form.editors.Select({
|
|
className: 'Widget-select u-flex u-alignCenter',
|
|
key: 'name',
|
|
schema: {
|
|
options: options
|
|
},
|
|
model: self.model,
|
|
showSearch: false,
|
|
template: require('./select.tpl'),
|
|
selectedItemTemplate: selectedItemTemplate,
|
|
customListItemView: CustomListItemView,
|
|
itemListTemplate: itemListTemplate,
|
|
mouseOverAction: this._onMouseOver.bind(this),
|
|
mouseOutAction: this._onMouseOut.bind(this)
|
|
});
|
|
|
|
this._selectView.setValue(this.model.get('layer_index') || 0);
|
|
this.$el.html(this._selectView.render().el);
|
|
},
|
|
|
|
_onMouseOver: function () {
|
|
this._stateModel.set('highlighted', true);
|
|
},
|
|
|
|
_onMouseOut: function () {
|
|
this._stateModel.set('highlighted', false);
|
|
},
|
|
|
|
_toggleHover: function () {
|
|
var $widget = this.$el.closest('.js-WidgetList-item');
|
|
|
|
$widget.toggleClass('is-hover', this._stateModel.get('highlighted'));
|
|
},
|
|
|
|
_buildOptions: function () {
|
|
return _.map(this.model.get('tuples'), function (item, index) {
|
|
var layerDefModel = item.layerDefinitionModel;
|
|
var nodeDefModel = item.analysisDefinitionNodeModel;
|
|
var layerName = nodeDefModel.isSourceType()
|
|
? layerDefModel.getTableName()
|
|
: layerDefModel.getName();
|
|
|
|
return {
|
|
val: index,
|
|
layerName: layerName,
|
|
nodeTitle: analyses.short_title(nodeDefModel),
|
|
layer_id: nodeDefModel.id,
|
|
color: layerDefModel.getColor(),
|
|
isSourceType: nodeDefModel.isSourceType()
|
|
};
|
|
});
|
|
},
|
|
|
|
_bindEvents: function () {
|
|
if (this._selectView) {
|
|
this._selectView.on('change', this._onChange, this);
|
|
}
|
|
},
|
|
|
|
_unbindEvents: function () {
|
|
if (this._selectView) {
|
|
this._selectView.off('change', this._onChange, this);
|
|
}
|
|
},
|
|
|
|
_onClick: function (event) {
|
|
event.stopPropagation();
|
|
},
|
|
|
|
_onChange: function () {
|
|
this.model.set('layer_index', this._selectView.getValue());
|
|
},
|
|
|
|
clean: function () {
|
|
this._selectView.remove();
|
|
CoreView.prototype.clean.apply(this);
|
|
}
|
|
|
|
});
|