201 lines
4.2 KiB
JavaScript
201 lines
4.2 KiB
JavaScript
cdb.admin.ConfigureCanvasDropdown = cdb.ui.common.Dropdown.extend({
|
|
|
|
className: 'dropdown canvas_setup_dropdown',
|
|
|
|
defaults: {
|
|
speedOut: 100,
|
|
speedIn: 100
|
|
},
|
|
|
|
events: {
|
|
"click" : "killEvent"
|
|
},
|
|
|
|
initialize: function() {
|
|
|
|
_.bindAll(this, "open", "hide", "_handleClick", "_keydown");
|
|
|
|
// Extend options
|
|
_.defaults(this.options, this.defaults);
|
|
|
|
// Dropdown template
|
|
this.template_base = cdb.templates.getTemplate(this.options.template_base);
|
|
|
|
// Bind to target
|
|
$(this.options.target).bind({ "click": this._handleClick});
|
|
|
|
// Bind ESC key
|
|
$(document).bind('keydown', this._keydown);
|
|
|
|
// Is open flag
|
|
this.isOpen = false;
|
|
|
|
},
|
|
|
|
/* Check if the dropdown is visible to hiding with the click on the target */
|
|
_handleClick: function(ev) {
|
|
if (ev) {
|
|
ev.preventDefault();
|
|
}
|
|
|
|
// 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: "-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) {
|
|
|
|
cdb.god.trigger("closeDialogs");
|
|
|
|
// Target
|
|
var $target = target && $(target) || this.options.target;
|
|
|
|
this.options.target = $target;
|
|
|
|
this.$el.css({
|
|
top: 40,
|
|
left: 0
|
|
})
|
|
.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);
|
|
|
|
},
|
|
|
|
_addButton: function(title, icon_name, active, callback) {
|
|
|
|
var button = new cdb.admin.OverlaysDropdownItem({
|
|
template_name: 'table/views/overlays/canvas_dropdown_item',
|
|
text: title,
|
|
active: active,
|
|
className: title.toLowerCase()
|
|
}).on("click", callback, this);
|
|
|
|
this.$el.find("ul").append(button.render().$el);
|
|
|
|
return button;
|
|
|
|
},
|
|
|
|
_switchToDesktop: function() {
|
|
|
|
this.desktopButton.model.set("active", true);
|
|
this.mobileButton.model.set("active", false);
|
|
this.options.canvas.set("mode", "desktop");
|
|
|
|
},
|
|
|
|
_switchToMobile: function() {
|
|
|
|
this.desktopButton.model.set("active", false);
|
|
this.mobileButton.model.set("active", true);
|
|
this.options.canvas.set("mode", "mobile");
|
|
|
|
},
|
|
|
|
/*
|
|
* Renders the dropdown
|
|
*/
|
|
render: function() {
|
|
|
|
this.clearSubViews();
|
|
|
|
this.$el.html(this.template_base(this.options));
|
|
|
|
this.desktopButton = this._addButton("Desktop", "desktop", true, this._switchToDesktop);
|
|
this.mobileButton = this._addButton("Mobile", "mobile", false, this._switchToMobile);
|
|
|
|
return this;
|
|
},
|
|
|
|
clean: function() {
|
|
$(document).unbind('keydown', this._keydown);
|
|
cdb.ui.common.Dropdown.prototype.clean.call(this);
|
|
}
|
|
});
|