Added the 'MoreOptions' button

MeoMix · May 20, 2015 · c7d831a · c7d831a
1 parent 390ea98
commit c7d831a
Show file tree

Hide file tree

Showing 26 changed files with 157 additions and 93 deletions.
diff --git a/Streamus Chrome Extension.csproj b/Streamus Chrome Extension.csproj
@@ -78,10 +78,9 @@
     <Content Include="src\js\common\enum\desktopNotificationDuration.js" />
     <Content Include="src\js\common\lodashMixin.js" />
     <Content Include="src\js\contentScript\interceptor.js" />
-    <Content Include="src\js\foreground\model\contextMenu\contextMenuAction.js" />
     <Content Include="src\js\foreground\model\dialog\createPlaylist.js" />
     <Content Include="src\js\foreground\model\dialog\editPlaylist.js" />
-    <Content Include="src\js\foreground\model\song\songsAction.js" />
+    <Content Include="src\js\foreground\model\song\songActions.js" />
     <Content Include="src\js\foreground\model\video\mediaSourceWrapper.js" />
     <Content Include="src\js\foreground\model\video\sourceBufferWrapper.js" />
     <Content Include="src\js\foreground\enum\keyCode.js" />
@@ -207,8 +206,6 @@
     <Content Include="src\js\test\foreground\view\video\videoSpecLoader.js" />
     <Content Include="src\js\test\foreground\view\video\videoView.spec.js" />
     <Content Include="src\js\test\foreground\view\viewTestUtility.js" />
-    <Content Include="src\js\thirdParty\babel-4.6.6.min.js" />
-    <Content Include="src\js\thirdParty\es6.js" />
     <Content Include="src\js\thirdParty\test\chai.js" />
     <Content Include="src\js\thirdParty\test\mocha.js" />
     <Content Include="src\js\thirdParty\test\sinon.js" />
@@ -320,7 +317,7 @@
     <Content Include="src\js\foreground\model\element\radioButton.js" />
     <Content Include="src\js\foreground\model\element\radioGroup.js" />
     <Content Include="src\js\foreground\model\stream\saveStreamButton.js" />
-    <Content Include="src\js\foreground\model\playlist\playlistAction.js" />
+    <Content Include="src\js\foreground\model\playlist\playlistActions.js" />
     <Content Include="src\js\foreground\model\dialog\exportPlaylist.js" />
     <Content Include="src\js\foreground\model\notification\notification.js" />
     <Content Include="src\js\background\model\tabManager.js" />

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -540,7 +540,7 @@
     "openPatchNotes": {
         "message": "Open patch notes"
     },
-    "moreActions": { 
-        "message":  "More actions"
+    "moreOptions": { 
+        "message":  "More options"
     }
 }
diff --git a/src/js/foreground/view/behavior/listItemButton.js b/src/js/foreground/view/behavior/listItemButton.js
@@ -15,43 +15,31 @@
             }
         },
 
-        initialize: function() {
-            //  TODO: I still don't rly believe this.
-            //  Debounced to defend against accidental/spam clicking. Bound in initialize because
-            //  the debounce timer will be shared between all ListItemButtonViews if bound before initialize.
-            this._debounceOnClickAction = _.debounce(this._doOnClickAction.bind(this), 100, true);
-        },
-
         onRender: function() {
             //  Prefer setting these in initialize, but currently $el is not available in behaviors until render.
             this.$el.addClass('listItem-button button button--icon button--icon--secondary button--medium');
             this.$el.attr('data-ui', 'tooltipable');
         },
 
