Added shortcuts Action+Opt+Up/Down to navigate menu

app/scripts/comp/key-handler.js

@@ -56,6 +56,9 @@ const KeyHandler = {
                     case this.SHORTCUT_OPT:
                         if (!e.altKey) { continue; }
                         break;
+                    case this.SHORTCUT_ACTION + this.SHORTCUT_OPT:
+                        if (!e.altKey || !isActionKey) { continue; }
+                        break;
                     default:
                         if (e.metaKey || e.ctrlKey || e.altKey) { continue; }
                         break;

app/scripts/models/menu/menu-model.js

@@ -59,6 +59,8 @@ const MenuModel = Backbone.Model.extend({
         this.set('sections', this.menus.app);
 
         this.listenTo(Backbone, 'set-locale', this._setLocale);
+        this.listenTo(Backbone, 'select-next-menu-item', this._selectNext);
+        this.listenTo(Backbone, 'select-previous-menu-item', this._selectPrevious);
         this._setLocale();
     },
 
@@ -79,6 +81,65 @@ const MenuModel = Backbone.Model.extend({
         }
     },
 
+    _selectPrevious: function() {
+        const _this = this;
+        let previousItem = null;
+
+        function processSection(section){
+            if(section.has('visible') && !section.get('visible')) {
+                return true;
+            }
+            if(section.has('active')) {
+                previousItem = section;
+            }
+            const items = section.get('items');
+            if (items) {
+                items.forEach(function(it) {
+                    if (it.get('active') && previousItem) {
+                        _this.select({item: previousItem});
+                        return false;
+                    }
+                    return processSection(it);
+                }, this);
+            }
+        }
+
+        const sections = this.get('sections');
+        sections.forEach(function(section) { 
+            return processSection(section);
+        }, this);
+    },
+
+    _selectNext: function() {
+        const _this = this;
+        let activeItem = null;
+
+        function processSection(section){
+            if(section.has('visible') && !section.get('visible')) {
+                return true;
+            }
+            if(section.has('active') && activeItem && (section !== activeItem)) {
+                _this.select({item: section});
+                activeItem = null;
+                return false;
+            }
+            const items = section.get('items');
+            if (items) {
+                items.forEach(function(it) {
+                    if (it.get('active')) {
+                        activeItem = it;
+                    }
+                    return processSection(it);
+                }, this);
+            }
+        }
+
+        const sections = this.get('sections');
+        sections.forEach(function(section) { 
+            return processSection(section);
+        }, this);
+    },
+
     _select: function(item, selectedItem) {
         const items = item.get('items');
         if (items) {

app/scripts/views/menu/menu-view.js

@@ -1,4 +1,6 @@
 const Backbone = require('backbone');
+const Keys = require('../../const/keys');
+const KeyHandler = require('../../comp/key-handler');
 const Resizable = require('../../mixins/resizable');
 const MenuSectionView = require('./menu-section-view');
 const DragView = require('../drag-view');
@@ -17,6 +19,8 @@ const MenuView = Backbone.View.extend({
     initialize: function () {
         this.listenTo(this.model, 'change:sections', this.menuChanged);
         this.listenTo(this, 'view-resize', this.viewResized);
+        KeyHandler.onKey(Keys.DOM_VK_UP, this.selectPreviousSection, this, KeyHandler.SHORTCUT_ACTION + KeyHandler.SHORTCUT_OPT);
+        KeyHandler.onKey(Keys.DOM_VK_DOWN, this.selectNextSection, this, KeyHandler.SHORTCUT_ACTION + KeyHandler.SHORTCUT_OPT);
     },
 
     remove: function() {
@@ -56,6 +60,14 @@ const MenuView = Backbone.View.extend({
 
     switchVisibility: function(visible) {
         this.$el.toggleClass('menu-visible', visible);
+    },
+
+    selectPreviousSection: function() {
+        Backbone.trigger('select-previous-menu-item');
+    },
+
+    selectNextSection: function() {
+        Backbone.trigger('select-next-menu-item');
     }
 });