lib/assets/javascripts/cartodb/table/header_view.js
/**
* header cell view, manages operations on table columns
*/
(function() {
var HeaderView = cdb.admin.HeaderView = cdb.core.View.extend({
_TEXTS: {
no_geo: {
title: _t('Georeference your table'),
description: _t('This funcionality is not available in the visualization view. \
Please, visit <a href="<%- prefix %>/tables/<%- table_name %>">your table</a> and start georeferencing there.'),
ok: _t('Ok, close')
}
},
NO_MENU_COLUMNS: ['the_geom', 'the_geom_webmercator'],
events: {
'dblclick .coloptions': 'renameColumn',
'click .coloptions': 'showColumnOptions',
'click .coltype': 'showColumnTypeOptions',
'click .geo': 'showGeoreferenceWindow',
'keydown .col_name_edit': '_checkEditColnameInput',
'focusout input': '_finishEdit',
'click': 'activateColumnOptions'
},
initialize: function() {
var self = this;
this.column = this.options.column;
this.table = this.options.table;
this.vis = this.options.vis;
this.template = this.getTemplate('table/views/table_header_view');
this.editing_name = false;
this.changing_type = false;
this.vis.bind('change:type', function() {
// You can't geocode being in a visualization of type derived
HeaderView && HeaderView.colTypeOptions.render();
});
this.add_related_model(this.vis);
if (HeaderView.colOptions === undefined) {
HeaderView.colOptions= new cdb.admin.HeaderDropdown({
user: this.options.user,
position: 'position',
horizontal_position: "right",
tick: "right",
template_base: "table/views/table_header_options",
sqlView: this.options.sqlView,
vis: this.vis
});
HeaderView.colOptions.render();
cdb.god.bind("closeDialogs", HeaderView.colOptions.hide, HeaderView.colOptions);
}
if (HeaderView.colTypeOptions === undefined) {
HeaderView.colTypeOptions= new cdb.admin.ColumntypeDropdown({
user: this.options.user,
position: 'position',
horizontal_position: "right",
tick: "right",
template_base: "table/views/table_column_type_options"
});
HeaderView.colTypeOptions.render();
cdb.god.bind("closeDialogs", HeaderView.colTypeOptions.hide, HeaderView.colTypeOptions);
}
},
_addColumn: function(column) {
table.tableTab.tableView.addColumn(column);
},
render: function() {
this.$el.html('');
this.$el.append(this.template({
col_name: this.column[0],
col_type: this.column[1],
editing_name: this.editing_name,
changing_type: this.changing_type,
read_only: this.table.isReadOnly(),
isReservedColumn: this.table.isReadOnly() || this.table.isReservedColumn(this.column[0]),
noMenu: (this.NO_MENU_COLUMNS.indexOf(this.column[0]) >= 0)
}));
// Focus in the input if it is being edited
// and set the correct width
if (this.editing_name) {
// In case the element is not present in DOM or not visible the width would be 0, so fallback on a reasonable
// width (e.g. happens for adding a column on an empty dataset)
var w = this.$el.find("p.auto").width() || 175;
this.$el.find("input")
.css({
"max-width": w,
"width": w
})
.focus();
}
this.delegateEvents();
return this;
},
_openColOptions: function(e) {
var self = this;
var colOptions = HeaderView.colOptions;
// Unbind events
colOptions.off();
cdb.god.unbind('closeDialogs', HeaderView.colOptions.hide, HeaderView.colOptions);
// Close other dialogs
cdb.god.trigger("closeDialogs");
// set data for column and table currently editing
colOptions.setTable(this.table, this.column[0]);
colOptions.bind('addColumn', this._addColumn, this);
colOptions.bind('renameColumn', this.renameColumn, this);
colOptions.bind('changeType', this._changeType, this);
colOptions.bind('clearView', function(){
self.trigger('clearView');
}, this);
colOptions.bind('georeference', function(column) {
self.trigger('georeference', column);
}, this);
colOptions.bind('applyFilter', function(column) {
self.trigger('applyFilter', column);
}, this);
// bind the stuff
var container = $(e.target).parent().parent();
container.append(colOptions.el);
var link_width = $(e.target).width() + 26
, th = container.parent();
// align to the right of the target with a little of margin
colOptions.openAt(link_width - colOptions.$el.width(), (th.height()/2) + 7);
// Bind again!
cdb.god.bind("closeDialogs", HeaderView.colOptions.hide, HeaderView.colOptions);
},
_openColTypeOptions: function(e) {
if(this.table.isReadOnly()) {
return;
}
var colOptions = HeaderView.colTypeOptions;
// Unbind events
colOptions.off();
cdb.god.unbind('closeDialogs', HeaderView.colTypeOptions.hide, HeaderView.colTypeOptions);
// Close other dialogs
cdb.god.trigger("closeDialogs");
// set data for column and table currently editing
colOptions.setTable(this.table, this.column[0]);
// bind the stuff
var container = $(e.target).parent().parent();
container.append(colOptions.el);
var link_width = $(e.target).outerWidth() + 24
, th = container.parent();
// align to the right of the target with a little of margin
colOptions.openAt(link_width - colOptions.$el.width(), (th.height()/2) + 25);
// Bind again
cdb.god.bind("closeDialogs", HeaderView.colTypeOptions.hide, HeaderView.colTypeOptions);
},
_checkEditColnameInput: function(e) {
if(e.keyCode === 13) {
this._submitEdit();
}
if(e.keyCode === 27) {
this._finishEdit();
}
},
_submitEdit: function() {
this.table.renameColumn(this.column[0], $('.col_name_edit').val());
this._finishEdit();
},
_finishEdit: function() {
this.editing_name = false;
this.render();
},
renameColumn: function(ev) {
if (ev) {
this.killEvent(ev)
}
this.editing_name = true;
this.changing_type = false;
this.render();
},
_changeType: function(column) {
this.editing_name = false;
this.changing_type = true;
// Simulate click
var $coltype_link = this.$el.find('a.coltype');
$coltype_link.click();
},
activateColumnOptions: function(e) {
this.killEvent(e);
this.$el.find("a.coloptions").click();
},
showColumnOptions: function(e) {
var self = this;
var colOptions = HeaderView.colOptions;
var columnName = this.column[0];
e.preventDefault();
// If submenu was openened before, let's close it.
if (colOptions.isOpen && columnName == colOptions.column) {
colOptions.hide();
return false;
}
// If submenu is from different column or it is closed.
if (this.NO_MENU_COLUMNS.indexOf(this.column[0]) < 0) {
colOptions.hide(function() {
colOptions.parent_ && colOptions.parent_.css('z-index', 0);
var parent_ = self.$el.find('th > div');
colOptions.parent_ = parent_;
parent_.css('z-index', '100');
self._openColOptions(e);
});
}
return false;
},
showGeoreferenceWindow: function(e) {
this.killEvent(e);
this.trigger('georeference', null);
},
showColumnTypeOptions: function(e) {
var self = this;
var colOptions = HeaderView.colTypeOptions;
var columnName = this.column[0];
if (e) e.preventDefault();
// If submenu was openened before, let's close it.
if (colOptions.isOpen && columnName == colOptions.column) {
colOptions.hide();
return false;
}
// If submenu is from different column or it is closed.
colOptions.hide(function() {
self._openColTypeOptions(e);
});
return false;
}
});
})();