-        //  TODO: I actually do need to have these bubble up because global events don't fire.
-        _onClick: function() {
-            this._debounceOnClickAction();
-            //  Since returning false, need to announce the event happened here since root level won't know about it.
-            Streamus.channels.element.vent.trigger('click', event);
+        _onClick: function(event) {
+            this._announceClick(event);
             //  Don't allow click to bubble up since handling click at this level.
             return false;
         },
 
-        _onDblClick: function() {
-            this._debounceOnClickAction();
-            //  Since returning false, need to announce the event happened here since root level won't know about it.
-            Streamus.channels.element.vent.trigger('click', event);
+        _onDblClick: function(event) {
+            this._announceClick(event);
             //  Don't allow dblClick to bubble up since handling click at this level.
             return false;
         },
 
-        _debounceOnClickAction: null,
-
-        _doOnClickAction: function() {
+        _announceClick: function(event) {
             //  TODO: Prefer not to check hasClass and leverage state of a model.
             if (!this.$el.hasClass('is-disabled')) {
-                this.view.doOnClickAction();
+                this.view.triggerMethod('Click');
             }
+            //  Since returning false, need to announce the event happened here since root level won't know about it.
+            Streamus.channels.element.vent.trigger('click', event);
         }
     });
 

diff --git a/src/js/foreground/view/behavior/sortable.js b/src/js/foreground/view/behavior/sortable.js
@@ -131,7 +131,11 @@
                 this.view.triggerMethod('GetMinRenderIndex');
             } else {
                 //  _.defer allows for jQuery UI to finish interacting with the element. Without this, CSS animations do not run.
-                _.defer(this._cleanup.bind(this));
+                _.defer(function() {
+                    if (!this.view.isDestroyed) {
+                        this._cleanup();
+                    }
+                }.bind(this));
             }
 
             //  Return false from stop to prevent jQuery UI from moving HTML for us - only need to prevent during copies and not during moves.

diff --git a/src/js/foreground/view/leftPane/playlistItemView.js b/src/js/foreground/view/leftPane/playlistItemView.js
@@ -7,6 +7,7 @@
     var AddSongButtonView = require('foreground/view/listItemButton/addSongButtonView');
     var DeleteListItemButtonView = require('foreground/view/listItemButton/deleteListItemButtonView');
     var PlayPauseSongButtonView = require('foreground/view/listItemButton/playPauseSongButtonView');
+    var SongOptionsButtonView = require('foreground/view/listItemButton/songOptionsButtonView');
     var PlaylistItemTemplate = require('text!template/leftPane/playlistItem.html');
     var Tooltipable = require('foreground/view/behavior/tooltipable');
     var SongActions = require('foreground/model/song/songActions');
@@ -48,6 +49,10 @@
                 DeleteListItemButtonView: {
                     viewClass: DeleteListItemButtonView,
                     model: this.model
+                },
+                SongOptionsButtonView: {
+                    viewClass: SongOptionsButtonView,
+                    model: this.model.get('song')
                 }
             };
         },

diff --git a/src/js/foreground/view/listItemButton/addPlaylistButtonView.js b/src/js/foreground/view/listItemButton/addPlaylistButtonView.js
@@ -41,6 +41,11 @@
             this._setState();
         },
 
+        onClick: function() {
+            var songs = this.model.get('items').pluck('song');
+            this.streamItems.addSongs(songs);
+        },
+
         _onPlaylistItemsAddCompleted: function() {
             this._setState();
         },
@@ -81,11 +86,6 @@
             }
 
             this.$el.attr('data-tooltip-text', tooltipText);
-        },
-
-        doOnClickAction: function() {
-            var songs = this.model.get('items').pluck('song');
-            this.streamItems.addSongs(songs);
         }
     });
 

diff --git a/src/js/foreground/view/listItemButton/addSongButtonView.js b/src/js/foreground/view/listItemButton/addSongButtonView.js
@@ -33,7 +33,7 @@
             this._setState();
         },
 
-        doOnClickAction: function() {
+        onClick: function() {
             this.streamItems.addSongs(this.model);
         },
 

diff --git a/src/js/foreground/view/listItemButton/deleteListItemButtonView.js b/src/js/foreground/view/listItemButton/deleteListItemButtonView.js
@@ -23,10 +23,14 @@
 
         initialize: function() {
             //  Ensure that the user isn't able to destroy the model more than once.
-            this.doOnClickAction = _.once(this.doOnClickAction);
+            this._deleteListItem = _.once(this._deleteListItem);
         },
 
-        doOnClickAction: function() {
+        onClick: function() {
+            this._deleteListItem();
+        },
+
+        _deleteListItem: function() {
             this.model.destroy();
         }
     });

