Add configuration

chabou · chabou · commit 0654ea9b264d · 2017-02-11T11:09:16.000+01:00
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # hyper-pane
-Extension for Hyper.app to enhance pane navigation.
+Extension for Hyper.app to enhance pane navigation. Navigate through panes with arrows or jump directly to a specific pane with digit.
 
 ![hyper-pane](https://cloud.githubusercontent.com/assets/4137761/22717106/844a9c5c-ed99-11e6-8e88-8c71a8cbbd5a.gif)
 
@@ -15,19 +15,54 @@ plugins: [
 ],
 ```
 
+## Configuration
+
+Default configuration:
+``` js
+module.exports = {
+  config: {
+    // other configs...
+    paneNavigation: {
+      debug: false,
+      hotkeys: {
+        navigation: {
+          up: 'ctrl+alt+up',
+          down: 'ctrl+alt+down',
+          left: 'ctrl+alt+left',
+          right: 'ctrl+alt+right'
+        },
+        jump_prefix: 'ctrl+alt', // completed with 1-9 digits
+        permutation_modifier: 'shift', // Added to jump and navigation hotkeys for pane permutation
+      },
+      showIndicators: true, // Show pane number
+      indicatorPrefix: '^⌥', // Will be completed with pane number
+      indicatorStyle: { // Added to indicator <div>
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        fontSize: '10px'
+      },
+    }
+  }
+  //...
+};
+```
+
+
 ## Usage
 ### Navigation with arrows
 
-You can use `Ctrl+Alt+<Up,Down,Left,Right>` to navigate to a neighbor pane.
+Use `Ctrl+Alt+<Up,Down,Left,Right>` (or your configured hotkeys) to navigate to a neighbor pane.
 
-### Navigation with digit
+### Jump with digit
 
-You can use `Ctrl+Alt+<1-9>` to jump to a numbered pane.
-Panes are ordered "first child descendent" but `9` is reserved to the last pane.
+Use `Ctrl+Alt+<1-9>` (or your configured hotkeys) to jump directly to a numbered pane.
+Panes are ordered "first child descendent" and `9` is reserved to the last pane.
 
-Shortcuts are displayed on top left corner of each pane from 2 panes opened.
+Hotkey indicators are displayed on top left corner of each pane from 2 panes opened.
+You can change its content, its style or hide them completly.
 
-### Switching/Moving pane
+### Pane permutation
 
-Adding `Shift` key to previous shortcuts cause a pane switching.
+Adding `Shift` key (or your configured key) to previous hotkeys cause a pane switching.
 
diff --git a/index.js b/index.js
@@ -1,13 +1,36 @@
 const Mousetrap = require('mousetrap');
+const merge = require('lodash.merge');
+
+const defaultConfig = {
+  debug: false,
+  hotkeys: {
+    navigation: {
+      up: 'ctrl+alt+up',
+      down: 'ctrl+alt+down',
+      left: 'ctrl+alt+left',
+      right: 'ctrl+alt+right'
+    },
+    jump_prefix: 'ctrl+alt',
+    permutation_modifier: 'shift',
+  },
+  showIndicators: true,
+  indicatorPrefix: '^⌥',
+  indicatorStyle: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    fontSize: '10px'
+  },
+};
 
-let debug_enabled_ = false;
+let config = defaultConfig;
 
 const debug = function () {
-  if (debug_enabled_){
+  if (config.debug){
     [].unshift.call(arguments, '|HYPER-PANE|');
     console.log.apply(this, arguments);
   }
-}
+};
 
 /**
  * Duplicate Hyper code
@@ -73,15 +96,12 @@ const UI_MOVE_LEFT_PANE = 'UI_MOVE_LEFT_PANE';
 const UI_MOVE_RIGHT_PANE = 'UI_MOVE_RIGHT_PANE';
 const UI_SWITCH_SESSIONS = 'UI_SWITCH_SESSIONS';
 
-// Keys
-const JUMP_KEYS = 'ctrl+alt';
-const SWITCH_MODIFIER = 'shift';
-const NAV_KEYS = {
-  UI_MOVE_UP_PANE: 'ctrl+alt+up',
-  UI_MOVE_DOWN_PANE: 'ctrl+alt+down',
-  UI_MOVE_LEFT_PANE: 'ctrl+alt+left',
-  UI_MOVE_RIGHT_PANE: 'ctrl+alt+right'
-};
+const navigationActionMap = {
+  up: 'UI_MOVE_UP_PANE',
+  down: 'UI_MOVE_DOWN_PANE',
+  left: 'UI_MOVE_LEFT_PANE',
+  right: 'UI_MOVE_RIGHT_PANE'
+}
 
 // Others
 const ROOT_FRAME = {
@@ -274,6 +294,18 @@ const updateChildrenFrames = (state, groupUid) => {
  * Plugin bindings
  */
 
+ exports.middleware = store => next => action => {
+  switch (action.type) {
+    case 'CONFIG_LOAD':
+    case 'CONFIG_RELOAD':
+      if (action.config.paneNavigation) {
+        config = merge(JSON.parse(JSON.stringify(defaultConfig)), action.config.paneNavigation);
+      }
+      break;
+  }
+  return next(action);
+}
+
 exports.reduceTermGroups = (state, action) => {
 
   switch (action.type) {
@@ -385,47 +417,58 @@ exports.decorateTerms = (Terms, { React, notify, Notification }) => {
       const document = term.getTermDocument();
       const keys = new Mousetrap(document);
 
-      ['1','2','3','4','5','6','7','8','9'].forEach(num => {
-        let shortcut = JUMP_KEYS + `+${num}`;
-        //debug('Add shortcut', shortcut);
-        keys.bind(
-          shortcut,
-          (e) => {
-            this.props.onMoveToPane(num);
-            e.preventDefault();
-            this.reattachKeyListner();
-          }
-        );
-        shortcut = `${SWITCH_MODIFIER} + ${shortcut}`;
-        //debug('Add shortcut', shortcut);
-        keys.bind(
-          shortcut,
-          (e) => {
-            this.props.onMoveToPane(num, true);
-            e.preventDefault();
-            this.reattachKeyListner();
+      const jump_prefix = config.hotkeys.jump_prefix;
+      const permutation_modifier = config.hotkeys.permutation_modifier;
+      if (jump_prefix && jump_prefix.length) {
+        ['1','2','3','4','5','6','7','8','9'].forEach(num => {
+          let shortcut = jump_prefix+ `+${num}`;
+          //debug('Add shortcut', shortcut);
+          keys.bind(
+            shortcut,
+            (e) => {
+              this.props.onMoveToPane(num);
+              e.preventDefault();
+              this.reattachKeyListner();
+            }
+          );
+          if (permutation_modifier && permutation_modifier.length) {
+            shortcut = `${permutation_modifier} + ${shortcut}`;
+            //debug('Add shortcut', shortcut);
+            keys.bind(
+              shortcut,
+              (e) => {
+                this.props.onMoveToPane(num, true);
+                e.preventDefault();
+                this.reattachKeyListner();
+              }
+            );
           }
-        );
-      });
+        });
+      }
 
-      Object.keys(NAV_KEYS).forEach(direction => {
-        keys.bind(
-          NAV_KEYS[direction],
-          (e) => {
-            this.props.onMoveToDirectionPane(direction);
-            e.preventDefault();
-            this.reattachKeyListner();
-          }
-        );
-
-        keys.bind(
-          `${SWITCH_MODIFIER}+` + NAV_KEYS[direction],
-          (e) => {
-            this.props.onMoveToDirectionPane(direction, true);
-            e.preventDefault();
-            this.reattachKeyListner();
+      Object.keys(config.hotkeys.navigation).forEach(direction => {
+        const key = config.hotkeys.navigation[direction];
+        const actionType = navigationActionMap[direction];
+        if (key && key.length && actionType && actionType.length) {
+          keys.bind(
+            key,
+            (e) => {
+              this.props.onMoveToDirectionPane(actionType);
+              e.preventDefault();
+              this.reattachKeyListner();
+            }
+          );
+          if (permutation_modifier && permutation_modifier.length) {
+            keys.bind(
+              `${permutation_modifier}+` + key,
+              (e) => {
+                this.props.onMoveToDirectionPane(actionType, true);
+                e.preventDefault();
+                this.reattachKeyListner();
+              }
+            );
           }
-        );
+        }
       });
       this.keys = keys;
     }
@@ -460,17 +503,15 @@ exports.decorateTerm = (Term, { React, notify }) => {
         super(props, context);
     }
     render () {
+      if (!config.showIndicators) {
+        return React.createElement(Term, this.props);
+      }
       const myCustomChildrenBefore = React.createElement(
         'div',
         {
-          style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            fontSize: '10px'
-          }
+          style: config.indicatorStyle
         },
-        this.props.termShorcutNum > 0 ? '^⌥' + this.props.termShorcutNum : ''
+        this.props.termShorcutNum > 0 ? config.indicatorPrefix + this.props.termShorcutNum : ''
       );
       const customChildrenBefore = this.props.customChildrenBefore
         ? Array.from(this.props.customChildrenBefore).concat(myCustomChildrenBefore)
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hyper-pane",
-  "version": "0.1.2",
-  "description": "Extension for Hyper.app to enhance pane navigation.",
+  "version": "1.0.0",
+  "description": "Extension for Hyper.app to enhance pane navigation. Navigate through panes with arrows or jump directly to a specific pane with digit.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -47,6 +47,7 @@
     ]
   },
   "dependencies": {
+    "lodash.merge": "^4.6.0",
     "mousetrap": "^1.6.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+lodash.merge@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
+
 mousetrap@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.0.tgz#0168fcabb11d07669e87490324c981208121ac4d"

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "hyper-pane",`
`3`		`- "version": "0.1.2",`
`4`		`- "description": "Extension for Hyper.app to enhance pane navigation.",`
	`3`	`+ "version": "1.0.0",`
	`4`	`+ "description": "Extension for Hyper.app to enhance pane navigation. Navigate through panes with arrows or jump directly to a specific pane with digit.",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"test": "echo \"Error: no test specified\" && exit 1"`
`@@ -47,6 +47,7 @@`
`47`	`47`	`]`
`48`	`48`	`},`
`49`	`49`	`"dependencies": {`
	`50`	`+ "lodash.merge": "^4.6.0",`
`50`	`51`	`"mousetrap": "^1.6.0"`
`51`	`52`	`}`
`52`	`53`	`}`