795 lines
20 KiB
JavaScript
795 lines
20 KiB
JavaScript
|
//
|
||
|
|
// manages overlays on the map
|
||
|
|
//
|
||
|
|
|
||
|
|
cdb.admin.MapOverlays = cdb.core.View.extend({
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
this.overlayViews = [];
|
||
|
|
this.horizontal_overlays = ["share", "layer_selector", "search"];
|
||
|
|
this.vertical_overlays = ["zoom", "fullscreen", "loader"];
|
||
|
|
|
||
|
|
this.vis = this.options.vis;
|
||
|
|
this.master_vis = this.options.master_vis;
|
||
|
|
|
||
|
|
this.canvas = this.options.canvas;
|
||
|
|
this.mapView = this.options.mapView;
|
||
|
|
this.map = this.mapView.map;
|
||
|
|
this.mapToolbar = this.options.mapToolbar;
|
||
|
|
|
||
|
|
this.headerMessageIsVisible = this.options.headerMessageIsVisible;
|
||
|
|
|
||
|
|
this._bindOverlays();
|
||
|
|
},
|
||
|
|
|
||
|
|
setHeaderMessageIsVisible: function(visible) {
|
||
|
|
this.headerMessageIsVisible = visible;
|
||
|
|
this._positionOverlaysVertically();
|
||
|
|
},
|
||
|
|
|
||
|
|
_cleanOverlays: function() {
|
||
|
|
if (this.overlays) {
|
||
|
|
_.each(this.overlayViews, function(overlay) {
|
||
|
|
overlay.clean();
|
||
|
|
});
|
||
|
|
this.overlayViews = [];
|
||
|
|
this.zoom = null;
|
||
|
|
this.loader = null;
|
||
|
|
this.fullscreen = null;
|
||
|
|
this.search = null;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getOverlay: function(type) {
|
||
|
|
if (!this.overlays) return;
|
||
|
|
return this.overlays.filter(function(m) { return m.get("type") == type })[0];
|
||
|
|
},
|
||
|
|
|
||
|
|
getHeaderOverlay: function() {
|
||
|
|
return this.getOverlay("header");
|
||
|
|
},
|
||
|
|
|
||
|
|
_hideOverlays: function(mode) {
|
||
|
|
if (!this.overlays) return;
|
||
|
|
|
||
|
|
var hideOverlays = ["search"];
|
||
|
|
|
||
|
|
this.overlays.each(function(overlay) {
|
||
|
|
var device = overlay.get("device");
|
||
|
|
if (device === mode) overlay.set("display", false);
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_showOverlays: function(mode) {
|
||
|
|
|
||
|
|
this.overlays.each(function(overlay) {
|
||
|
|
var device = overlay.get("device");
|
||
|
|
if (device === mode) overlay.set("display", true);
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindOverlays: function() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this.overlays = this.vis.overlays;
|
||
|
|
this.add_related_model(this.vis.overlays);
|
||
|
|
|
||
|
|
this.overlays.unbind("reset", this._onResetOverlays);
|
||
|
|
this.overlays.unbind("remove");
|
||
|
|
this.overlays.unbind("add");
|
||
|
|
|
||
|
|
this.overlays.bind("reset", this._onResetOverlays, this);
|
||
|
|
|
||
|
|
this.overlays.bind("remove", function(overlay) {
|
||
|
|
overlay.destroy();
|
||
|
|
});
|
||
|
|
|
||
|
|
this.overlays.bind("add", function(overlay) {
|
||
|
|
self._renderOverlay(false, overlay);
|
||
|
|
self._reloadDraggable();
|
||
|
|
});
|
||
|
|
|
||
|
|
this._onResetOverlays(this.overlays);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_onResetOverlays: function(overlays) {
|
||
|
|
this._cleanOverlays();
|
||
|
|
if (overlays.models.length > 0) {
|
||
|
|
overlays.each(this._setupOverlay, this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_setupOverlay: function(overlay) {
|
||
|
|
this._renderOverlay(false, overlay);
|
||
|
|
},
|
||
|
|
|
||
|
|
_renderOverlay: function(delayed_animation, model) {
|
||
|
|
// FIXME - delayed_animation never used ???
|
||
|
|
|
||
|
|
var type = this._getOverlayType(model);
|
||
|
|
var device = model.get("device");
|
||
|
|
|
||
|
|
var vis_overlays = ["Header", "Fullscreen", "Share", "LayerSelector"];
|
||
|
|
if (_.contains(vis_overlays, type) && this.vis.get("type") === "table") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var display = (device && device != this.canvas.get("mode")) ? false : true;
|
||
|
|
model.set("display", display);
|
||
|
|
|
||
|
|
var overlay = this._configureOverlay(model);
|
||
|
|
if (!overlay) return;
|
||
|
|
|
||
|
|
this.overlayViews.push(overlay);
|
||
|
|
this.mapView.$el.append(overlay.render().$el);
|
||
|
|
this._bindOverlay(overlay);
|
||
|
|
|
||
|
|
if (type === "Text" || type === "Image") {
|
||
|
|
this._toggleOverlay(overlay);
|
||
|
|
} else if (type === "Annotation") {
|
||
|
|
this._reloadDraggable();
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
//TODO: move to overlay list
|
||
|
|
_configureOverlay: function(model) {
|
||
|
|
|
||
|
|
var type = this._getOverlayType(model);
|
||
|
|
var overlay;
|
||
|
|
|
||
|
|
switch(type) {
|
||
|
|
|
||
|
|
case 'Loader': overlay = this._setupLoaderOverlay(type, model); break;
|
||
|
|
case 'Zoom': overlay = this._setupZoomOverlay(type, model); break;
|
||
|
|
case 'Share': overlay = this._setupShareOverlay(type, model); break;
|
||
|
|
case 'Header': overlay = this._setupHeaderOverlay(type, model); break;
|
||
|
|
case 'Search': overlay = this._setupSearchOverlay(type, model); break;
|
||
|
|
case 'Logo': overlay = this._setupCartoDBLogo(type, model); break;
|
||
|
|
case 'LayerSelector': overlay = this._setupLayerSelectorOverlay(type, model); break;
|
||
|
|
case 'Fullscreen': overlay = this._setupFullScreenOverlay(type, model); break;
|
||
|
|
|
||
|
|
// Default
|
||
|
|
case 'Text': overlay = new cdb.admin.overlays[type]({ model: model }); break;
|
||
|
|
case 'Image': overlay = new cdb.admin.overlays[type]({ model: model }); break;
|
||
|
|
case 'Annotation': overlay = new cdb.admin.overlays[type]({
|
||
|
|
vis: this.vis,
|
||
|
|
canvas: this.canvas,
|
||
|
|
model: model,
|
||
|
|
mapView: this.mapView
|
||
|
|
}); break;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_getOverlayType: function(data) {
|
||
|
|
|
||
|
|
var type = data.get("type");
|
||
|
|
|
||
|
|
if (!type) type = "text";
|
||
|
|
|
||
|
|
return _.map(type.split("_"), function(word) {
|
||
|
|
return word.slice(0, 1).toUpperCase() + word.slice(1);
|
||
|
|
}).join("");
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionOverlaysHorizontally: function() {
|
||
|
|
|
||
|
|
_.each(this.horizontal_overlays, function(type) {
|
||
|
|
var overlay_model = this.getOverlay(type);
|
||
|
|
if (overlay_model) this._positionOverlay(overlay_model)
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionOverlaysVertically: function(move_header) {
|
||
|
|
|
||
|
|
if (!this.overlays) return;
|
||
|
|
|
||
|
|
if (move_header) {
|
||
|
|
|
||
|
|
var header = this.getHeaderOverlay();
|
||
|
|
this._positionOverlay(header);
|
||
|
|
}
|
||
|
|
|
||
|
|
_.each(this.horizontal_overlays, function(type) {
|
||
|
|
|
||
|
|
var overlay_model = this.getOverlay(type);
|
||
|
|
if (overlay_model) this._positionOverlay(overlay_model)
|
||
|
|
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
_.each(this.vertical_overlays, function(type) {
|
||
|
|
|
||
|
|
var overlay_model = this.getOverlay(type);
|
||
|
|
if (overlay_model) this._positionOverlay(overlay_model);
|
||
|
|
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_duplicate: function(model) {
|
||
|
|
|
||
|
|
var m = model.cloneAttributes();
|
||
|
|
var extra = m.extra;
|
||
|
|
|
||
|
|
var canvas_mode = this.options.canvas.get("mode");
|
||
|
|
var indexes = this.overlays.getOverlaysZIndex(canvas_mode);
|
||
|
|
var zIndex = _.max(indexes);
|
||
|
|
|
||
|
|
var style = m.style;
|
||
|
|
|
||
|
|
style['z-index'] = zIndex + 1;
|
||
|
|
|
||
|
|
if (model.get('type') === 'annotation') {
|
||
|
|
var latlng = this._getRandomCenter(model.get('extra').latlng);
|
||
|
|
extra.latlng = [latlng.lat, latlng.lng];
|
||
|
|
} else {
|
||
|
|
var point = this._getRandomPoint(model.get('x'), model.get('y'));
|
||
|
|
m.x = point.x;
|
||
|
|
m.y = point.y;
|
||
|
|
}
|
||
|
|
|
||
|
|
var overlay = new cdb.admin.models.Overlay(_.extend(m, { id: null, style: style, extra: extra }));
|
||
|
|
this.overlays.add(overlay);
|
||
|
|
overlay.save();
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
paste: function() {
|
||
|
|
|
||
|
|
if (!this._copiedOverlay || this._editing) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var model = this._copiedOverlay;
|
||
|
|
|
||
|
|
this._duplicate(model);
|
||
|
|
},
|
||
|
|
|
||
|
|
_getRandomPoint: function(x, y) {
|
||
|
|
return { x: x + 50 + Math.round(Math.random() * 50), y: y + 50 + Math.round(Math.random() * 50) };
|
||
|
|
},
|
||
|
|
|
||
|
|
_getRandomCenter: function(latlng) {
|
||
|
|
var center = this.mapView.latLonToPixel(latlng);
|
||
|
|
var xR = center.x + 50 + Math.round(Math.random() * 50);
|
||
|
|
var yR = center.y + 50 + Math.round(Math.random() * 50);
|
||
|
|
|
||
|
|
return this.mapView.pixelToLatLon([xR, yR]);
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindOverlay: function(overlay) {
|
||
|
|
|
||
|
|
if (overlay.model && overlay.model.get("type") === "header") {
|
||
|
|
this._positionOverlaysVertically();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (overlay.model && overlay.model.get("type") === 'search') {
|
||
|
|
this._positionSearchOverlay(overlay.model);
|
||
|
|
}
|
||
|
|
|
||
|
|
overlay.bind("editing", function(editing) {
|
||
|
|
this._editing = editing;
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
overlay.bind("duplicate", function(model) {
|
||
|
|
this.editing = true;
|
||
|
|
this._copiedOverlay = model;
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
overlay.bind("remove", function(overlay) {
|
||
|
|
this.overlays.remove(overlay.model);
|
||
|
|
this._removeOverlayPropertiesBar(true);
|
||
|
|
}, this);
|
||
|
|
|
||
|
|
overlay.bind("clickEdit", function(model, form_data) {
|
||
|
|
this._addOverlayPropertiesBar(model, form_data);
|
||
|
|
}, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
_hideToobarOptions: function(model) {
|
||
|
|
if (this.overlayPropertiesBar) {
|
||
|
|
if (this.overlayPropertiesBar.compareModel(model)) { // if the model is the same as the current one, hide the options bar
|
||
|
|
this.mapToolbar.find("ul.options").animate({ top: -100 }, { duration: 200, easing: "easeInOutQuad" } );
|
||
|
|
} else { // otherwise, deselect the overlay
|
||
|
|
this.overlayPropertiesBar.deselectOverlay();
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.mapToolbar.find("ul.options").animate({ top: -100 }, { duration: 200, easing: "easeInOutQuad" });
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_removeOverlayPropertiesBar: function(show_toolbar, model) {
|
||
|
|
|
||
|
|
// Abort the removal if we are clicking in the same overlay to edit
|
||
|
|
if (model && this.overlayPropertiesBar && this.overlayPropertiesBar.compareModel(model)) return;
|
||
|
|
|
||
|
|
if (show_toolbar) this._showToolbarOptions();
|
||
|
|
|
||
|
|
// Attempt to destroy the bar
|
||
|
|
if (this.overlayPropertiesBar) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (!model) { // if there's no current model, animate the bar
|
||
|
|
this.overlayPropertiesBar.$el.animate({ top: 100 }, { duration: 150, complete: function() {
|
||
|
|
self.overlayPropertiesBar.clean();
|
||
|
|
delete self.overlayPropertiesBar;
|
||
|
|
}});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
|
||
|
|
} else { // otherwise, just remove the bar
|
||
|
|
this.overlayPropertiesBar.clean();
|
||
|
|
delete this.overlayPropertiesBar;
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_showToolbarOptions: function() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this.mapToolbar.find("ul.options").animate({ top: 0 }, { duration: 250, easing: "easeInOutQuad", complete: function() {
|
||
|
|
self.mapToolbar.removeClass("animated");
|
||
|
|
}});
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
_addOverlayPropertiesBar: function(model, form_data) {
|
||
|
|
|
||
|
|
if (this.overlaysDropdown) this.overlaysDropdown.hide();
|
||
|
|
|
||
|
|
this.mapToolbar.addClass("animated");
|
||
|
|
|
||
|
|
this._hideToobarOptions(model);
|
||
|
|
|
||
|
|
var animatedRemoval = this._removeOverlayPropertiesBar(false, model);
|
||
|
|
|
||
|
|
if (!this.overlayPropertiesBar) {
|
||
|
|
|
||
|
|
this.overlayPropertiesBar = new cdb.admin.OverlayPropertiesBar({
|
||
|
|
model: model,
|
||
|
|
mapView: this.mapView,
|
||
|
|
overlays: this.overlays,
|
||
|
|
canvas: this.canvas,
|
||
|
|
vis: this.vis,
|
||
|
|
form_data: form_data
|
||
|
|
});
|
||
|
|
|
||
|
|
this.addView(this.overlayPropertiesBar);
|
||
|
|
this.overlayPropertiesBar.bind("remove", this._removeOverlayPropertiesBar, this);
|
||
|
|
this.overlayPropertiesBar.bind("copy-overlay", this._duplicate, this);
|
||
|
|
|
||
|
|
this.mapToolbar.append(this.overlayPropertiesBar.render().el);
|
||
|
|
|
||
|
|
if (!animatedRemoval) {
|
||
|
|
this.overlayPropertiesBar.$el.animate({ top: 0 }, { duration: 200, easing: "easeInOutQuad" });
|
||
|
|
} else {
|
||
|
|
this.overlayPropertiesBar.$el.css({ top: 0 });
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
/* Show or hide an overlay */
|
||
|
|
_toggleOverlay: function(overlay, delayed_animation) {
|
||
|
|
|
||
|
|
this._reloadDraggable();
|
||
|
|
|
||
|
|
if (delayed_animation) { // Random animation
|
||
|
|
|
||
|
|
var randomTime = 100 + Math.random() * 900;
|
||
|
|
|
||
|
|
setTimeout(function() {
|
||
|
|
if (overlay.model.get("display")) overlay.show();
|
||
|
|
}, randomTime);
|
||
|
|
|
||
|
|
} else { // Show the overlay right away
|
||
|
|
if (overlay.model.get("display")) overlay.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_reloadDraggable: function() {
|
||
|
|
|
||
|
|
$(".overlay").draggableOverlay({
|
||
|
|
container: $(".cartodb-map"),
|
||
|
|
stickiness: 10
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
// SHARE
|
||
|
|
|
||
|
|
_setupShareOverlay: function(type, data) {
|
||
|
|
|
||
|
|
var overlay = this.share = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
map: this.map
|
||
|
|
});
|
||
|
|
|
||
|
|
overlay.show();
|
||
|
|
|
||
|
|
this._bindShareOverlay(overlay);
|
||
|
|
return overlay;
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindShareOverlay: function(overlay) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this._positionShareOverlay(overlay.model);
|
||
|
|
this._positionOverlaysHorizontally();
|
||
|
|
|
||
|
|
var onDestroy = function() {
|
||
|
|
|
||
|
|
if (self.share) {
|
||
|
|
self.share.clean();
|
||
|
|
delete self.share;
|
||
|
|
}
|
||
|
|
|
||
|
|
self._positionOverlaysHorizontally();
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
overlay.model.bind("destroy", onDestroy, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
// LOADER
|
||
|
|
|
||
|
|
_setupLoaderOverlay: function(type, data) {
|
||
|
|
|
||
|
|
if (this.loader) return;
|
||
|
|
|
||
|
|
var overlay = this.loader = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
map: this.vis.map
|
||
|
|
});
|
||
|
|
|
||
|
|
this._bindLoaderOverlay(overlay);
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindLoaderOverlay: function(overlay) {
|
||
|
|
this._positionLoaderOverlay(overlay.model);
|
||
|
|
},
|
||
|
|
|
||
|
|
// FULLSCREEN
|
||
|
|
|
||
|
|
_setupFullScreenOverlay: function(type, data) {
|
||
|
|
|
||
|
|
if (this.fullscreen) return;
|
||
|
|
|
||
|
|
var overlay = this.fullscreen = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
mapView: this.mapView
|
||
|
|
});
|
||
|
|
|
||
|
|
this._bindFullScreenOverlay(overlay);
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindFullScreenOverlay: function(overlay) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this._positionOverlay(overlay.model);
|
||
|
|
|
||
|
|
var onDestroy = function() {
|
||
|
|
if (self.fullscreen) {
|
||
|
|
self.fullscreen.clean();
|
||
|
|
delete self.fullscreen;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
overlay.show();
|
||
|
|
|
||
|
|
overlay.model.bind("destroy", onDestroy, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_setupLayerSelectorOverlay: function(type, data) {
|
||
|
|
|
||
|
|
if (this.layer_selector) return;
|
||
|
|
|
||
|
|
var overlay = this.layer_selector = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
mapView: this.mapView,
|
||
|
|
template: this.getTemplate("table/views/layer_selector"),
|
||
|
|
dropdown_template: this.getTemplate("table/views/layer_dropdown")
|
||
|
|
});
|
||
|
|
|
||
|
|
overlay.show();
|
||
|
|
|
||
|
|
this._bindLayerSelectorOverlay(overlay);
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindLayerSelectorOverlay: function(overlay) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this._positionOverlay(overlay.model);
|
||
|
|
|
||
|
|
var onDestroy = function() {
|
||
|
|
if (self.layer_selector) {
|
||
|
|
self.layer_selector.clean();
|
||
|
|
delete self.layer_selector;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
overlay.model.bind("destroy", onDestroy, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
// ZOOM
|
||
|
|
|
||
|
|
_setupZoomOverlay: function(type, data) {
|
||
|
|
|
||
|
|
if (this.zoom) return;
|
||
|
|
|
||
|
|
var overlay = this.zoom = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
map: this.vis.map
|
||
|
|
});
|
||
|
|
|
||
|
|
overlay.show();
|
||
|
|
|
||
|
|
this._bindZoomOverlay(overlay);
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindZoomOverlay: function(overlay) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
var n = this.vertical_overlays.indexOf(overlay.model.get("type"));
|
||
|
|
|
||
|
|
for (var i = n ; i< this.vertical_overlays.length; i++) {
|
||
|
|
|
||
|
|
var type = this.vertical_overlays[i];
|
||
|
|
|
||
|
|
var overlay_model = this.getOverlay(type);
|
||
|
|
|
||
|
|
if (overlay_model) this._positionOverlay(overlay_model)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var onDestroy = function() {
|
||
|
|
|
||
|
|
if (self.zoom) {
|
||
|
|
self.zoom.clean();
|
||
|
|
delete self.zoom;
|
||
|
|
}
|
||
|
|
|
||
|
|
var n = this.vertical_overlays.indexOf(overlay.model.get("type"));
|
||
|
|
|
||
|
|
for (var i = n + 1; i< this.vertical_overlays.length; i++) {
|
||
|
|
|
||
|
|
var type = this.vertical_overlays[i];
|
||
|
|
|
||
|
|
var overlay_model = this.getOverlay(type);
|
||
|
|
if (overlay_model) this._positionOverlay(overlay_model)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
overlay.model.bind("destroy", onDestroy, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_setupCartoDBLogo: function(type, data) {
|
||
|
|
|
||
|
|
var overlay = this.cartodb_logo = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
map: this.map
|
||
|
|
});
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_setupSearchOverlay: function(type, data) {
|
||
|
|
|
||
|
|
if (this.search) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var overlay = this.search = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
relative_position: this.vis.get("type") === "table",
|
||
|
|
mapView: this.options.mapView,
|
||
|
|
map: this.map,
|
||
|
|
vis: this.vis,
|
||
|
|
canvas: this.canvas,
|
||
|
|
});
|
||
|
|
|
||
|
|
this._bindSearchOverlay(overlay);
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindSearchOverlay: function(overlay) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this._positionSearchOverlay(overlay.model);
|
||
|
|
this._positionOverlaysHorizontally();
|
||
|
|
|
||
|
|
var onDestroy = function() {
|
||
|
|
|
||
|
|
if (self.search) {
|
||
|
|
self.search.clean();
|
||
|
|
delete self.search;
|
||
|
|
}
|
||
|
|
|
||
|
|
self._positionOverlaysHorizontally();
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
overlay.model.bind("destroy", onDestroy, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_setupHeaderOverlay: function(type, data) {
|
||
|
|
|
||
|
|
var overlay = this.header = new cdb.admin.overlays[type]({
|
||
|
|
model: data,
|
||
|
|
map: this.map
|
||
|
|
});
|
||
|
|
|
||
|
|
this._bindHeaderOverlay(overlay);
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindHeaderOverlay: function(overlay) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
var onDestroy = function() {
|
||
|
|
|
||
|
|
if (self.header) {
|
||
|
|
self.header.clean();
|
||
|
|
delete self.header;
|
||
|
|
}
|
||
|
|
|
||
|
|
self._positionOverlaysVertically();
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
overlay.bind("change_y", this._positionOverlaysVertically, this);
|
||
|
|
overlay.model.bind("destroy", onDestroy, this);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_getHeaderHeight: function() {
|
||
|
|
|
||
|
|
return $(".header.overlay-static").outerHeight(true) || 20;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
if (!overlay_model) return;
|
||
|
|
|
||
|
|
var type = overlay_model.get("type");
|
||
|
|
|
||
|
|
if (type === 'header') this._positionHeaderOverlay(overlay_model);
|
||
|
|
else if (type === 'zoom') this._positionZoomOverlay(overlay_model);
|
||
|
|
else if (type === 'fullscreen') this._positionFullScreenOverlay(overlay_model);
|
||
|
|
else if (type === 'share') this._positionShareOverlay(overlay_model);
|
||
|
|
else if (type === 'loader') this._positionLoaderOverlay(overlay_model);
|
||
|
|
else if (type === 'search') this._positionSearchOverlay(overlay_model);
|
||
|
|
else if (type === 'layer_selector') this._positionLayerSelectorOverlay(overlay_model);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionHeaderOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
if (this.headerMessageIsVisible && this.canvas.get("mode") === 'desktop') overlay_model.set("y", 20);
|
||
|
|
else overlay_model.set("y", 0);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionSearchOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
var y = this.header ? this._getHeaderHeight() + 20 : 20;
|
||
|
|
var x = this.share ? 60 : 20;
|
||
|
|
|
||
|
|
if (this.headerMessageIsVisible && this.canvas.get("mode") === 'desktop') overlay_model.set("y", this._getHeaderHeight() + 40);
|
||
|
|
else overlay_model.set("y", y);
|
||
|
|
|
||
|
|
overlay_model.set("x", x);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionLayerSelectorOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
var y = 20;
|
||
|
|
var x = 20;
|
||
|
|
|
||
|
|
if (this.header) y = this._getHeaderHeight() + 20;
|
||
|
|
|
||
|
|
if (this.search && this.share) x = 220;
|
||
|
|
else if (this.search) x = 180;
|
||
|
|
else if (this.share) x = 60;
|
||
|
|
|
||
|
|
overlay_model.set("x", x);
|
||
|
|
|
||
|
|
if (this.headerMessageIsVisible && this.canvas.get("mode") === 'desktop') overlay_model.set("y", this._getHeaderHeight() + 40);
|
||
|
|
else overlay_model.set("y", y);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionShareOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
var y = this.header ? this._getHeaderHeight() + 20 : 20;
|
||
|
|
|
||
|
|
if (this.headerMessageIsVisible && this.canvas.get("mode") === 'desktop') overlay_model.set("y", this._getHeaderHeight() + 40);
|
||
|
|
else overlay_model.set("y", y);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionLoaderOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
var hasSQLHeader = this.headerMessageIsVisible && this.canvas.get("mode") === 'desktop';
|
||
|
|
|
||
|
|
var y = 20;
|
||
|
|
|
||
|
|
if (this.canvas.get("mode") === 'mobile' && this.header) {
|
||
|
|
y = this._getHeaderHeight() + 20;
|
||
|
|
}
|
||
|
|
else if (this.fullscreen) y = this.fullscreen.model.get("y") + 40;
|
||
|
|
else if (this.zoom) y = this.zoom.model.get("y") + 120;
|
||
|
|
else if (this.header) y = this._getHeaderHeight() + 20;
|
||
|
|
else if (hasSQLHeader) y = this._getHeaderHeight() + 40;
|
||
|
|
|
||
|
|
overlay_model.set("y", y);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionZoomOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
var y = this.header ? this._getHeaderHeight() + 20 : 20;
|
||
|
|
|
||
|
|
if ( this.headerMessageIsVisible) overlay_model.set("y", this._getHeaderHeight() + 40);
|
||
|
|
else overlay_model.set("y", y);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_positionFullScreenOverlay: function(overlay_model) {
|
||
|
|
|
||
|
|
if (this.zoom) overlay_model.set("y", this.zoom.model.get("y") + 120);
|
||
|
|
else if (this.header) overlay_model.set("y", this._getHeaderHeight() + 20);
|
||
|
|
else if (this.headerMessageIsVisible && this.canvas.get("mode") === 'desktop') overlay_model.set("y", this._getHeaderHeight() + 40);
|
||
|
|
else overlay_model.set("y", 20);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|