mirror of
https://github.com/Sonarr/Sonarr
synced 2024-12-27 18:28:19 +00:00
Modal Regions inherit from a common base
This commit is contained in:
parent
335be1c85d
commit
ee224cb422
3 changed files with 62 additions and 80 deletions
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
53
src/UI/Shared/Modal/ModalRegionBase.js
Normal file
53
src/UI/Shared/Modal/ModalRegionBase.js
Normal file
|
@ -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…
Reference in a new issue