lib/assets/javascripts/cartodb/table/map/map_options_dropdown.js
cdb.admin.MapOptionsDropdown = cdb.ui.common.Dropdown.extend({
className: 'dropdown map_options_dropdown',
defaults: {
speedOut: 90,
speedIn: 90
},
events: {
"click" : "killEvent"
},
desktopOverlays: ["shareable", "zoom", "share"],
initialize: function() {
_.bindAll(this, "open", "hide", "_handleClick", "_keydown");
// Extend options
_.defaults(this.options, this.defaults);
this.collection.on("reset", this._setupOptions, this);
this.collection.on("change:description", this._setupOptions, this);
this.disabledCartodbLogo = this.options.user.featureEnabled("disabled_cartodb_logo");
this.mapOptions = new cdb.core.Model({
title: false,
description: false,
search: false,
layer_selector: false,
fullscreen: false,
share: true,
logo: this.disabledCartodbLogo,
zoom: true,
scrollwheel: false,
legends: true
});
// Dropdown template
this.template_base = cdb.templates.getTemplate(this.options.template_base);
this.options.canvas.bind("change:mode", this._onChangeDevice, this);
this.mapOptions.bind("change", this._onMapOptionsChange, this);
// Bind to target
$(this.options.target).bind({ "click": this._handleClick});
$(this.options.target).bind({ "dblclick": this.killEvent});
// Bind ESC key
$(document).bind('keydown', this._keydown);
// Is open flag
this.isOpen = false;
this._setupOptions();
},
_onMapOptionsChange: function(model, changes) {
_.each(changes.changes, function(value, option) {
var $el = this.$el.find("li." + option);
if ($el.find("a").hasClass("enabled")) $el.addClass("active");
else $el.removeClass("active");
}, this);
},
_enableDesktopOverlays: function() {
_.each(this.desktopOverlays, function(overlay) {
var $overlay = this.$el.find("." + overlay);
$overlay.removeClass("inactive");
$overlay.find(".form_switch").removeClass("inactive");
}, this);
},
_disableDesktopOverlays: function() {
_.each(this.desktopOverlays, function(overlay) {
var $overlay = this.$el.find("." + overlay);
$overlay.addClass("inactive");
$overlay.find(".form_switch").addClass("inactive");
}, this);
},
_onChangeDevice: function() {
var device = this.options.canvas.get("mode");
if (device === 'mobile') {
this._disableDesktopOverlays();
} else {
this._enableDesktopOverlays();
}
},
_setupOptions: function() {
var self = this;
var overlays = this.collection.models;
var simpleOverlays = ["search", "shareable", "zoom", "share", "fullscreen", "layer_selector", "logo"];
// If user has set the diable cartodb logo FF then remove the logo
if(this.disabledCartodbLogo) {
simpleOverlays.pop();
}
this.mapOptions.set({ scrollwheel: !!this.options.vis.map.get("scrollwheel") });
this.mapOptions.set({ legends: !!this.options.vis.map.get("legends") });
_.each(simpleOverlays, function(overlay_type) {
if (!_.contains(self.collection.pluck("type"), overlay_type)) {
self.mapOptions.set(overlay_type, false);
}
})
_.each(overlays, function(overlay) {
var extra = overlay.get("extra");
var type = overlay.get("type");
if (type === "header") {
var show_title = extra.show_title;
var show_description = extra.show_description;
self.mapOptions.set({ title: show_title, description: show_description });
if (show_title) {
self.$(".title").removeClass("disabled");
}
if (show_description) {
self.$(".description").removeClass("disabled");
} else {
self.$(".description").addClass("disabled");
}
} else if (_.contains(simpleOverlays, type)) {
var display = overlay.get("display");
self.mapOptions.set(type, display);
if (display) {
self.$("." + type).removeClass("disabled");
}
}
});
},
/* Check if the dropdown is visible to hiding with the click on the target */
_handleClick: function(ev) {
if (ev) {
ev.preventDefault();
ev.stopPropagation();
}
// If visible
if (this.isOpen){
this.hide();
} else{
this.open();
}
},
show: function() {
var dfd = $.Deferred();
var self = this;
//sometimes this dialog is child of a node that is removed
//for that reason we link again DOM events just in case
this.delegateEvents();
this.$el
.css({
marginTop: self.options.vertical_position == "down" ? "-10px" : "10px",
opacity:0,
display:"block"
})
.animate({
margin: "0",
opacity: 1
}, {
"duration": this.options.speedIn,
"complete": function(){
dfd.resolve();
}
});
this.trigger("onDropdownShown", this.el);
return dfd.promise();
},
open: function(ev, target) {
// Target
var $target = target && $(target) || this.options.target;
this.options.target = $target;
this.$el.css({
bottom: 40,
left: this.options.horizontal_offset
})
.addClass(
// Add vertical and horizontal position class
(this.options.vertical_position == "up" ? "vertical_top" : "vertical_bottom" )
+ " " +
(this.options.horizontal_position == "right" ? "horizontal_right" : "horizontal_left" )
+ " " +
// Add tick class
"border tick_" + this.options.tick
);
// Show it
this.show();
this._recalcHeight();
// Dropdown open
this.isOpen = true;
},
hide: function(done) {
if (!this.isOpen) {
done && done();
return;
}
var self = this;
this.isOpen = false;
this.$el.animate({
marginTop: self.options.vertical_position == "down" ? "10px" : "-10px",
opacity: 0
}, this.options.speedOut, function(){
// And hide it
self.$el.hide();
});
this.trigger("onDropdownHidden",this.el);
},
_recalcHeight: function() {
var $ul = this.$el.find("ul.special");
// Resets heights
$ul.height("auto");
$ul.parent().height("auto");
var special_height = $ul.height();
var dropdown_height = $ul.parent().height();
// Sets heights
if (special_height < dropdown_height) $ul.css("height", dropdown_height);
else $ul.parent().height(special_height);
},
_addSwitches: function(switches) {
_(switches).each(this._addSwitch, this);
},
_addSwitch: function(prop) {
var className = '.' + prop;
var sw = new cdb.forms.Switch({
model: this.mapOptions,
property: prop
})
.bind("switched", this._onSwitchSwitched, this);
this._renderSwitch(sw, className);
if (!this.mapOptions.attributes[prop]) {
this.$(className);
}
},
_renderSwitch: function(sw, className) {
this.addView(sw);
this.$("li" + className).append(sw.render().el);
},
_onSwitchSwitched: function(property, value) {
if (property === 'scrollwheel') {
value ? this.options.vis.map.enableScrollWheel() : this.options.vis.map.disableScrollWheel();
this.options.vis.map.save();
this.options.table.globalError.showError("Scrollwheel " + (value ? 'enabled' : 'disabled'), 'info', 3000);
} else if (property === 'legends') {
this.options.vis.map.set(property, value)
this.options.vis.map.save();
this.options.table.globalError.showError("Legends " + (value ? 'enabled' : 'disabled'), 'info', 3000);
} else if (property === "zoom" || property === 'search' || property === 'fullscreen' || property === 'share' || property === 'layer_selector' || property === 'logo') {
this._toggleOverlay(property);
} else if (property === 'title' || property === 'description') {
var overlay = this.collection.filter(function(m) { return m.get("type") == "header" })[0]
if (!overlay) {
this.trigger("createOverlay", "header", property);
return;
}
var show_property = this.mapOptions.get(property);
overlay.set("show_" + property, show_property);
overlay.save();
if ( (!overlay.get("show_title") && !overlay.get("show_description") ) || !overlay.get("show_title") && !overlay.get("description")) this.options.collection.remove(overlay);
}
value ? this.$("li." + property).removeClass("disabled") : this.$("li." + property);
},
_toggleOverlay: function(property) {
var overlay = this.collection.filter(function(m) { return m.get("type") === property; })[0];
if (overlay) {
this.options.collection.remove(overlay);
} else if (!overlay) {
this.trigger("createOverlay", property);
}
},
/*
* Renders the dropdown
*/
render: function() {
var switches = ['title', 'description', 'search', 'zoom', 'fullscreen', 'share', 'scrollwheel', 'layer_selector', 'legends'];
this.clearSubViews();
this.$el.html(this.template_base(this.options));
// Show the logo switch if user is allowed and disabled_cartodb_logo FF is not set
if (this.options.user.get('actions').remove_logo && !this.disabledCartodbLogo) {
switches.push('logo');
} else {
this.$('.logo').remove();
}
this._addSwitches(switches);
_.each(this.mapOptions.attributes, function(value, option) {
var $el = this.$el.find("li." + option);
if ($el.find("a").hasClass("enabled")) $el.addClass("active");
else $el.removeClass("active");
}, this);
return this;
},
clean: function() {
$(document).unbind('keydown', this._keydown);
cdb.ui.common.Dropdown.prototype.clean.call(this);
}
});