65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
|
var _ = require('underscore');
|
||
|
|
var $ = require('jquery');
|
||
|
|
var Backbone = require('backbone');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Dropdown overlay to disable all interactions between elements
|
||
|
|
* beneath the dropdown
|
||
|
|
*/
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
className: 'CDB-Box-modalOverlay',
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'click': '_onOverlayClicked'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
this.container = opts && opts.container;
|
||
|
|
this.onClickAction = opts && opts.onClickAction;
|
||
|
|
|
||
|
|
this.model = new Backbone.Model({
|
||
|
|
visible: _.isUndefined(opts && opts.visible) ? false : opts.visible
|
||
|
|
});
|
||
|
|
|
||
|
|
this._initBinds();
|
||
|
|
this.render();
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
this.listenTo(this.model, 'change:visible', this._onVisibilityChange);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
(this.container || $(document.body)).append(this.$el);
|
||
|
|
this.$el.toggle(this.isVisible());
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_onOverlayClicked: function () {
|
||
|
|
this.onClickAction && this.onClickAction();
|
||
|
|
this.hide();
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function () {
|
||
|
|
this.model.set('visible', true);
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function () {
|
||
|
|
this.model.set('visible', false);
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function () {
|
||
|
|
this.model.set('visible', !this.model.get('visible'));
|
||
|
|
},
|
||
|
|
|
||
|
|
isVisible: function () {
|
||
|
|
return this.model.get('visible');
|
||
|
|
},
|
||
|
|
|
||
|
|
_onVisibilityChange: function () {
|
||
|
|
this.$el.toggle(this.isVisible());
|
||
|
|
}
|
||
|
|
});
|