Marionette v3 update

Very basics upgrade to v3. Doesn't really address style or architectural suggestions in v3 (ie: there's stil an App.Vent) but it is using the new lib
nandha46 · Mar 17, 2018 · 04f23ac · 04f23ac
1 parent cb44e3f
commit 04f23ac
Show file tree

Hide file tree

Showing 26 changed files with 150 additions and 154 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -85,6 +85,7 @@
 
         // Third party
         "Backbone": true,
+        "Marionette": true,
         "Mousetrap": true,
         "_": true,
         "request": true,

diff --git a/bower.json b/bower.json
@@ -1,7 +1,8 @@
 {
     "name": "butter",
     "dependencies": {
-        "marionette": "~2.x.x",
+        "backbone": "1.3.3",
+        "marionette": "~3.x.x",
         "bootstrap": "~3.3.7",
         "video.js": "4.11.4",
         "videojs-youtube": "1.2.10",
@@ -17,8 +18,6 @@
         "underscore": ["**/!(underscore-min.js)"],
         "mousetrap": ["tests", ".gitignore", "./*!mousetrap.min.js"],
         "marionette": ["**/!(lib)"],
-        "backbone.babysitter": ["**/!(lib)"],
-        "backbone.wreqr": ["**/!(lib)"],
         "bootstrap": ["**/!(dist)"]
     },
     "resolutions": {

diff --git a/src/app/app.js b/src/app/app.js
@@ -57,7 +57,9 @@ if (nw.App.fullArgv.indexOf('--reset') !== -1) {
 
 
 // Global App skeleton for backbone
-var App = new Backbone.Marionette.Application();
+var App = new Marionette.Application({
+    region: '.main-window-region'
+});
 _.extend(App, {
     Controller: {},
     View: {},
@@ -68,6 +70,9 @@ _.extend(App, {
     Localization: {}
 });
 
+// Create old v2 style vent
+App.vent = Backbone.Radio.channel('v2-vent');
+
 // set database
 App.db = Database;
 
@@ -81,10 +86,6 @@ fs.readFile('./.git.json', 'utf8', function (err, json) {
     }
 });
 
-App.addRegions({
-    Window: '.main-window-region'
-});
-
 // Menu for mac
 if (os.platform() === 'darwin') {
     var nativeMenuBar = new nw.Menu({
@@ -100,7 +101,7 @@ if (os.platform() === 'darwin') {
 //Keeps a list of stacked views
 App.ViewStack = [];
 
-App.addInitializer(function (options) {
+App.onBeforeStart = function (options) {
     // this is the 'do things with resolutions and size initializer
     var zoom = 0;
 
@@ -147,7 +148,7 @@ App.addInitializer(function (options) {
     win.zoomLevel = zoom;
     win.resizeTo(width, height);
     win.moveTo(x, y);
-});
+};
 
 var initTemplates = function () {
     // Load in external templates
@@ -170,16 +171,16 @@ var initApp = function () {
     win.show();
 
     try {
-        App.Window.show(mainWindow);
+        App.showView(mainWindow);
     } catch (e) {
         console.error('Couldn\'t start app: ', e, e.stack);
     }
 };
 
-App.addInitializer(function (options) {
+App.onStart = function (options) {
     initTemplates()
         .then(initApp);
-});
+};
 
 var deleteFolder = function (path) {
     rimraf(path, function () {});

diff --git a/src/app/httpapi.js b/src/app/httpapi.js
@@ -149,13 +149,13 @@
                     butterCallback(callback, 'Arguments missing');
                 }
 
-                App.Window.currentView.Content.currentView.ItemList.currentView.selectIndex(index);
+                App.getView().Content.currentView.ItemList.currentView.selectIndex(index);
 
                 butterCallback(callback);
             });
 
             server.expose('getselection', function (args, opt, callback) {
-                var movieView = App.Window.currentView.MovieDetail.currentView;
+                var movieView = App.getView().MovieDetail.currentView;
                 if (movieView === undefined || movieView.model === undefined) {
                     var index = $('.item.selected').index();
                     if (args.length > 0) {
@@ -165,7 +165,7 @@
                             index = 0;
                         }
                     }
-                    var result = App.Window.currentView.Content.currentView.ItemList.currentView.collection.models[index];
+                    var result = App.getView().Content.currentView.ItemList.currentView.collection.models[index];
                     if (result === undefined) {
                         butterCallback(callback, 'Index not found');
                     }
@@ -252,7 +252,7 @@
             });
 
             server.expose('getcurrentlist', function (args, opt, callback) {
-                var collection = App.Window.currentView.Content.currentView.ItemList.currentView.collection;
+                var collection = App.getView().Content.currentView.ItemList.currentView.collection;
                 var result = collection.models;
                 var page = 0;
                 if (args.length > 0) {
@@ -267,7 +267,7 @@
                                     'type': result[0].get('type'),
                                     'list': result,
                                     'page': page,
-                                    'max_page': App.Window.currentView.Content.currentView.ItemList.currentView.collection.filter.page
+                                    'max_page': App.getView().Content.currentView.ItemList.currentView.collection.filter.page
                                 });
                             } else {
                                 collection.fetchMore();
@@ -280,11 +280,11 @@
                             'type': result[0].get('type'),
                             'list': result,
                             'page': page,
-                            'max_page': App.Window.currentView.Content.currentView.ItemList.currentView.collection.filter.page
+                            'max_page': App.getView().Content.currentView.ItemList.currentView.collection.filter.page
                         });
                     }
                 } else {
-                    page = App.Window.currentView.Content.currentView.ItemList.currentView.collection.filter.page;
+                    page = App.getView().Content.currentView.ItemList.currentView.collection.filter.page;
                     butterCallback(callback, false, {
                         'type': result[0].get('type'),
                         'list': result,
@@ -391,7 +391,7 @@
                     return;
                 }
 
-                var movieView = App.Window.currentView.MovieDetail.currentView;
+                var movieView = App.getView().MovieDetail.currentView;
                 if (movieView === undefined || movieView.model === undefined || movieView.model.type === 'movie') {
                     butterCallback(callback, 'View not open');
                     return;

diff --git a/src/app/index.html b/src/app/index.html
@@ -43,8 +43,7 @@
 	<script src="vendor/jquery/dist/jquery.min.js"></script>
 	<script src="vendor/underscore/underscore-min.js"></script>
 	<script src="vendor/backbone/backbone-min.js"></script>
-	<script src="vendor/backbone.wreqr/lib/backbone.wreqr.min.js"></script>
-	<script src="vendor/backbone.babysitter/lib/backbone.babysitter.min.js"></script>
+	<script src="vendor/backbone.radio/build/backbone.radio.min.js"></script>
 	<script src="vendor/marionette/lib/backbone.marionette.min.js"></script>
 	<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
 	<script src="vendor/mousetrap/mousetrap.min.js"></script>

diff --git a/src/app/lib/device/generic.js b/src/app/lib/device/generic.js
@@ -126,7 +126,7 @@
     var collection = new DeviceCollection(new Device());
     collection.setDevice('local');
 
-    var ChooserView = Backbone.Marionette.ItemView.extend({
+    var ChooserView = Marionette.View.extend({
         template: '#player-chooser-tpl',
         events: {
             'click .playerchoicemenu li a': 'selectPlayer'

diff --git a/src/app/lib/views/about.js b/src/app/lib/views/about.js
@@ -1,7 +1,7 @@
 (function (App) {
     'use strict';
 
-    var About = Backbone.Marionette.ItemView.extend({
+    var About = Marionette.View.extend({
         template: '#about-tpl',
         className: 'about',
 
@@ -15,7 +15,7 @@
             'click .title-issue': 'reportIssue'
         },
 
-        onShow: function () {
+        onAttach: function () {
             $('.filter-bar').hide();
             $('#header').addClass('header-shadow');
 
@@ -27,7 +27,7 @@
             $('#movie-detail').hide();
         },
 
-        onDestroy: function () {
+        onBeforeDestroy: function () {
             Mousetrap.unbind(['esc', 'backspace']);
             $('.filter-bar').show();
             $('#header').removeClass('header-shadow');

diff --git a/src/app/lib/views/browser/filter_bar.js b/src/app/lib/views/browser/filter_bar.js
@@ -2,7 +2,7 @@
     'use strict';
     var clipboard = nw.Clipboard.get();
 
-    App.View.FilterBar = Backbone.Marionette.ItemView.extend({
+    App.View.FilterBar = Marionette.View.extend({
         className: 'filter-bar',
         ui: {
             searchForm: '.search form',
@@ -134,7 +134,7 @@
 
             return menu;
         },
-        onShow: function () {
+        onAttach: function () {
 
             var activetab;
 

diff --git a/src/app/lib/views/browser/generic_browser.js b/src/app/lib/views/browser/generic_browser.js
@@ -9,7 +9,7 @@
      *  * Show movie detail
      *  * Start playing a movie
      */
-    var PCTBrowser = Backbone.Marionette.LayoutView.extend({
+    var PCTBrowser = Marionette.View.extend({
         template: '#browser-tpl',
         className: 'main-browser',
         regions: {
@@ -34,7 +34,7 @@
 
         },
 
-        onShow: function () {
+        onAttach: function () {
             if (Settings.rememberFilters) {
                 this.filter.set(this.getSavedFilter());
             }
@@ -43,9 +43,9 @@
                 model: this.filter
             });
 
-            this.FilterBar.show(this.bar);
+            this.showChildView('FilterBar', this.bar);
 
-            this.ItemList.show(new App.View.List({
+            this.showChildView('ItemList', new App.View.List({
                 collection: this.collection
             }));
 
@@ -68,7 +68,7 @@
             App.vent.trigger('show:closeDetail');
             this.collection.fetch();
 
-            this.ItemList.show(new App.View.List({
+            this.showChildView('ItemList', new App.View.List({
                 collection: this.collection
             }));
         },

diff --git a/src/app/lib/views/browser/item.js b/src/app/lib/views/browser/item.js
@@ -4,7 +4,7 @@
     var prevX = 0;
     var prevY = 0;
 
-    var Item = Backbone.Marionette.ItemView.extend({
+    var Item = Marionette.View.extend({
         template: '#item-tpl',
 
         tagName: 'li',
@@ -77,7 +77,7 @@
             }
         },
 
-        onShow: function () {
+        onAttach: function () {
             this.ui.coverImage.on('load', _.bind(this.showCover, this));
         },
 
@@ -89,7 +89,7 @@
 
         },
 
-        onDestroy: function () {
+        onBeforeDestroy: function () {
             this.ui.coverImage.off('load');
         },
 

diff --git a/src/app/lib/views/browser/list.js b/src/app/lib/views/browser/list.js
@@ -21,7 +21,7 @@
         return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
     }
 
-    var ErrorView = Backbone.Marionette.ItemView.extend({
+    var ErrorView = Marionette.View.extend({
         template: '#movie-error-tpl',
         ui: {
             retryButton: '.retry-button',
@@ -73,7 +73,7 @@
             return !this.collection.length && this.collection.state !== 'loading';
         },
 
-        getEmptyView: function () {
+        emptyView: function () {
             switch (App.currentview) {
             case 'movies':
             case 'shows':
@@ -244,7 +244,7 @@
                 });
         },
 
-        onShow: function () {
+        onAttach: function () {
             if (this.collection.state === 'loading') {
                 this.onLoading();
             }
@@ -257,7 +257,12 @@
 
         onLoaded: function () {
             App.vent.trigger('list:loaded');
-            this.checkEmpty();
+
+            // Added for v2-style checkEmpty
+            if (this.isEmpty()) {
+                this._showEmptyView();
+            }
+
             var self = this;
             this.addloadmore();
 

diff --git a/src/app/lib/views/disclaimer.js b/src/app/lib/views/disclaimer.js
@@ -1,7 +1,7 @@
 (function (App) {
     'use strict';
 
-    var DisclaimerModal = Backbone.Marionette.ItemView.extend({
+    var DisclaimerModal = Marionette.View.extend({
         template: '#disclaimer-tpl',
         className: 'disclaimer',
 

diff --git a/src/app/lib/views/file_selector.js b/src/app/lib/views/file_selector.js
@@ -4,7 +4,7 @@
     var that,
         formatMagnet;
 
-    var FileSelector = Backbone.Marionette.ItemView.extend({
+    var FileSelector = Marionette.View.extend({
         template: '#file-selector-tpl',
         className: 'file-selector',
 
@@ -36,7 +36,7 @@
             this.bitsnoopRequest(this.model.get('torrent').infoHash);
         },
 
-        onShow: function () {
+        onAttach: function () {
             this.isTorrentStored();
 
             Mousetrap.bind(['esc', 'backspace'], function (e) {
@@ -176,7 +176,7 @@
             App.vent.trigger('system:closeFileSelector');
         },
 
-        onDestroy: function () {
+        onBeforeDestroy: function () {
             Settings.droppedTorrent = false;
             Settings.droppedMagnet = false;
             Settings.droppedStoredMagnet = false;

diff --git a/src/app/lib/views/help.js b/src/app/lib/views/help.js
@@ -2,7 +2,7 @@
     'use strict';
     var dyks;
 
-    var Help = Backbone.Marionette.ItemView.extend({
+    var Help = Marionette.View.extend({
         template: '#help-tpl',
         className: 'help',
 
@@ -27,7 +27,7 @@
             ];
         },
 
-        onShow: function () {
+        onAttach: function () {
             $('.search input').blur();
             Mousetrap.bind('esc', function (e) {
                 App.vent.trigger('help:close');
@@ -40,7 +40,7 @@
             App.vent.trigger('issue:new');
         },
 
-        onDestroy: function () {},
+        onBeforeDestroy: function () {},
 
         closeHelp: function () {
             App.vent.trigger('help:close');