Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

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

Merged
merged 1 commit into from
Sep 15, 2014
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions src/extensibility/ExtensionManagerDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Belated question @marcelgerber @ingorichter: any idea why this doesn't get snarled up by colliding with the global Ctrl-Tab shortcut for navigating between editors? Is it because we're in a modal dialog here and native menu commands are disabled while a modal is open? (On Windows at least, the menu items themselves remain enabled though, so I'm surprised that doesn't "eat" the key event). Have we tested to make sure this works ok with the non-native HTML menu bar, e.g. on Linux?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works for me on Linux (Ubuntu 14.04).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Answering the 2nd part of my own question -- it does work with HTML menus, because Dialogs disables regular KeyBindingManager handling too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marcelgerber is using "keyup" events here and global shortcuts work on keydown events.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@RaymondLim is right, I didn't get an keydown event for "Tab" key. At first I thought it was a bug...

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],
Expand Down
2 changes: 1 addition & 1 deletion src/htmlContent/extension-manager-dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Expand Down