Refactoring button views to be more flexible!

MeoMix · May 14, 2015 · 562f8ea · 562f8ea
1 parent c32663f
commit 562f8ea
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 29 deletions.
diff --git a/Streamus Chrome Extension.csproj b/Streamus Chrome Extension.csproj
@@ -96,10 +96,10 @@
     <Content Include="src\js\foreground\view\tooltip\tooltipView.js" />
     <Content Include="src\js\foreground\view\video\videoRegion.js" />
     <Content Include="src\js\foreground\view\video\videoView.js" />
-    <Content Include="src\js\test\background\backgroundTests.js" />
+    <Content Include="src\js\test\background\backgroundSpecLoader.js" />
     <Content Include="src\js\test\background\collection\searchResults.spec.js" />
-    <Content Include="src\js\test\common\commonTests.js" />
-    <Content Include="src\js\test\foreground\foregroundTests.js" />
+    <Content Include="src\js\test\common\commonSpecLoader.js" />
+    <Content Include="src\js\test\foreground\foregroundSpecLoader.js" />
     <Content Include="src\js\test\foreground\view\search\searchView.spec.js" />
     <Content Include="src\js\thirdParty\test\chai.js" />
     <Content Include="src\js\thirdParty\test\mocha.js" />

diff --git a/src/js/foreground/view/leftPane/playlistItemView.js b/src/js/foreground/view/leftPane/playlistItemView.js
@@ -32,7 +32,26 @@
             }
         }),
 
-        buttonViews: [PlayPauseSongButtonView, AddSongButtonView, DeleteSongButtonView],
+        buttonViewOptions: function() {
+            return {
+                PlayPauseSongButtonView: {
+                    viewClass: PlayPauseSongButtonView,
+                    options: {
+                        streamItems: Streamus.backgroundPage.stream.get('items'),
+                        player: Streamus.backgroundPage.player
+                    }
+                },
+                AddSongButtonView: {
+                    viewClass: AddSongButtonView,
+                    options: {
+                        streamItems: Streamus.backgroundPage.stream.get('items')
+                    }
+                },
+                DeleteSongButtonView: {
+                    viewClass: DeleteSongButtonView
+                }
+            };
+        },
 
         streamItems: null,
         player: null,

diff --git a/src/js/foreground/view/listItemButton/addPlaylistButtonView.js b/src/js/foreground/view/listItemButton/addPlaylistButtonView.js
@@ -25,8 +25,8 @@
             'reset': '_onPlaylistItemsReset'
         },
 
