IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add keyboard navigation in Query tool module via Tab/Shift-Tab key. Fixes #2896

Browse Source 
Note:
1) Once the keyboard shortcut infrastructure is ready we will add generic shortcut to focus out from CodeMirror editor and set foucs to next element, Right now there is no way of doing this, For testing purpose you can manually focus out from CodeMirror and click on data output panel to continue navigate using Tab key.
2) As of now inner panel's are not getting focused on Tab/Shift-Tab keys but once RM#2895 patch gets committed it will start working automatically as it's inherited code which will add tabindex tag automatically on each newly created wcDocker panel.
This commit is contained in:
Murtuza Zabuawala
2018-01-25 12:27:13 +00:00
committed by Dave Page
parent 5cea5f8485
commit 97760d65c2
11 changed files with 228 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
web/pgadmin/static/js/keyboard_shortcuts.js
View File

@@ -1,8 +1,14 @@
import $ from 'jquery';
// Debugger
const EDIT_KEY = 71, // Key: G -> Grid values
LEFT_ARROW_KEY = 37,
RIGHT_ARROW_KEY = 39;
RIGHT_ARROW_KEY = 39,
F5_KEY = 116,
F7_KEY = 118,
F8_KEY = 119,
PERIOD_KEY = 190,
FWD_SLASH_KEY = 191;
function isMac() {
return window.navigator.platform.search('Mac') != -1;
@@ -103,8 +109,62 @@ function getInnerPanel($el, direction) {
return id;
}
/* Query tool: Keyboard Shortcuts handling */
function keyboardShortcutsQueryTool(sqlEditorController, queryToolActions, event) {
if (sqlEditorController.isQueryRunning()) {
return;
}
let keyCode = event.which || event.keyCode, panel_id;
if (keyCode === F5_KEY) {
event.preventDefault();
queryToolActions.executeQuery(sqlEditorController);
} else if (event.shiftKey && keyCode === F7_KEY) {
this._stopEventPropagation(event);
queryToolActions.explainAnalyze(sqlEditorController);
} else if (keyCode === F7_KEY) {
this._stopEventPropagation(event);
queryToolActions.explain(sqlEditorController);
} else if (keyCode === F8_KEY) {
event.preventDefault();
queryToolActions.download(sqlEditorController);
} else if ((
(this.isMac() && event.metaKey) ||
(!this.isMac() && event.ctrlKey)
) && !event.altKey && event.shiftKey && keyCode === FWD_SLASH_KEY) {
this._stopEventPropagation(event);
queryToolActions.commentBlockCode(sqlEditorController);
} else if ((
(this.isMac() && !this.isKeyCtrlAltShift(event) && event.metaKey) ||
(!this.isMac() && !this.isKeyAltShift(event) && event.ctrlKey)
) && keyCode === FWD_SLASH_KEY) {
this._stopEventPropagation(event);
queryToolActions.commentLineCode(sqlEditorController);
} else if ((
(this.isMac() && !this.isKeyCtrlAltShift(event) && event.metaKey) ||
(!this.isMac() && !this.isKeyAltShift(event) && event.ctrlKey)
) && keyCode === PERIOD_KEY) {
this._stopEventPropagation(event);
queryToolActions.uncommentLineCode(sqlEditorController);
} else if (this.isAltShiftBoth(event) && keyCode === LEFT_ARROW_KEY) {
// Goto previous side panel
this._stopEventPropagation(event);
panel_id = this.getInnerPanel(
sqlEditorController.container, 'left'
);
} else if (this.isAltShiftBoth(event) && keyCode === RIGHT_ARROW_KEY) {
// Goto next side panel
this._stopEventPropagation(event);
panel_id = this.getInnerPanel(
sqlEditorController.container, 'right'
);
}
return panel_id;
}
module.exports = {
processEventDebugger: keyboardShortcutsDebugger,
processEventQueryTool: keyboardShortcutsQueryTool,
getInnerPanel: getInnerPanel,
// misc functions
_stopEventPropagation: _stopEventPropagation,