Modal Regions inherit from a common base

src/UI/Shared/Modal/ModalRegion.js

@@ -1,50 +1,7 @@
-var $ = require('jquery');
+var ModalRegionBase = require('./ModalRegionBase');
-var Backbone = require('backbone');
-var Marionette = require('marionette');
-require('bootstrap');
-var region = Marionette.Region.extend({
-    el : '#modal-region',
 
-    constructor : function() {
+var region = ModalRegionBase.extend({
-        Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
+    el : '#modal-region'
-        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();
-    }
 });
 
 module.exports = region;

src/UI/Shared/Modal/ModalRegion2.js

@@ -1,49 +1,21 @@
 var $ = require('jquery');
-var Backbone = require('backbone');
+var ModalRegionBase = require('./ModalRegionBase');
-var Marionette = require('marionette');
-require('bootstrap');
 
-var region = Marionette.Region.extend({
+var region = ModalRegionBase.extend({
     el : '#modal-region2',
 
-    constructor : function() {
+    initialize : function () {
-        Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
+        this.listenTo(this, 'modal:beforeShow', this.onBeforeShow);
-        this.on('show', this.showModal, this);
     },
 
-    getEl : function(selector) {
+    onBeforeShow : function () {
-        var $el = $(selector);
-        $el.on('hidden', this.close);
-        return $el;
-    },
-
-    showModal : 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();
     }
 });
 

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;