Cleaned up modals in the UI.

added empty modal for episode info

UI/Controller.js

@@ -1,16 +1,15 @@
 "use strict";
-define(['app', 'Shared/ModalRegion', 'AddSeries/AddSeriesLayout',
+define(['app', 'AddSeries/AddSeriesLayout',
     'Series/Index/SeriesIndexLayout',
     'Calendar/CalendarCollectionView', 'Shared/NotificationView',
     'Shared/NotFoundView', 'MainMenuView',
     'Series/Details/SeriesDetailsView', 'Series/EpisodeCollection',
     'Settings/SettingsLayout', 'Missing/MissingLayout',
     'History/HistoryLayout'],
-    function (app, modalRegion) {
+    function () {
-
         var controller = Backbone.Marionette.Controller.extend({
 
-            series: function () {
+            series       : function () {
                 this._setTitle('NzbDrone');
                 NzbDrone.mainRegion.show(new NzbDrone.Series.Index.SeriesIndexLayout());
             },
@@ -74,23 +73,6 @@ define(['app', 'Shared/ModalRegion', 'AddSeries/AddSeriesLayout',
             }
         });
 
-        //Modal dialog initializer
-        NzbDrone.addInitializer(function () {
-
-            NzbDrone.addRegions({ modalRegion: modalRegion });
-
-            NzbDrone.vent.on(NzbDrone.Events.OpenModalDialog, function (options) {
-                console.log('opening modal dialog ' + options.view.template);
-                NzbDrone.modalRegion.show(options.view);
-            });
-
-            NzbDrone.vent.on(NzbDrone.Events.CloseModalDialog, function () {
-                console.log('closing modal dialog');
-                NzbDrone.modalRegion.close();
-            });
-
-        });
-
         return new controller();
 
     });

UI/Episode/Layout.js

@@ -0,0 +1,9 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Episode.Layout = Backbone.Marionette.ItemView.extend({
+        template: 'Episode/Search/LayoutTemplate'
+
+    });
+
+});

UI/Episode/Search/Layout.js

@@ -0,0 +1,10 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Episode.Search.Layout = Backbone.Marionette.Layout.extend({
+        template: 'Episode/Search/LayoutTemplate'
+
+
+    });
+
+});

UI/Episode/Search/LayoutTemplate.html

@@ -0,0 +1,12 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Delete: {{title}}</h3>
+</div>
+<div class="modal-body">
+    <h1>Searching for episodes!!!</h1>
+</div>
+<div class="modal-footer">
+    <button class="btn" data-dismiss="modal">cancel</button>
+    <button class="btn btn-danger x-confirm-delete">delete</button>
+</div>
+

UI/Series/Delete/DeleteSeriesView.js

@@ -3,8 +3,6 @@ define(['app', 'Series/SeriesModel'], function () {
 
     NzbDrone.Series.Delete.DeleteSeriesView = Backbone.Marionette.ItemView.extend({
         template : 'Series/Delete/DeleteSeriesTemplate',
-        tagName  : 'div',
-        className: "modal",
 
         events: {
             'click .x-confirm-delete': 'removeSeries'

UI/Series/Details/EpisodeDetailCell.js

@@ -0,0 +1,20 @@
+"use strict";
+
+define(['app', 'Episode/Layout'], function () {
+    NzbDrone.Series.Details.EpisodeDetailCell = Backgrid.Cell.extend({
+
+        events: {
+            'click': 'showDetails'
+        },
+        render: function () {
+            this.$el.empty();
+            this.$el.html('<i class="icon-ellipsis-vertical x-detail-icon"/>');
+            return this;
+        },
+
+        showDetails: function () {
+            var view = new NzbDrone.Episode.Layout({ model: this.model });
+            NzbDrone.modalRegion.show(view);
+        }
+    });
+});

UI/Series/Details/SeasonLayout.js

@@ -1,5 +1,5 @@
 'use strict';
-define(['app'], function () {
+define(['app', 'Series/Details/EpisodeDetailCell'], function () {
     NzbDrone.Series.Details.SeasonLayout = Backbone.Marionette.Layout.extend({
         template: 'Series/Details/SeasonLayoutTemplate',
 
@@ -8,6 +8,11 @@ define(['app'], function () {
         },
 
         columns: [
+            {
+                name    : 'details',
+                editable: false,
+                cell    : NzbDrone.Series.Details.EpisodeDetailCell
+            },
             {
                 name    : 'episodeNumber',
                 label   : '#',
@@ -22,10 +27,10 @@ define(['app'], function () {
                 cell    : 'string'
             },
             {
-                name     : 'airDate',
+                name    : 'airDate',
-                label    : 'Air Date',
+                label   : 'Air Date',
-                editable : false,
+                editable: false,
-                cell     : 'date'
+                cell    : 'date'
                 //formatter: new Backgrid.AirDateFormatter()
             }
         ],

UI/Series/Edit/EditSeriesView.js

@@ -3,8 +3,6 @@ define(['app', 'Series/SeriesModel', 'Series/Delete/DeleteSeriesView', 'Quality/
 
     NzbDrone.Series.Edit.EditSeriesView = Backbone.Marionette.ItemView.extend({
         template : 'Series/Edit/EditSeriesTemplate',
-        tagName  : 'div',
-        className: "modal",
 
         ui: {
             progressbar    : '.progress .bar',

UI/Series/Index/List/ItemView.js

@@ -28,17 +28,12 @@ define([
 
         editSeries: function () {
             var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
-
+            NzbDrone.modalRegion.show(view);
-            NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
-                view: view
-            });
         },
 
         removeSeries: function () {
             var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
-            NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+            NzbDrone.modalRegion.show(view);
-                view: view
-            });
         },
 
         showEpisodeList: function (e) {

UI/Series/Index/Posters/ItemView.js

@@ -37,17 +37,12 @@ define([
 
         editSeries: function () {
             var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
-
+            NzbDrone.modalRegion.show(view);
-            NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
-                view: view
-            });
         },
 
         removeSeries: function () {
             var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
-            NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+            NzbDrone.modalRegion.show(view);
-                view: view
-            });
         },
 
         posterHoverAction: function () {

UI/Series/Index/Table/Row.js

@@ -1,3 +1,4 @@
+"use strict";
 NzbDrone.Series.Index.Table.Row = Backgrid.Row.extend({
     events: {
         'click .x-edit'  : 'editSeries',
@@ -6,16 +7,11 @@ NzbDrone.Series.Index.Table.Row = Backgrid.Row.extend({
 
     editSeries: function () {
         var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
-
+        NzbDrone.modalRegion.show(view);
-        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
-            view: view
-        });
     },
 
     removeSeries: function () {
         var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
-        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+        NzbDrone.modalRegion.show(view);
-            view: view
-        });
     }
 });

UI/Settings/Quality/Profile/EditQualityProfileView.js

@@ -3,8 +3,6 @@ define(['app', 'Quality/QualityProfileModel'], function () {
 
     NzbDrone.Settings.Quality.Profile.EditQualityProfileView = Backbone.Marionette.ItemView.extend({
         template : 'Settings/Quality/Profile/EditQualityProfileTemplate',
-        tagName  : 'div',
-        className: "modal",
 
         events: {
             'click .x-save': 'saveQualityProfile'

UI/Settings/Quality/Profile/QualityProfileView.js

@@ -22,17 +22,12 @@ define([
 
         editSeries: function () {
             var view = new NzbDrone.Settings.Quality.Profile.EditQualityProfileView({ model: this.model});
-
+            NzbDrone.modalRegion.show(view);
-            NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
-                view: view
-            });
         },
 
         removeSeries: function () {
             var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
-            NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+            NzbDrone.modalRegion.show(view);
-                view: view
-            });
         }
     });
 });

UI/Shared/Modal/Region.js

@@ -0,0 +1,33 @@
+"use strict";
+define(function () {
+
+    return Backbone.Marionette.Region.extend({
+        el: "#modal-region",
+
+        constructor: function () {
+            _.bindAll(this);
+            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 (view) {
+            view.on("close", this.hideModal, this);
+            this.$el.addClass('modal hide 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});
+        },
+
+        hideModal: function () {
+            this.$el.modal('hide');
+        }
+    });
+});

UI/Shared/ModalRegion.js

@@ -1,5 +1,6 @@
-define(['app'], function () {
+"use strict";
-    return Backbone.Marionette.Region.extend({
+define('modal', function () {
+    var modal = Backbone.Marionette.Region.extend({
         el: "#modal-region",
 
         constructor: function () {
@@ -23,6 +24,8 @@
             this.$el.modal('hide');
         }
     });
+
+    return modal;
 });
 
 

UI/app.js

@@ -26,7 +26,7 @@ require.config({
     }
 });
 
-define('app', function () {
+define('app', ['shared/modal/region'], function (ModalRegion) {
 
     window.NzbDrone = new Backbone.Marionette.Application();
     window.NzbDrone.Config = {};
@@ -49,6 +49,10 @@ define('app', function () {
         RootFolders: {}
     };
 
+    window.NzbDrone.Episode = {
+        Search: {}
+    };
+
 
     window.NzbDrone.Quality = {};
 
@@ -77,9 +81,6 @@ define('app', function () {
     window.NzbDrone.History = {};
 
     window.NzbDrone.Events = {
-        //TODO: Move to commands
-        OpenModalDialog : 'openModal',
-        CloseModalDialog: 'closeModal',
         SeriesAdded     : 'seriesAdded'
     };
 
@@ -99,7 +100,8 @@ define('app', function () {
 
     NzbDrone.addRegions({
         mainRegion        : '#main-region',
-        notificationRegion: '#notification-region'
+        notificationRegion: '#notification-region',
+        modalRegion       : ModalRegion
     });
 
     window.NzbDrone.start();