diff --git a/src/js/foreground/view/listItemButton/deletePlaylistButtonView.js b/src/js/foreground/view/listItemButton/deletePlaylistButtonView.js
@@ -26,10 +26,14 @@
             this._setState();
 
             //  Ensure that the user isn't able to destroy the model more than once.
-            this.doOnClickAction = _.once(this.doOnClickAction);
+            this._deletePlaylist = _.once(this._deletePlaylist);
         },
 
-        doOnClickAction: function() {
+        onClick: function() {
+            this._deletePlaylist();
+        },
+
+        _deletePlaylist: function() {
             var playlistActions = new PlaylistActions();
 
             playlistActions.deletePlaylist(this.model);

diff --git a/src/js/foreground/view/listItemButton/moreActionsButtonView.js b/src/js/foreground/view/listItemButton/moreActionsButtonView.js
diff --git a/src/js/foreground/view/listItemButton/playPauseSongButtonView.js b/src/js/foreground/view/listItemButton/playPauseSongButtonView.js
@@ -42,7 +42,7 @@
             this._setState();
         },
 
-        doOnClickAction: function() {
+        onClick: function() {
             var isPausable = this._isPausable();
 
             if (isPausable) {

diff --git a/src/js/foreground/view/listItemButton/playPlaylistButtonView.js b/src/js/foreground/view/listItemButton/playPlaylistButtonView.js
@@ -34,7 +34,7 @@
             this._setState(this.model.get('items').isEmpty());
         },
 
-        doOnClickAction: function() {
+        onClick: function() {
             var songs = this.model.get('items').pluck('song');
 
             this.streamItems.addSongs(songs, {

diff --git a/src/js/foreground/view/listItemButton/playlistOptionsButtonView.js b/src/js/foreground/view/listItemButton/playlistOptionsButtonView.js
@@ -0,0 +1,33 @@
+define(function(require) {
+    'use strict';
+
+    var ListItemButton = require('foreground/view/behavior/listItemButton');
+    var PlaylistActions = require('foreground/model/playlist/playlistActions');
+    var OptionsListItemButtonTemplate = require('text!template/listItemButton/optionsListItemButton.html');
+    var OptionsIconTemplate = require('text!template/icon/optionsIcon_18.svg');
+
+    var PlaylistOptionsButtonView = Marionette.ItemView.extend({
+        template: _.template(OptionsListItemButtonTemplate),
+        templateHelpers: {
+            optionsIcon: _.template(OptionsIconTemplate)()
+        },
+
+        attributes: {
+            'data-tooltip-text': chrome.i18n.getMessage('moreOptions')
+        },
+
+        behaviors: {
+            ListItemButton: {
+                behaviorClass: ListItemButton
+            }
+        },
+
+        onClick: function() {
+            var offset = this.$el.offset();
+            var playlistActions = new PlaylistActions();
+            playlistActions.showContextMenu(this.model, offset.top, offset.left);
+        }
+    });
+
+    return PlaylistOptionsButtonView;
+});
diff --git a/src/js/foreground/view/listItemButton/saveSongButtonView.js b/src/js/foreground/view/listItemButton/saveSongButtonView.js
@@ -29,7 +29,7 @@
             this._setState();
         },
 
-        doOnClickAction: function() {
+        onClick: function() {
             var songActions = new SongActions();
             var offset = this.$el.offset();
             var playlists = this.signInManager.get('signedInUser').get('playlists');

diff --git a/src/js/foreground/view/listItemButton/songOptionsButtonView.js b/src/js/foreground/view/listItemButton/songOptionsButtonView.js
@@ -0,0 +1,33 @@
+define(function(require) {
+    'use strict';
+
+    var ListItemButton = require('foreground/view/behavior/listItemButton');
+    var SongActions = require('foreground/model/song/songActions');
+    var OptionsListItemButtonTemplate = require('text!template/listItemButton/optionsListItemButton.html');
+    var OptionsIconTemplate = require('text!template/icon/optionsIcon_18.svg');
+
+    var SongOptionsButtonView = Marionette.ItemView.extend({
+        template: _.template(OptionsListItemButtonTemplate),
+        templateHelpers: {
+            optionsIcon: _.template(OptionsIconTemplate)()
+        },
+
+        attributes: {
+            'data-tooltip-text': chrome.i18n.getMessage('moreOptions')
+        },
+
+        behaviors: {
+            ListItemButton: {
+                behaviorClass: ListItemButton
+            }
+        },
+
+        onClick: function() {
+            var offset = this.$el.offset();
+            var songActions = new SongActions();
+            songActions.showContextMenu(this.model, offset.top, offset.left, this.player);
+        }
+    });
+
+    return SongOptionsButtonView;
+});
diff --git a/src/js/foreground/view/notification/notificationView.js b/src/js/foreground/view/notification/notificationView.js
@@ -15,7 +15,9 @@
             //  Defer binding event listeners which will hide this view to ensure that events which
             //  were responsible for showing it do not also result in hiding.
             _.defer(function() {
-                this.listenTo(Streamus.channels.element.vent, 'click', this._onElementClick);
+                if (!this.isDestroyed) {
+                    this.listenTo(Streamus.channels.element.vent, 'click', this._onElementClick);
+                }
             }.bind(this));
         },
 

diff --git a/src/js/foreground/view/playlist/playlistView.js b/src/js/foreground/view/playlist/playlistView.js
@@ -6,6 +6,7 @@
     var AddPlaylistButtonView = require('foreground/view/listItemButton/addPlaylistButtonView');
     var DeletePlaylistButtonView = require('foreground/view/listItemButton/deletePlaylistButtonView');
     var PlayPlaylistButtonView = require('foreground/view/listItemButton/playPlaylistButtonView');
+    var PlaylistOptionsButtonView = require('foreground/view/listItemButton/playlistOptionsButtonView');
     var PlaylistActions = require('foreground/model/playlist/playlistActions');
     var PlaylistTemplate = require('text!template/playlist/playlist.html');
 
@@ -45,6 +46,10 @@
                 DeletePlaylistButtonView: {
                     viewClass: DeletePlaylistButtonView,
                     model: this.model
+                },
+                PlaylistOptionsButtonView: {
+                    viewClass: PlaylistOptionsButtonView,
+                    model: this.model
                 }
             };
         },

diff --git a/src/js/foreground/view/search/searchResultView.js b/src/js/foreground/view/search/searchResultView.js
@@ -6,6 +6,7 @@
     var AddSongButtonView = require('foreground/view/listItemButton/addSongButtonView');
     var PlayPauseSongButtonView = require('foreground/view/listItemButton/playPauseSongButtonView');
     var SaveSongButtonView = require('foreground/view/listItemButton/saveSongButtonView');
+    var SongOptionsButtonView = require('foreground/view/listItemButton/songOptionsButtonView');
     var SearchResultTemplate = require('text!template/search/searchResult.html');
     var SongActions = require('foreground/model/song/songActions');
 
@@ -40,6 +41,10 @@
                     viewClass: SaveSongButtonView,
                     model: this.model.get('song'),
                     signInManager: Streamus.backgroundPage.signInManager
+                },
+                SongOptionsButtonView: {
+                    viewClass: SongOptionsButtonView,
+                    model: this.model.get('song')
                 }
             };
         },

diff --git a/src/js/foreground/view/simpleMenu/simpleMenuView.js b/src/js/foreground/view/simpleMenu/simpleMenuView.js
@@ -28,11 +28,13 @@
             //  Defer binding event listeners which will hide this view to ensure that events which
             //  were responsible for showing it do not also result in hiding.
             _.defer(function() {
-                this.listenTo(Streamus.channels.element.vent, 'click', this._onElementClick);
-                this.listenTo(Streamus.channels.element.vent, 'drag', this._onElementDrag);
+                if (!this.isDestroyed) {
+                    this.listenTo(Streamus.channels.element.vent, 'click', this._onElementClick);
+                    this.listenTo(Streamus.channels.element.vent, 'drag', this._onElementDrag);
 
-                if (this.model.get('isContextMenu')) {
-                    this.listenTo(Streamus.channels.element.vent, 'contextMenu', this._onElementContextMenu);
+                    if (this.model.get('isContextMenu')) {
+                        this.listenTo(Streamus.channels.element.vent, 'contextMenu', this._onElementContextMenu);
+                    }
                 }
             }.bind(this));
         },