169 lines
3.9 KiB
JavaScript
169 lines
3.9 KiB
JavaScript
|
var $ = require('jquery');
|
||
|
|
var _ = require('underscore');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var template = require('./template.tpl');
|
||
|
|
var DropdownOverlay = require('../../../builder/components/dropdown-overlay/dropdown-overlay-view');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Standard widget dropdown view
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
className: 'CDB-Dropdown',
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'click .js-toggleLocalTimezone': '_toggleLocalTimezone',
|
||
|
|
'click .js-toggleNormalized': '_toggleNormalized',
|
||
|
|
'click .js-toggleCollapsed': '_toggleCollapsed',
|
||
|
|
'click .js-removeWidget': '_removeWidget',
|
||
|
|
'click .js-editWidget': '_editWidget'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
if (!opts.target) {
|
||
|
|
throw new Error('target is not defined');
|
||
|
|
}
|
||
|
|
|
||
|
|
this._target = this.options.target;
|
||
|
|
this._$container = this.options.container;
|
||
|
|
|
||
|
|
this._initBinds();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var flags = _.defaults(
|
||
|
|
this.options.flags || {}, {
|
||
|
|
canCollapse: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
var templateData = _.defaults({},
|
||
|
|
this.model.attributes, {
|
||
|
|
flags: flags
|
||
|
|
}, {
|
||
|
|
'local_timezone': false,
|
||
|
|
'normalized': false,
|
||
|
|
'collapsed': false,
|
||
|
|
'show_options': false
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
this.$el.html(template(templateData));
|
||
|
|
|
||
|
|
this._dropdownOverlay = new DropdownOverlay({
|
||
|
|
visible: true,
|
||
|
|
onClickAction: this._onGlobalClick.bind(this)
|
||
|
|
});
|
||
|
|
this.addView(this._dropdownOverlay);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
this.add_related_model(this.model);
|
||
|
|
|
||
|
|
this.model.bind('change:widget_dropdown_open', this._onChangeOpen, this);
|
||
|
|
|
||
|
|
this._$container.delegate(this._target, 'click', _.bind(this._toggle, this));
|
||
|
|
},
|
||
|
|
|
||
|
|
_removeWidget: function () {
|
||
|
|
this.model.trigger('removeWidget', this.model);
|
||
|
|
this._toggle();
|
||
|
|
},
|
||
|
|
|
||
|
|
_editWidget: function () {
|
||
|
|
this.model.trigger('editWidget', this.model);
|
||
|
|
this._toggle();
|
||
|
|
},
|
||
|
|
|
||
|
|
_bindESC: function () {
|
||
|
|
$(document).bind('keyup.' + this.cid, _.bind(this._onKeyUp, this));
|
||
|
|
},
|
||
|
|
|
||
|
|
_unbindESC: function () {
|
||
|
|
$(document).unbind('keyup.' + this.cid);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onGlobalClick: function (ev) {
|
||
|
|
this.model.set('widget_dropdown_open', false);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onKeyUp: function (ev) {
|
||
|
|
if (ev.keyCode === 27) {
|
||
|
|
this.model.set('widget_dropdown_open', false);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_onChangeOpen: function () {
|
||
|
|
if (this.model.get('widget_dropdown_open')) {
|
||
|
|
this._open();
|
||
|
|
} else {
|
||
|
|
this._close();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_toggleCollapsed: function () {
|
||
|
|
var collapsed = !this.model.get('collapsed');
|
||
|
|
this.model.set('collapsed', collapsed);
|
||
|
|
this._toggle();
|
||
|
|
},
|
||
|
|
|
||
|
|
_toggleNormalized: function () {
|
||
|
|
var normalized = !this.model.get('normalized');
|
||
|
|
this.model.set('normalized', normalized);
|
||
|
|
this._toggle();
|
||
|
|
},
|
||
|
|
|
||
|
|
_toggleLocalTimezone: function () {
|
||
|
|
var localTimezone = !this.model.get('local_timezone');
|
||
|
|
this.model.set('local_timezone', localTimezone);
|
||
|
|
this._toggle();
|
||
|
|
},
|
||
|
|
|
||
|
|
_open: function () {
|
||
|
|
this._bindESC();
|
||
|
|
|
||
|
|
this.render();
|
||
|
|
this._$container.append(this.$el);
|
||
|
|
this.$el.show();
|
||
|
|
|
||
|
|
this._adjustVerticalPosition();
|
||
|
|
},
|
||
|
|
|
||
|
|
_adjustVerticalPosition: function () {
|
||
|
|
if (this._getDropdownBottom() > this._getBodyHeight()) {
|
||
|
|
this.$el.addClass('has-top-position');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_getDropdownBottom: function () {
|
||
|
|
return this.$el.offset().top + this.$el.height();
|
||
|
|
},
|
||
|
|
|
||
|
|
_getBodyHeight: function () {
|
||
|
|
return $('body').height();
|
||
|
|
},
|
||
|
|
|
||
|
|
_close: function () {
|
||
|
|
this._unbindESC();
|
||
|
|
this._dropdownOverlay && this._dropdownOverlay.clean();
|
||
|
|
this.$el.hide();
|
||
|
|
this.$el.removeClass('has-top-position');
|
||
|
|
},
|
||
|
|
|
||
|
|
_toggle: function () {
|
||
|
|
this.model.set('widget_dropdown_open', !this.model.get('widget_dropdown_open'));
|
||
|
|
},
|
||
|
|
|
||
|
|
clean: function () {
|
||
|
|
this.model.set('widget_dropdown_open', false);
|
||
|
|
this._unbindESC();
|
||
|
|
this._dropdownOverlay && this._dropdownOverlay.clean();
|
||
|
|
this._$container.undelegate(this._target, 'click');
|
||
|
|
CoreView.prototype.clean.call(this);
|
||
|
|
}
|
||
|
|
});
|