-        initialize: function() {
-            this.streamItems = Streamus.backgroundPage.stream.get('items');
+        initialize: function(options) {
+            this.streamItems = options.streamItems;
             this.bindEntityEvents(this.streamItems, this.streamItemsEvents);
             this.bindEntityEvents(this.model.get('items'), this.playlistItemsEvents);
 

diff --git a/src/js/foreground/view/listItemButton/addSongButtonView.js b/src/js/foreground/view/listItemButton/addSongButtonView.js
@@ -18,8 +18,8 @@
             'reset': '_onStreamItemsReset'
         },
 
-        initialize: function() {
-            this.streamItems = Streamus.backgroundPage.stream.get('items');
+        initialize: function(options) {
+            this.streamItems = options.streamItems;
             this.bindEntityEvents(this.streamItems, this.streamItemsEvents);
 
             ListItemButtonView.prototype.initialize.apply(this, arguments);

diff --git a/src/js/foreground/view/listItemButton/listItemButtonsView.js b/src/js/foreground/view/listItemButton/listItemButtonsView.js
@@ -5,16 +5,21 @@
     var ListItemButtonsView = Marionette.ItemView.extend({
         className: 'listItem-buttons',
         template: false,
+        buttonViewOptions: null,
+
+        initialize: function(options) {
+            this.buttonViewOptions = _.result(options || {}, 'buttonViewOptions');
+        },
 
         //  Render a collection of button views to keep things DRY between various types of list-items:        
         onRender: function() {
             var documentFragment = document.createDocumentFragment();
             this.shownButtonViews = [];
 
-            _.each(this.options.buttonViews, function(ButtonView) {
-                var buttonView = new ButtonView({
+            _.forIn(this.buttonViewOptions, function(buttonViewOption) {
+                var buttonView = new buttonViewOption.viewClass(_.extend({
                     model: this.model
-                });
+                }, buttonViewOption.options));
 
                 documentFragment.appendChild(buttonView.render().el);
                 buttonView.triggerMethod('show');

diff --git a/src/js/foreground/view/listItemButton/playPauseSongButtonView.js b/src/js/foreground/view/listItemButton/playPauseSongButtonView.js
@@ -17,20 +17,17 @@
             'data-tooltip-text': chrome.i18n.getMessage('play')
         },
 
-        ui: function() {
-            return {
-                playIcon: '.playIcon',
-                pauseIcon: '.pauseIcon'
-            };
+        ui: {
+            playIcon: '.playIcon',
+            pauseIcon: '.pauseIcon'
         },
 
         streamItems: null,
         player: null,
 
-        initialize: function() {
-            this.streamItems = Streamus.backgroundPage.stream.get('items');
-            this.player = Streamus.backgroundPage.player;
-
+        initialize: function(options) {
+            this.streamItems = options.streamItems;
+            this.player = options.player;
             this.listenTo(this.player, 'change:state', this._onPlayerChangeState);
             this.listenTo(this.streamItems, 'change:active', this._onStreamItemsChangeActive);
 

diff --git a/src/js/foreground/view/listItemButton/playPlaylistButtonView.js b/src/js/foreground/view/listItemButton/playPlaylistButtonView.js
@@ -19,8 +19,8 @@
             'reset': '_onPlaylistItemsReset'
         },
 
-        initialize: function() {
-            this.streamItems = Streamus.backgroundPage.stream.get('items');
+        initialize: function(options) {
+            this.streamItems = options.streamItems;
             this.bindEntityEvents(this.model.get('items'), this.playlistItemsEvents);
 
             ListItemButtonView.prototype.initialize.apply(this, arguments);

diff --git a/src/js/foreground/view/listItemButton/saveSongButtonView.js b/src/js/foreground/view/listItemButton/saveSongButtonView.js
@@ -13,8 +13,8 @@
 
         signInManager: null,
 
-        initialize: function() {
-            this.signInManager = Streamus.backgroundPage.signInManager;
+        initialize: function(options) {
+            this.signInManager = options.signInManager;
             this.listenTo(this.signInManager, 'change:signedInUser', this._onSignInManagerChangeSignedInUser);
 
             ListItemButtonView.prototype.initialize.apply(this, arguments);

diff --git a/src/js/foreground/view/listItemView.js b/src/js/foreground/view/listItemView.js
@@ -48,7 +48,7 @@
         _onMouseEnter: function() {
             this.showChildView('buttonsRegion', new ListItemButtonsView({
                 model: this.model,
-                buttonViews: this.buttonViews
+                buttonViewOptions: this.buttonViewOptions
             }));
         },
 

diff --git a/src/js/foreground/view/playlist/playlistView.js b/src/js/foreground/view/playlist/playlistView.js
@@ -31,7 +31,25 @@
             'change:id': '_onChangeId'
         },
 
-        buttonViews: [PlayPlaylistButtonView, AddPlaylistButtonView, DeletePlaylistButtonView],
+        buttonViewOptions: function() {
+            return {
+                PlayPlaylistButtonView: {
+                    viewClass: PlayPlaylistButtonView,
+                    options: {
+                        streamItems: Streamus.backgroundPage.stream.get('items')
+                    }
+                },
+                AddPlaylistButtonView: {
+                    viewClass: AddPlaylistButtonView,
+                    options: {
+                        streamItems: Streamus.backgroundPage.stream.get('items')
+                    }
+                },
+                DeletePlaylistButtonView: {
+                    viewClass: DeletePlaylistButtonView
+                }
+            };
+        },
 
         playlistItemsEvents: {
             'add:completed': '_onPlaylistItemsAddCompleted',

diff --git a/src/js/foreground/view/search/searchResultView.js b/src/js/foreground/view/search/searchResultView.js
@@ -13,8 +13,6 @@
         className: ListItemView.prototype.className + ' search-result listItem--medium listItem--hasButtons listItem--selectable',
         template: _.template(SearchResultTemplate),
 
-        buttonViews: [PlayPauseSongButtonView, AddSongButtonView, SaveSongButtonView],
-
         events: _.extend({}, ListItemView.prototype.events, {
             'dblclick': '_onDblClick'
         }),
@@ -25,6 +23,30 @@
             }
         }),
 
+        buttonViewOptions: function() {
+            return {
+                PlayPauseSongButtonView: {
+                    viewClass: PlayPauseSongButtonView,
+                    options: {
+                        streamItems: Streamus.backgroundPage.stream.get('items'),
+                        player: Streamus.backgroundPage.player
+                    }
+                },
+                AddSongButtonView: {
+                    viewClass: AddSongButtonView,
+                    options: {
+                        streamItems: Streamus.backgroundPage.stream.get('items')
+                    }
+                },
+                SaveSongButtonView: {
+                    viewClass: SaveSongButtonView,
+                    options: {
+                        signInManager: Streamus.backgroundPage.signInManager
+                    }
+                }
+            };
+        },
+
         streamItems: null,
         player: null,
 

diff --git a/src/js/foreground/view/stream/streamItemView.js b/src/js/foreground/view/stream/streamItemView.js
@@ -31,7 +31,26 @@
             }
         }),
 
-        buttonViews: [PlayPauseSongButtonView, SaveSongButtonView, DeleteSongButtonView],
+        buttonViewOptions: function() {
+            return {
+                PlayPauseSongButtonView: {
+                    viewClass: PlayPauseSongButtonView,
+                    options: {
+                        streamItems: Streamus.backgroundPage.stream.get('items'),
+                        player: Streamus.backgroundPage.player
+                    }
+                },
+                SaveSongButtonView: {
+                    viewClass: SaveSongButtonView,
+                    options: {
+                        signInManager: Streamus.backgroundPage.signInManager
+                    }
+                },
+                DeleteSongButtonView: {
+                    viewClass: DeleteSongButtonView
+                }
+            };
+        },
 
         player: null,
         playPauseButton: null,