From ee224cb4228ec954903a6de33483ea067f90b4dc Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Tue, 12 May 2015 16:57:30 -0700 Subject: [PATCH] Modal Regions inherit from a common base --- src/UI/Shared/Modal/ModalRegion.js | 49 ++---------------------- src/UI/Shared/Modal/ModalRegion2.js | 40 +++---------------- src/UI/Shared/Modal/ModalRegionBase.js | 53 ++++++++++++++++++++++++++ 3 files changed, 62 insertions(+), 80 deletions(-) create mode 100644 src/UI/Shared/Modal/ModalRegionBase.js diff --git a/src/UI/Shared/Modal/ModalRegion.js b/src/UI/Shared/Modal/ModalRegion.js index 857af257d..91fccccc5 100644 --- a/src/UI/Shared/Modal/ModalRegion.js +++ b/src/UI/Shared/Modal/ModalRegion.js @@ -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; \ No newline at end of file diff --git a/src/UI/Shared/Modal/ModalRegion2.js b/src/UI/Shared/Modal/ModalRegion2.js index a6cc0b8f7..e9ee8f81f 100644 --- a/src/UI/Shared/Modal/ModalRegion2.js +++ b/src/UI/Shared/Modal/ModalRegion2.js @@ -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(); } }); diff --git a/src/UI/Shared/Modal/ModalRegionBase.js b/src/UI/Shared/Modal/ModalRegionBase.js new file mode 100644 index 000000000..ae1fd2b1e --- /dev/null +++ b/src/UI/Shared/Modal/ModalRegionBase.js @@ -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; \ No newline at end of file