lib/assets/javascripts/cartodb/table/infowindow.js
/**
* this infowindow is shown in the map when user clicks on a feature
*/
(function() {
var MapInfowindow = cdb.geo.ui.Infowindow.extend({
_TEXTS: {
_NO_FIELDS_SELECTED: _t("You haven’t selected any fields to be shown in the infowindow."),
_NO_FIELDS_SELECTED_BUTTON: _t("Select fields")
},
_TEMPLATE_URL: 'table/views/infowindow/templates',
events: cdb.core.View.extendEvents({
'click .edit_data': '_editData',
'click .edit_geo': '_editGeom',
'click .remove': '_removeGeom',
'click .open_infowindow_panel': '_openInfowindowPanel'
}),
initialize: function() {
var self = this;
_.bindAll(this, '_removeGeom');
this.table = this.options.table;
this.model.set({ content: 'loading...' });
// call parent
this.constructor.__super__.initialize.apply(this);
this.model.set('offset', [28, 0]);
this.model.bind('change:fields', function() {
if (!this.hasChanged('content') && self.row) {
self.renderInfo();
}
});
this.table.bind('change:schema', this.render, this);
this.add_related_model(this.table);
// Create a help dialog for the infowindows with images
if (this._containsCover) this._createHelpDialog();
// Set live tipsy when geom is enabled or disabled
this.$("div.cartodb-edit-buttons a.button").tipsy({
live:true,
fade:true,
gravity: 's',
offset: -2,
className: function(){
return $(this).closest(".cartodb-popup").hasClass('dark') ? 'dark' : ''
},
title: function(ev){
var enabled = !$(this).hasClass("disabled");
if (enabled) {
return $(this).text()
} else {
return 'Not available in this mode'
}
}
})
},
_createHelpDialog: function() {
this.helpDialog = cdb.editor.ViewFactory.createDialogByTemplate('common/dialogs/help/infowindow_with_images', {}, { clean_on_hide: false });
this.addView(this.helpDialog);
},
setFeatureInfo: function(cartodb_id) {
// Set cartodb_id
this.cartodb_id = cartodb_id;
// render to update cartodb_id
this.render();
// Get row data and show the content
if(this.row) {
this.row.unbind(null, null, this);
}
this.row = this.table.data().getRow(cartodb_id, {
no_add: true
});
this.row
.bind('change', this.renderInfo, this)
.fetch({ cache: false, no_geom: true });
// trigger renderInfo now to render the actual contents
this.renderInfo();
return this;
},
/**
* renders the infowindows adding some editing features
*/
render: function() {
var self = this;
// render original
cdb.geo.ui.Infowindow.prototype.render.call(this);
var fields = this.model.get('fields');
// Show no_fields state when there isn't any field
// and a custom template is not selected
if((!fields || (fields && !fields.length)) && (!this.model.get('template'))) {
// Add empty fields to the infowindow
this.$('.cartodb-popup').addClass("no_fields");
// Check if the infowindow has header or not
var popup_class = '.cartodb-popup-content';
if (this.$('.cartodb-popup-header').length > 0) {
popup_class = '.cartodb-popup-header';
}
this.$(popup_class).html(
'<p class="italic">' + this._TEXTS._NO_FIELDS_SELECTED + '</p>' +
'<p><a class="margin5 underline open_infowindow_panel" href="#/select-fields">' + this._TEXTS._NO_FIELDS_SELECTED_BUTTON + '</a></p>'
)
} else {
this.$('.cartodb-popup').removeClass("no_fields");
}
// render edit and remove buttons
this.$('.cartodb-popup-content-wrapper')
.append(this.getTemplate('table/views/infowindow/infowindow_footer')({ "cartodb_id": this.cartodb_id }));
if (this.table.isReadOnly()) {
this.$('.cartodb-popup-content-wrapper').find('a.remove, a.edit_data, a.edit_geo').addClass('disabled');
}
if (this._containsCover()) { // bind the help link to the helpDialog
this.$(".image_not_found a.help").off("click");
this.$(".image_not_found a.help").on("click", function() {
$('body').append(self.helpDialog.render().el);
self.helpDialog.open();
});
}
},
renderInfo: function() {
var self = this;
var row_attributes = self.row.attributes;
var fields = [];
for (var property in row_attributes) {
if (row_attributes.hasOwnProperty(property)) {
if (self.model.containsField(property) && !_.contains(self.model.SYSTEM_COLUMNS, property)) {
var h = {
title: self.model.getFieldProperty(property, 'title') ? property : null,
value: row_attributes[property],
position: self.model.getFieldPos(property)
};
fields.push(h);
}
}
}
// sort
fields = _.compact(fields);
fields.sort(function(a, b) {
return a.position - b.position;
});
// filter and add index
var render_fields = [];
for(var i = 0; i < fields.length; ++i) {
var f = fields[i];
if(f) {
//
// header template use index to detect if it's the first element
// renderer to use special style.
// Mustache only matches as false a null, undefined or false value
// so for the first element we set index as null
// yes, very hacky :(
f.index = render_fields.length ? render_fields.length: null,
render_fields.push(f);
}
}
if (fields.length > 0) {
// Set content
this.model.set({ content: { fields: render_fields } });
} else {
// Show loading due to the fact that we don't have the content yet
this.setLoading();
}
if(this.model.get('visibility')) {
// Just move the map if need it when fields are already added.
this.adjustPan();
}
},
/**
* Attempts to load the cover URL and show it
*/
_loadCover: function() {
var self = this;
if (!this._containsCover()) return;
var $cover = this.$(".cover");
var $imageNotFound = this.$(".image_not_found");
var $img = $cover.find("img");
var url = this._getCoverURL();
if (!this._isValidURL(url)) {
$imageNotFound.fadeIn(250);
$img.hide();
return;
}
// configure spinner
var
target = document.getElementById('spinner'),
opts = { lines: 9, length: 4, width: 2, radius: 4, corners: 1, rotate: 0, color: '#ccc', speed: 1, trail: 60, shadow: true, hwaccel: false, zIndex: 2e9 },
spinner = new Spinner(opts).spin(target);
// create the image
$imageNotFound.hide();
$img.hide(function() {
this.remove();
});
$img = $("<img />").attr("src", url);
$cover.append($img);
$img.load(function(){
spinner.stop();
var w = $img.width();
var h = $img.height();
var coverWidth = $cover.width();
var coverHeight = $cover.height();
var ratio = h / w;
var coverRatio = coverHeight / coverWidth;
// Resize rules
if ( w > coverWidth && h > coverHeight) { // bigger image
if ( ratio < coverRatio ) $img.css({ height: coverHeight });
else {
var calculatedHeight = h / (w / coverWidth);
$img.css({ width: coverWidth, top: "50%", position: "absolute", "margin-top": -1*parseInt(calculatedHeight, 10)/2 });
}
} else {
var calculatedHeight = h / (w / coverWidth);
$img.css({ width: coverWidth, top: "50%", position: "absolute", "margin-top": -1*parseInt(calculatedHeight, 10)/2 });
}
$img.fadeIn(300);
})
.error(function(){
spinner.stop();
$imageNotFound.fadeIn(250);
});
},
/**
* triggers an editGeom event with the geometry
* infowindow is currently showing
*/
_editGeom: function(e) {
this.killEvent(e);
if (!this.table.isReadOnly()) {
this.model.set("visibility", false);
this.trigger('editGeom', this.row);
}
},
_editData: function(e) {
this.killEvent(e);
if (!this.table.isReadOnly()) {
this.model.set("visibility", false);
this.trigger('editData', this.row);
}
},
_removeGeom: function(e) {
this.killEvent(e);
if (!this.table.isReadOnly()) {
this.model.set("visibility", false);
this.trigger('removeGeom', this.row);
}
},
_openInfowindowPanel: function(e) {
this.killEvent(e);
this.trigger('openInfowindowPanel');
},
_getModelTemplate: function() {
var template_name = cdb.admin.mod.TemplateMap[this.model.get("template_name")] || this.model.get("template_name");
return this._TEMPLATE_URL + "/" + template_name;
}
});
// export
cdb.admin.MapInfowindow = MapInfowindow;
})();