lib/assets/javascripts/cartodb/table/layer_panel_view.js
/**
* Layer panel view added in the right menu
*
* - It needs at least layer, visualization and user models.
* Globalerror to show connection or fetching errors.
*
* var layer_view = new cdb.admin.LayerPanelView({
* model: layer_model,
* vis: vis_model,
* user: user_model,
* globalError: globalError_obj
* });
*/
cdb.admin.LayerPanelView = cdb.admin.RightMenu.extend({
_TEXTS: {
error: {
default: _t('Something went wrong, try again later')
},
visible: _t('This layer is hidden, changes won\'t be shown \
until you make it visible'),
dblclick: _t('Double click will allow you to rename it')
},
MODULES: ['infowindow', 'legends'],
className: "layer_panel",
events: {
'dblclick span.name': '_editAlias',
'click .name_info a': '_goToLayer',
'click .info': '_switchTo',
'click a.visibility': '_switchVisibility',
'click a.remove': '_removeLayer',
'keyup input.alias': '_changeAlias',
'click input.alias': 'killEvent',
'click': 'setPanelStatus'
},
initialize: function() {
cdb.admin.RightMenu.prototype.initialize.call(this);
_.bindAll(this, '_editAlias');
// Set internal vars
this.table = this.model.table;
this.sqlView = new cdb.admin.SQLViewData();
this.map = this.options.vis.map;
this.globalError = this.options.globalError;
this.user = this.options.user;
this.vis = this.options.vis;
// Set status view model
this.view_model = new cdb.core.Model({ state:'idle' })
this.render();
// Set current panel view and data layer
this.activeWorkView = 'table';
this.setDataLayer(this.model);
// New added layers need to wait to get model id
this.model.bind('change:id', function(m) {
this.vis.save('active_layer_id', this.dataLayer.id);
this.$el.attr('model-id', this.model.id);
}, this);
this.model.bind('change:type', this._setLayerType, this);
// Show message when layer is not visible
this.model.bind('change:visible', this.setVisibleMsg, this);
this.model.bind('destroy', function() {
this.trigger('destroy', this.dataLayer.cid);
}, this);
// When status change binding
this.view_model.bind('change:state', this._onChangeStatus, this);
this.add_related_model(this.view_model);
// Bind when panel is closed
cdb.god.bind("panel_action", this.setPanelStatus, this);
this.add_related_model(cdb.god);
this.$el.attr('model-id', this.model.id);
this._setLayerType();
},
/* Layer events functions */
// Set active this tab
_switchTo: function(e) {
if (e) e.preventDefault();
var isActive = this.vis.get('active_layer_id') == this.dataLayer.id;
// Preventing problem with double click
// over span.name
if (isActive && $(e.target).prop("tagName").toLowerCase() == "span"
&& $(e.target).prop("className") == "name") {
// Preventing display the tooltip when user is
// double clicking! :(
var self = this;
setTimeout(function() {
if (!self._dblClick) self.$('.layer-info .info .name').tipsy("show");
delete self._dblClick;
}, 150);
return false;
}
this.trigger('switchTo', this);
this.view_model.set('state', 'idle');
this.filters._addFilters();
return false;
},
_goToLayer: function(ev) {
if (ev) {
ev.stopPropagation();
}
},
// Change view model to show table
// name alias input
_editAlias: function(e) {
e.preventDefault();
e.stopPropagation();
if (this.vis.isVisualization()) {
this._dblClick = true;
this.view_model.set('state',
this.view_model.get('state') == 'idle' ? 'editing' : 'idle'
);
} else {
this.trigger('switchTo', this);
}
return false;
},
// Change layer state when input is ready
_changeAlias: function(e) {
var value = $(e.target).val();
// If form is submitted, go out!
if (e && e.keyCode == 13) {
this.view_model.set({ state: 'idle' });
return false;
}
},
setPanelStatus: function() {
this.view_model.set('state', 'idle');
},
_onChangeStatus: function() {
var $el = this.$('.layer-info div.left');
if (this.view_model.get('state') == "idle") {
var alias = $el.find('input').val();
$el.find('input').hide();
$el.find('span.name').show();
$el.find('.name_info').show();
if (alias != this.view_model.get('table_name_alias')) {
// Set new changes in model
if (alias == "" || alias == " ") {
this.dataLayer.unset('table_name_alias')
} else {
this.dataLayer.set({ table_name_alias: alias })
}
this.dataLayer.save();
this.setLayerName(this.dataLayer);
}
} else {
$el.find('span.name').hide();
$el.find('.name_info').hide();
$el.find('input')
.val(this.dataLayer.get('table_name_alias') || this.dataLayer.get('table_name').replace(/_/g,' '))
.show()
.focus();
}
},
_setLayerType: function() {
this.$el.attr('layer-type', this.model.get('type').toLowerCase());
},
activated: function() {
// remove layer-info
this.deactivated();
this.$el.html('');
this.render();
// Set data layer
this.setDataLayer(this.model);
// Set previous active layer
this.setActivePanelView();
this.panels.bind('tabEnabled', this.saveActivePanelView, this);
},
deactivated: function() {
this.clearSubViews();
this._removeButtons();
this.view_model.set('state', 'idle');
},
// Set visibility of the map layer
_switchVisibility: function(e) {
e.preventDefault();
if (!this.vis.isVisualization()) {
cdb.log.info("You can't toggle the layer visibility in a table view");
return false;
}
// Hide infowindow if it is open
this.model.infowindow && this.model.infowindow.set('visibility', false);
this.model.save({ 'visible': !this.model.get('visible') });
},
// Remove this view and the map layer
_removeLayer: function(e) {
e.preventDefault();
// Check if the visualization is devired type and not table
if (!this.vis.isVisualization()) {
cdb.log.info("You can't remove a layer in a table view");
return false;
}
this.trigger('delete', this);
},
/* Layer info functions (order, options, name, ...) */
_setLayerInfo: function(layer) {
this.setLayerName(layer);
this.setLayerOptions(layer);
this.setLayerOrder(layer);
this.setVisibility(layer);
this.setVisibleMsg(layer);
this.setView(layer);
},
// Set view options
setView: function(layer) {
this.$el[ this.vis.isVisualization() ? 'addClass' : 'removeClass' ]('vis')
},
setVisibleMsg: function() {
var editors = ['sql_mod', 'cartocss_mod'];
// Remove message
this.$('.layer-views div.info.warning').remove()
// Add message if it is necessary
if (!this.model.get('visible')) {
var $div = $('<div>')
.addClass('info warning')
.append('<p>' + this._TEXTS.visible + '</p>');
var isEditor = _.contains(editors, this.currentPanelView);
$div[ isEditor ? 'addClass' : 'removeClass' ]('editor');
this.$('.layer-views').append($div);
}
},
// Layer name
setLayerName: function(layer) {
if (this.vis.isVisualization()) {
// table name
this.$('.layer-info .info .name')
.text(layer.get('table_name_alias') || layer.get('table_name').replace(/_/g,' '));
// table name alias
var layerUrl = layer.table && layer.table.viewUrl();
this.$('.layer-info .info .name_info')
.html('view of ')
.append($('<a>').attr('href', layerUrl).text(layer.get('table_name')));
// table synced?
if (this.table.isSync()) {
this.$('.layer-info .info .name')
.append($('<i>').addClass('synced'));
} else {
this.$('.layer-info i.synced').remove();
}
// Set tipsy bind
this._setLayerTooltip();
} else {
// Unset tipsy bind
this._unsetLayerTooltip();
this.$('.layer-info .info .name').text(layer.get('table_name'));
}
},
_setLayerTooltip: function() {
var self = this;
this.$('.layer-info .info .name').tipsy({
trigger: 'manual',
fade: true,
gravity: 's',
title: function() {
return self._TEXTS.dblclick
}
})
.bind('mouseleave', function() {
$(this).tipsy('hide');
});
},
_unsetLayerTooltip: function() {
var $name = this.$('.layer-info .info .name');
// Remove tipsy
if ($name.data('tipsy')) {
$name.unbind('mouseenter mouseleave');
$name.data('tipsy').remove();
}
},
// Layer options
setLayerOptions: function(layer) {
// Layer options buttons
if (this.vis && !this.vis.isVisualization()) {
this.$('.layer-info div.right').hide();
} else {
this.$('.layer-info div.right').show();
}
},
setVisibility: function(layer) {
this._maybeHideVisibilitySwitch();
var isVisible = layer.get('visible');
this.$(".layer-info div.right a.switch")
.toggleClass('enabled', !!isVisible)
.toggleClass('disabled', !isVisible);
},
_maybeHideVisibilitySwitch: function() {
var sw = this.$(".layer-info div.right a.switch");
var close = this.$(".layer-info div.right a.remove");
var dataLayers = this.vis.map.layers.getDataLayers();
if (dataLayers.length === 1) {
sw.hide();
close.hide();
} else {
sw.css('display', 'inline-block');
close.css('display', 'inline-block');
}
},
// Layer order
setLayerOrder: function(layer) {
var order = '1';
if(this.vis.isVisualization()) {
order = layer.collection.indexOf(layer);
}
this.$('.layer-info .info .order').text(order);
},
/* Set data of the layer (bindings, errors, modules, ...) */
setDataLayer: function(dataLayer) {
var self = this;
this.add_related_model(dataLayer);
var enabledModulesInit = self.MODULES;
if (!self.dataLayer) {
self.dataLayer = dataLayer;
this._initDataLayer(dataLayer);
}
// Set layer info
this._setLayerInfo(dataLayer);
/* SQL */
var sql = new cdb.admin.mod.SQL({
model: self.dataLayer,
user: self.user,
className: "sql_panel editor"
});
/* Filters */
this.filters = new cdb.admin.mod.Filters({
table: self.table,
sqlView: self.sqlView,
dataLayer: self.dataLayer
});
// load the scroll when the panel is open
cdb.god.bind("end_narrow", function() {
self.filters.loadScroll()
}, this);
/* Wizards */
var activeWizards = {
polygon: "SimpleWizard",
cluster: "ClusterWizard",
intensity: "IntensityWizard",
bubble: "BubbleWizard",
choropleth: "ChoroplethWizard",
color: "CategoryWizard",
category: "CategoryWizard",
density: "DensityWizard",
torque: "TorqueWizard",
torque_cat: "TorqueCategoryWizard",
torque_heat: "TorqueHeatWizard"
};
var wizards = new cdb.admin.mod.CartoCSSWizard({
user: this.user,
model: this.dataLayer,
table: this.table,
map: this.map,
className: "wizards_panel",
wizards: activeWizards
}).bind('modules', function(enabledModules) {
enabledModulesInit = enabledModules;
this.enableModules(enabledModules);
}, this).bind('activeWizard', function(type) {
// Close infowindow if it exists.
this.dataLayer.infowindow && this.dataLayer.infowindow.set('visibility', false);
}, this);
/* Infowindow */
var infowindow = this.infowindow = new cdb.admin.mod.InfoWindow({
table: this.table,
user: this.user,
dataLayer: dataLayer
});
infowindow.bind('tabChanged', this._onModuleTabChanged, this);
/* CartoCSS editor */
var editorPanel = new cdb.admin.mod.CartoCSSEditor({
model: this.dataLayer,
table: this.table,
user: this.user,
className: "csseditor_panel editor"
}).bind('hasErrors', function() {
self.addClassToButton('cartocss_mod', 'has_errors');
}).bind('clearError', function() {
self.removeClassFromButton('cartocss_mod', 'has_errors');
});
/* Legends */
var legends = new cdb.admin.mod.LegendEditor({
model: dataLayer.legend,
dataLayer: dataLayer,
className: "legends_panel",
availableLegends: [
{ name: "none", enabled: true },
{ name: "custom", enabled: true },
{ name: "color", enabled: false },
{ name: "category", enabled: false },
{ name: "bubble", enabled: false },
{ name: "choropleth", enabled: false },
{ name: "intensity", enabled: false },
{ name: "density", enabled: false },
{ name: "torque_cat", enabled: false }
],
}).bind('modules', function(enabledModules) {
enabledModulesInit = enabledModules;
self.enableModules(enabledModules);
}).bind('tabChanged', this._onModuleTabChanged, this);
if (!this.user.featureEnabled('disabled_ui_sql')) {
self.addModule(sql.render(), ['table', 'tableLite', 'map', 'mapLite']);
}
self.addModule(wizards.render(), ['map', 'mapLite']);
self.addModule(infowindow.render(), ['map', 'mapLite']);
if (!this.user.featureEnabled('disabled_ui_cartocss')) {
self.addModule(editorPanel.render(), ['map', 'mapLite']);
}
self.addModule(legends.render(), ['map', 'mapLite']);
self.addModule(this.filters.render(), ['table', 'tableLite', 'map', 'mapLite']);
/* Lateral menu modules */
var mergeTables = self.addToolButton("merge_datasets", 'table');
var addRow = self.addToolButton('add_row', 'table');
var addColumn = self.addToolButton('add_column', 'table');
var addGeom = self.addToolButton('add_feature', 'map');
addRow.bind('click', this._addRow, this);
addColumn.bind('click', this.trigger.bind(this, 'addColumn', this));
mergeTables.bind('click', this._mergeTables, this);
addGeom.bind('click', this._addFeature, this);
this.enableModules(enabledModulesInit);
this._bindDataLayer();
},
// set initial parameters to the layer
_initDataLayer: function(layer) {
layer.bind('change:table_name', this.setLayerName, this);
layer.bind('change:order', this.setLayerOrder, this);
layer.bind('change:visible', this.setVisibility, this);
layer.collection.bind('add remove', this._maybeHideVisibilitySwitch, this);
this.add_related_model(layer.collection);
layer.set({
stat_tag: this.vis.get('id'),
user_name: this.user.get("username"),
maps_api_template: cdb.config.get('maps_api_template'),
cartodb_logo: false,
no_cdn: false,
force_cors: true // use CORS to control error management in a better way
});
// set api key
var e = layer.get('extra_params') || {};
e.api_key = e.map_key = this.user.get('api_key');
layer.set('extra_params', e);
layer.invalidate();
},
// bind related ui changed to datalayer
_bindDataLayer: function() {
var self = this;
this.dataLayer.bindSQLView(this.sqlView);
this.dataLayer
.bind('parseError', function() {
if(self.activeWorkView === 'map') {
self.globalError.showError('There is a problem with the map tiles. Please, check your CartoCSS style.', 'error', 0, 'tiles');
}
}, this)
.bind('sqlNoMercator', function() {
if(self.activeWorkView === 'map') {
// don't show this error, the warning is shown in the sql bar
//self.globalError.showError(_t('the_geom_webmercator column should be selected'), 'warn', 0, 'tiles');
}
}, this)
.bind('error', function(model, resp) {
var aborted = resp && resp.statusText === 'abort';
if(self.activeWorkView === 'map' && !aborted) {
self.globalError.showError('There is a problem with your connection', 'error', 0, 'tiles');
}
}, this)
.bind('tileOk', function() {
self.globalError.hide('tiles');
}, this);
this.table.bind('columnRename columnDelete columnAdded geolocated', function() {
self.dataLayer.invalidate();
}, this);
this.table.bind('change:geometry_types', function() {
if(this.table.get('geometry_types').length) {
this._enableGeometryRelatedWizards();
} else {
this._disableGeometryRelatedWizards();
}
}, this);
// Need to check buttons when permission changes
this.table.bind('change:permission', this._checkButtons, this);
this.table.bind('change:readOnly', this._checkButtons, this);
this.table.bind('change:synchronization', this._checkButtons, this);
this.table.bind('change:isSync', this._checkButtons, this);
this.vis.bind('change:type', function() {
this.setLayerOptions()
this.setLayerName(this.model)
}, this);
this.model.bind('applySQLView errorSQLView clearSQLView', this._checkButtons, this);
// this.model.bind('clearSQLView', this._onResetSQL, this);
// this.model.bind('applySQLView', this._onApplySQL, this);
// this.model.bind('errorSQLView', this._onErrorSQL, this);
this.model.unbind('applyFilter', this._applyFilter, this);
this.model.bind('applyFilter', this._applyFilter, this);
// Add related models to be cleaned when view is destroyed
this.add_related_model(this.vis);
this.add_related_model(this.table);
this._checkButtons();
},
enableModules: function(enabledModules) {
var self = this;
_(self.MODULES).each(function(m) {
if (m === "infowindow" && !self.model.wizard_properties.supportsInteractivity()) {
self.disableModule("infowindow_mod");
} else {
if (_.contains(enabledModules, m)) {
self.enableModule(m + "_mod");
} else {
self.disableModule(m + "_mod");
}
}
});
},
SQL_WIZARDS: ['cartocss_mod', 'wizards_mod', 'infowindow_mod', 'legends_mod'],
_disableGeometryRelatedWizards: function() {
var self = this;
_(this.SQL_WIZARDS).each(function(m) {
self.disableModule(m);
});
},
_enableGeometryRelatedWizards: function() {
var self = this;
_(this.SQL_WIZARDS).each(function(m) {
if (m == 'infowindow_mod' && !self.model.wizard_properties.supportsInteractivity()) {
self.disableModule(m);
} else {
self.enableModule(m);
}
});
},
_addRow: function() {
this.table.data().addRow({ at: 0});
this.trigger('createRow');
cdb.god.trigger("closeDialogs");
},
_mergeTables: function() {
var user = this.user;
var view = new cdb.editor.MergeDatasetsView({
table: this.table,
user: user
});
view.appendToBody();
cdb.god.trigger("closeDialogs");
},
_addFeature: function(mod) {
if (this.map.get('provider') === 'leaflet') {
this.map.clamp();
}
if (this.table.isGeoreferenced()) {
this._addGeometry();
} else {
this._showScratchDialog();
}
},
_showScratchDialog: function() {
var view = new cdb.editor.ScratchView({
clean_on_hide: true,
enter_to_confirm: true,
table: this.table,
skipDisabled: true
});
view.bind("newGeometry", this._addGeometry, this);
view.appendToBody();
},
_addGeometry: function(type) {
// row is saved by geometry editor if it is needed
type = type || this.table.geomColumnTypes()[0];
this.dataLayer.trigger("startEdition", type);
},
/* Module functions */
// When a tab is activated within a sub-module.
// It could be the indowindow view, filters view, etc.
_onModuleTabChanged: function(action) {
this.trigger('tabChanged', action);
},
// check buttons if they should be enabled or not
_checkButtons: function() {
var self = this;
var gt = this.table.get('geometry_types');
// Changes over the SQL button
var sql_button_changes = {
applied: 'remove',
has_errors: 'remove'
};
// *Table with read permissions* //
if (this.table.isReadOnly()) {
// Data layer has a query applied?
if (this.table.isInSQLView()) {
if(this.model.getCurrentState() === 'error') {
sql_button_changes = {
applied: 'add',
has_errors: 'add'
}
} else {
sql_button_changes.applied = 'add';
}
}
// Check if there is any geometry
if (gt && gt.length === 0) {
this._disableGeometryRelatedWizards();
} else {
this._enableGeometryRelatedWizards();
}
this._readOnlyTableButtons();
} else {
// *Table with write permissions* //
// Check if there is any geometry
if(gt && gt.length === 0) {
this._disableGeometryRelatedWizards();
} else {
this._enableGeometryRelatedWizards();
}
// Enable writable buttons
this._writableTableButtons();
}
// Set title changes (as in name, sync info,...)
this.setLayerName(this.dataLayer);
// Set sql button changes
_.each(sql_button_changes, function(value, key) {
self[ value === "remove" ? 'removeClassFromButton' : 'addClassToButton' ]('sql_mod', key);
});
},
_removeButtons: function() {
this.buttons = [];
this.panels.unbind('tabEnabled', this.saveActivePanelView, this);
this.panels.clean();
this.tabs.clean();
},
// Enable the correct buttons depending on
// if the layer is in query mode or not
setActiveWorkView: function(workView) {
this.activeWorkView = workView;
this._checkButtons();
this.setActivePanelView(true);
},
saveActivePanelView: function(name) {
this.currentPanelView = name;
this.setVisibleMsg();
},
setActivePanelView: function(work_view) {
if (work_view || !this.currentPanelView) {
if (this.activeWorkView === 'map') {
var gt = this.table.get('geometry_types');
if(this.model.getCurrentState() !== 'error' && (gt && gt.length > 0)) {
this.active('wizards_mod');
}
} else {
this.active('sql_mod');
}
} else {
this.active(this.currentPanelView);
}
},
_readOnlyTableButtons: function() {
if(this.activeWorkView === 'map') {
this.showTools('mapLite', true);
} else {
this.showTools('tableLite', true);
}
},
_writableTableButtons: function() {
if(this.activeWorkView === 'map') {
this.showTools('map', true);
} else {
this.showTools('table', true);
}
},
_applyFilter: function(column_name) {
var col = { column: column_name };
var exists = this.filters.filters.find(function(a) {
return a.get("column") == col.column
});
if (!exists) this.filters.filters.add(col);
},
/* View visibility functions */
hide: function() {
this.$('.layer-sidebar').hide();
this.$('.layer-views').hide();
},
show: function() {
this.$('.layer-sidebar').show();
this.$('.layer-views').show();
},
showModule: function(modName, modTab) {
// Set tab in the module
if (modTab && this[modName]) this[modName].setActiveTab(modTab);
// Show module
this.trigger('show', modName + "_mod", this);
},
clean: function() {
this._unsetLayerTooltip();
this._removeButtons();
this.elder('clean');
}
});