Modal Regions inherit from a common base

pull/4/head
Mark McDowall 9 years ago
parent 335be1c85d
commit ee224cb422

@ -1,50 +1,7 @@
var $ = require('jquery');
var Backbone = require('backbone');
var Marionette = require('marionette');
require('bootstrap');
var region = Marionette.Region.extend({
el : '#modal-region',
var ModalRegionBase = require('./ModalRegionBase');
constructor : function() {
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on('show', this.showModal, this);
},
getEl : function(selector) {
var $el = $(selector);
$el.on('hidden', this.close);
return $el;
},
showModal : function() {
this.$el.addClass('modal fade');
//need tab index so close on escape works
//https://github.com/twitter/bootstrap/issues/4663
this.$el.attr('tabindex', '-1');
this.$el.modal({
show : true,
keyboard : true,
backdrop : true
});
this.$el.on('hide.bs.modal', $.proxy(this._closing, this));
this.currentView.$el.addClass('modal-dialog');
},
closeModal : function() {
$(this.el).modal('hide');
this.reset();
},
_closing : function() {
if (this.$el) {
this.$el.off('hide.bs.modal');
}
this.reset();
}
var region = ModalRegionBase.extend({
el : '#modal-region'
});
module.exports = region;

@ -1,49 +1,21 @@
var $ = require('jquery');
var Backbone = require('backbone');
var Marionette = require('marionette');
require('bootstrap');
var ModalRegionBase = require('./ModalRegionBase');
var region = Marionette.Region.extend({
var region = ModalRegionBase.extend({
el : '#modal-region2',
constructor : function() {
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on('show', this.showModal, this);
initialize : function () {
this.listenTo(this, 'modal:beforeShow', this.onBeforeShow);
},
getEl : function(selector) {
var $el = $(selector);
$el.on('hidden', this.close);
return $el;
},
showModal : function() {
onBeforeShow : function () {
this.$el.addClass('modal fade');
this.$el.attr('tabindex', '-1');
this.$el.css('z-index', '1060');
this.$el.modal({
show : true,
keyboard : true,
backdrop : true
});
this.$el.on('hide.bs.modal', $.proxy(this._closing, this));
this.$el.on('shown.bs.modal', function() {
$('.modal-backdrop:last').css('z-index', 1059);
});
this.currentView.$el.addClass('modal-dialog');
},
closeModal : function() {
$(this.el).modal('hide');
this.reset();
},
_closing : function() {
if (this.$el) {
this.$el.off('hide.bs.modal');
this.$el.off('shown.bs.modal');
}
this.reset();
}
});

@ -0,0 +1,53 @@
var $ = require('jquery');
var Backbone = require('backbone');
var Marionette = require('marionette');
require('bootstrap');
var region = Marionette.Region.extend({
el : '#modal-region',
constructor : function() {
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on('show', this.showModal, this);
},
getEl : function(selector) {
var $el = $(selector);
$el.on('hidden', this.close);
return $el;
},
showModal : function() {
this.trigger('modal:beforeShow');
this.$el.addClass('modal fade');
//need tab index so close on escape works
//https://github.com/twitter/bootstrap/issues/4663
this.$el.attr('tabindex', '-1');
this.$el.modal({
show : true,
keyboard : true,
backdrop : true
});
this.$el.on('hide.bs.modal', $.proxy(this._closing, this));
this.currentView.$el.addClass('modal-dialog');
this.trigger('modal:afterShow');
},
closeModal : function() {
$(this.el).modal('hide');
this.reset();
},
_closing : function() {
if (this.$el) {
this.$el.off('hide.bs.modal');
}
this.reset();
}
});
module.exports = region;
Loading…
Cancel
Save