Navigate through Extension Manager tabs via Ctrl-(Shift)-Tab

adobe · Aug 25, 2014 · df0d86e · df0d86e
1 parent 1775c9a
commit df0d86e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/src/extensibility/ExtensionManagerDialog.js b/src/extensibility/ExtensionManagerDialog.js
@@ -40,6 +40,7 @@ define(function (require, exports, module) {
         InstallExtensionDialog      = require("extensibility/InstallExtensionDialog"),
         AppInit                     = require("utils/AppInit"),
         Async                       = require("utils/Async"),
+        KeyEvent                    = require("utils/KeyEvent"),
         ExtensionManager            = require("extensibility/ExtensionManager"),
         ExtensionManagerView        = require("extensibility/ExtensionManagerView").ExtensionManagerView,
         ExtensionManagerViewModel   = require("extensibility/ExtensionManagerViewModel");
@@ -304,16 +305,36 @@ define(function (require, exports, module) {
         $dlg = dialog.getElement();
         $search = $(".search", $dlg);
         $searchClear = $(".search-clear", $dlg);
-
+
+        function setActiveTab($tab) {
+            models[_activeTabIndex].scrollPos = $(".modal-body", $dlg).scrollTop();
+            $tab.tab("show");
+            $(".modal-body", $dlg).scrollTop(models[_activeTabIndex].scrollPos || 0);
+            $searchClear.click();
+        }
+
         // Dialog tabs
         $dlg.find(".nav-tabs a")
             .on("click", function (event) {
-                models[_activeTabIndex].scrollPos = $(".modal-body", $dlg).scrollTop();
-                $(this).tab("show");
-                $(".modal-body", $dlg).scrollTop(models[_activeTabIndex].scrollPos || 0);
-                $searchClear.click();
+                setActiveTab($(this));
             });
-
+
+        // navigate through tabs via Ctrl-(Shift)-Tab
+        $dlg.on("keyup", function (event) {
+            if (event.keyCode === KeyEvent.DOM_VK_TAB && event.ctrlKey) {
+                var $tabs = $(".nav-tabs a", $dlg),
+                    tabIndex = _activeTabIndex;
+
+                if (event.shiftKey) {
+                    tabIndex--;
+                } else {
+                    tabIndex++;
+                }
+                tabIndex %= $tabs.length;
+                setActiveTab($tabs.eq(tabIndex));
+            }
+        });
+
         // Update & hide/show the notification overlay on a tab's icon, based on its model's notifyCount
         function updateNotificationIcon(index) {
             var model = models[index],

diff --git a/src/htmlContent/extension-manager-dialog.html b/src/htmlContent/extension-manager-dialog.html
@@ -1,4 +1,4 @@
-<div class="extension-manager-dialog modal">
+<div class="extension-manager-dialog modal" tabindex="-1">
     <div class="modal-header">
         <ul class="nav nav-tabs">
             {{#showRegistry}}