Implement conditional bindings

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ### Added
 - Add color on the status bar message when key binding entered is not defined
+- Add support for a new conditional type binding, which allows conditional binding execution. See README for more information on how to use it.
 
 ## [0.7.6] - 2020-08-03
 ### Added

README.md

@@ -15,7 +15,7 @@ This extension can be used by itself or be called by other extension.
 
 ### Standalone
 
-This extension comes with a default that didn't have any third-party dependencies. 
+This extension comes with a default that didn't have any third-party dependencies.
 #### Setup: I am using VSCode Vim
 If you want a better default behavior design for VSCode Vim, checkout [VSpaceCode](https://github.com/VSpaceCode/VSpaceCode).
 
@@ -46,7 +46,6 @@ You can also bind a customize menu with Vim directly
   {
     "before": ["<space>"],
     "commands": ["whichkey.show"],
-
   }
 ]
 ```
@@ -101,7 +100,7 @@ The following example will replace/append the whole `<SPC> g` menu with one bind
           "key": "s",
           "name": "Go to",
           "type": "command",
-          "command": "workbench.action.gotoLine",   
+          "command": "workbench.action.gotoLine",
         }
       ]
     }
@@ -241,6 +240,7 @@ This section config extra settings that pertain to both Standalone or With exten
 This section describes a way to use non-character keys in which-key menu like `<tab>` or `Control+D`. `<tab>` is supported out of the box. Follow the following instruction to add support for keys other than `<tab>`.
 
 Merge the following json to your `keybindings.json`.
+
 ```json
 {
   "key": "ctrl+x",
@@ -249,6 +249,7 @@ Merge the following json to your `keybindings.json`.
   "when": "whichkeyActive"
 }
 ```
+
 Once you've done that, you can use `C-x` in the `key` value of the which-key config. Effectively, the above keybinding will enter `C-x` in the QuickPick input box when `ctrl+x` is pressed when the which key is focused.
 
 ### Display menu with a delay
@@ -259,12 +260,169 @@ You can set `whichkey.sortOrder` in `settings.json` to `alphabetically` to alway
 
 ### Unclear selection
 Selected text can be hard to see when which-key menu is active. This could be due to the `inactiveSelectionBackground` config of your current theme. You can selectively override that color in your `settings.json` like the following example.
+
 ```json
 "workbench.colorCustomizations": {
     "editor.inactiveSelectionBackground": "color that works better",
 },
 ```
 
+### Conditional bindings (experimental)
+
+> This is marked as experimental and the config is subject to change.
+
+This allows conditional execution of bindings. Currently, it only supports conditions on the `when` passed from shortcut and `languageId` of the active editor.
+
+- It reuses the similar structure to the `bindings` type.
+- The property `key` in a binding item is reused to represent the condition.
+- The condition can be thought of as a key-value pair serialized into a string.
+
+As an example, a condition in json like
+
+```json
+{
+  "languageId": "javascript",
+  "when": "sideBarVisible"
+}
+```
+
+can be serialized into `languageId:javascript;when:sideBarVisible`.
+The string representation can then be used as the value of the binding key.
+
+A concrete example of a binding with that condition is as follow:
+
+```json
+{
+  "whichkey.bindings": [
+    {
+      "key": "m",
+      "name": "Major...",
+      "type": "conditional",
+      "bindings": [
+        {
+          "key": "languageId:javascript;when:sideBarVisible",
+          "name": "Open file",
+          "type": "command",
+          "command": "workbench.action.files.openFileFolder"
+        },
+        {
+          "key": "",
+          "name": "Buffers",
+          "type": "bindings",
+          "bindings": [
+            {
+              "key": "b",
+              "name": "Show all buffers/editors",
+              "type": "command",
+              "command": "workbench.action.showAllEditors"
+            }
+          ]
+        },
+      ]
+    }
+  ]
+}
+```
+
+In this example, when `m` is pressed, it will find the first binding that matches the current condition.
+If no configured key matches the current condition, a default item showing a buffer menu will be used.
+Any item that has an invalid key will be used as default item.
+
+Therefore, in this example, if the language is javascript and the sidebar is visible, `m` will open
+the file browser, otherwise it will show the "buffers" menu.
+
+#### Overrides
+
+This is again similar with the `bindings` type.
+
+For example, the following config will override the `m` binding completely:
+
+```json
+{
+  "whichkey.bindingOverrides": [
+    {
+      "keys": "m",
+      "name": "Major",
+      "type": "conditional",
+      "bindings": [
+        {
+          "key": "languageId:javascript",
+          "name": "Go to",
+          "type": "command",
+          "command": "workbench.action.gotoLine",
+        }
+      ]
+    }
+  ]
+}
+```
+
+You can also choose to add or remove conditions to existing conditional bindings.
+For example, the following will add a key of `languageId:javascript` to the conditional binding if `languageId:javascript` doesn't already exist.
+
+```json
+{
+  "whichkey.bindingOverrides": [
+    {
+      "keys": ["m", "languageId:javascript"],
+      "name": "Go to",
+      "type": "command",
+      "command": "workbench.action.gotoLine",
+    }
+  ]
+}
+```
+
+Negative `position` property can also be used to remove conditional bindings.
+
+#### when
+
+Since VSCode doesn't allow reading of the context, which is the condition used in the `when` in shortcuts,
+for every `when` condition, you will need to set up a shortcut to evaluate that specific condition.
+
+For example, the following keybindings will pass both `key` and `when` for which-key handle for key `t`.
+`keybindings.json`
+
+```json
+{
+  "key": "t",
+  "command": "whichkey.triggerKey",
+  "args": {
+    "key": "t",
+    "when": "sideBarVisible && explorerViewletVisible"
+  },
+  "when": "whichkeyVisible && sideBarVisible && explorerViewletVisible"
+}
+```
+
+You can then define the follow bindings that uses that specific `key` and `when`.
+
+```json
+{
+  "key": "t",
+  "name": "Show tree/explorer view",
+  "type": "conditional",
+  "bindings": [
+    {
+      "key": "",
+      "name": "default",
+      "type": "command",
+      "command": "workbench.view.explorer"
+    },
+    {
+      "key": "when:sideBarVisible && explorerViewletVisible",
+      "name": "Hide explorer",
+      "type": "command",
+      "command": "workbench.action.toggleSidebarVisibility"
+    }
+  ]
+}
+```
+
+#### languageId
+
+This is language id of the active editor. The language id can be found in language selection menu inside the parenthesis next to the language name.
+
 ## Release Notes
 
 See [CHANGELOG.md](CHANGELOG.md)

package.json

@@ -46,7 +46,7 @@
 				"key": "tab",
 				"command": "whichkey.triggerKey",
 				"args": "\t",
-				"when": "whichkeyActive"
+				"when": "whichkeyVisible"
 			}
 		],
 		"commands": [

src/bindingItem.ts

@@ -3,6 +3,7 @@ export const enum ActionType {
     Commands = "commands",
     Bindings = "bindings",
     Transient = "transient",
+    Conditional = "conditional",
 }
 
 export interface BindingItem {

src/constants.ts

@@ -20,8 +20,11 @@ export enum SortOrder {
 }
 
 export enum ContextKey {
-	Active = 'whichkeyActive'
+	Active = 'whichkeyActive',
+	Visible = 'whichkeyVisible'
 }
 export const whichKeyShow = `${contributePrefix}.${CommandKey.Show}`;
 export const whichKeyRegister = `${contributePrefix}.${CommandKey.Register}`;
 export const whichKeyTrigger = `${contributePrefix}.${CommandKey.Trigger}`;
+
+export const defaultStatusBarTimeout = 5000;

src/keyListener.ts

@@ -1,12 +1,20 @@
 import { EventEmitter } from "vscode";
 
+export interface KeybindingArgs {
+    key: string,
+    when?: string,
+}
+
 export default class KeyListener {
-    emitter: EventEmitter<string>;
+    emitter: EventEmitter<KeybindingArgs>;
     constructor() {
-        this.emitter = new EventEmitter<string>();
+        this.emitter = new EventEmitter<KeybindingArgs>();
     }
 
-    trigger(key: string) {
+    trigger(key: string | KeybindingArgs) {
+        if (typeof key === "string") {
+            key = { key };
+        }
         this.emitter.fire(key);
     }