Refactored out ContextMenu in favor of generic SimpleMenu

MeoMix · May 19, 2015 · cd82cdd · cd82cdd
1 parent 402486e
commit cd82cdd
Show file tree

Hide file tree

Showing 35 changed files with 202 additions and 375 deletions.
diff --git a/Streamus Chrome Extension.csproj b/Streamus Chrome Extension.csproj
@@ -214,6 +214,8 @@
     <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" />

diff --git a/src/js/foreground/application.js b/src/js/foreground/application.js
@@ -13,7 +13,6 @@
             foreground: Backbone.Wreqr.radio.channel('foreground'),
             foregroundArea: Backbone.Wreqr.radio.channel('foregroundArea'),
             window: Backbone.Wreqr.radio.channel('window'),
-            contextMenu: Backbone.Wreqr.radio.channel('contextMenu'),
             playlistsArea: Backbone.Wreqr.radio.channel('playlistsArea'),
             search: Backbone.Wreqr.radio.channel('search'),
             activeStreamItemArea: Backbone.Wreqr.radio.channel('activeStreamItemArea'),

diff --git a/src/js/foreground/collection/contextMenu/contextMenuItems.js b/src/js/foreground/collection/contextMenu/contextMenuItems.js
diff --git a/src/js/foreground/model/contextMenu/contextMenu.js b/src/js/foreground/model/contextMenu/contextMenu.js
diff --git a/src/js/foreground/model/contextMenu/contextMenuAction.js b/src/js/foreground/model/contextMenu/contextMenuAction.js
@@ -7,17 +7,22 @@
             player: null
         },
 
-        showContextMenu: function() {
-            Streamus.channels.contextMenu.commands.trigger('reset:items', [{
-                text: chrome.i18n.getMessage('copyUrl'),
-                onClick: this._copyUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('copyTitleAndUrl'),
-                onClick: this._copyTitleAndUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('watchOnYouTube'),
-                onClick: this._watchOnYouTube.bind(this)
-            }]);
+        showContextMenu: function(top, left) {
+            Streamus.channels.simpleMenu.commands.trigger('show:simpleMenu', {
+                isContextMenu: true,
+                top: top,
+                left: left,
+                items: [{
+                    text: chrome.i18n.getMessage('copyUrl'),
+                    onClick: this._copyUrl.bind(this)
+                }, {
+                    text: chrome.i18n.getMessage('copyTitleAndUrl'),
+                    onClick: this._copyTitleAndUrl.bind(this)
+                }, {
+                    text: chrome.i18n.getMessage('watchOnYouTube'),
+                    onClick: this._watchOnYouTube.bind(this)
+                }]
+            });
         },
 
         _copyUrl: function() {

diff --git a/src/js/foreground/model/contextMenu/contextMenuItem.js b/src/js/foreground/model/contextMenu/contextMenuItem.js
diff --git a/src/js/foreground/model/element/simpleMenu.js b/src/js/foreground/model/element/simpleMenu.js
@@ -5,7 +5,15 @@
         defaults: {
             simpleMenuItems: null,
             fixedMenuItem: null,
-            listItemHeight: 0
+            listItemHeight: 0,
+            isContextMenu: false,
+            reposition: false,
+            repositionData: {
+                top: 0,
+                left: 0,
+                containerHeight: 0,
+                containerWidth: 0
+            }
         }
     });
 

diff --git a/src/js/foreground/model/element/simpleMenuItem.js b/src/js/foreground/model/element/simpleMenuItem.js
@@ -4,8 +4,13 @@
     var SimpleMenuItem = Backbone.Model.extend({
         defaults: {
             text: '',
+            tooltipText: '',
             value: '',
-            selected: false
+            selected: false,
+            active: false,
+            disabled: false,
+            //  TODO: This is a bit odd.
+            onClick: _.noop
         }
     });
 

diff --git a/src/js/foreground/view/contextMenu/contextMenuItemView.js b/src/js/foreground/view/contextMenu/contextMenuItemView.js
diff --git a/src/js/foreground/view/contextMenu/contextMenuItemsView.js b/src/js/foreground/view/contextMenu/contextMenuItemsView.js
diff --git a/src/js/foreground/view/contextMenu/contextMenuRegion.js b/src/js/foreground/view/contextMenu/contextMenuRegion.js
diff --git a/src/js/foreground/view/contextMenu/contextMenuView.js b/src/js/foreground/view/contextMenu/contextMenuView.js
diff --git a/src/js/foreground/view/element/simpleMenuItemView.js b/src/js/foreground/view/element/simpleMenuItemView.js
@@ -1,26 +1,55 @@
 define(function(require) {
     'use strict';
 
+    var Tooltipable = require('foreground/view/behavior/tooltipable');
     var MenuItemTemplate = require('text!template/element/menuItem.html');
 
     var SimpleMenuItemView = Marionette.LayoutView.extend({
-        className: 'listItem listItem--small listItem--selectable listItem--clickable',
+        className: function() {
+            //  TODO: What is listItem--selectable getting us that --clickable is not?
+            var className = 'listItem listItem--small listItem--selectable listItem--clickable';
+            className += this.model.get('disabled') ? ' is-disabled' : '';
+            return className;
+        },
         template: _.template(MenuItemTemplate),
 
+        attributes: function() {
+            return {
+                'data-ui': 'tooltipable',
+                'data-tooltip-text': this.model.get('tooltipText')
+            };
+        },
+
         events: {
             'click': '_onClick'
         },
 
+        behaviors: {
+            Tooltipable: {
+                behaviorClass: Tooltipable
+            }
+        },
+
         onRender: function() {
             this._setState(this.model.get('active'));
         },
 
         _onClick: function() {
-            this.model.set('active', true);
-            this.triggerMethod('click:simpleMenuItem', {
-                view: this,
-                model: this.model
-            });
+            var enabled = !this.model.get('disabled');
+
+            if (enabled) {
+                //  TODO: I think I need to make a distinction between menu items which have click events and those which have values that need to be propagated.
+                this.model.get('onClick')();
+
+                this.model.set('active', true);
+                this.triggerMethod('click:simpleMenuItem', {
+                    view: this,
+                    model: this.model
+                });
+            }
+
+            //  Return false to prevent the view from closing which emulates how native, disabled contextMenu views work when clicked.
+            return enabled;
         },
 
         _onChangeActive: function(model, active) {