Tab switch by number

Author: ppot

app/accelerators.js

@@ -48,8 +48,8 @@ const applicationMenu = { // app/menu.js
   rightPane: 'Alt+Right',
   topPane: 'Alt+Up',
   bottomPane: 'Alt+Down',
-  nextTab: 'Shift+[',
-  previousTab: 'Shift+]'
+  nextTab: 'Shift+]',
+  prevTab: 'Shift+['
 };
 
 const mousetrap = { // lib/containers/hyper.js

app/menu.js

@@ -284,7 +284,7 @@ module.exports = ({createWindow, updatePlugins}) => {
         submenu: [
           {
             label: 'Previous Tab',
-            accelerator: accelerators.previousTab,
+            accelerator: accelerators.prevTab,
             click(item, focusedWindow) {
               if (focusedWindow) {
                 focusedWindow.rpc.emit('mv', {type: 'Tab', arrow: 'Left'});

lib/UI/hyper.js

@@ -4,6 +4,25 @@ import Component from './component';
 import Header from './head/header';
 
 class Hyper extends Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.tabChange = props.tabChange;
+  }
+
+  handleKeyDown(ev) {
+    const num = parseInt(ev.key, 10);
+    if (ev.metaKey && Number.isInteger(num)) {
+      if (num > 0) {
+        this.tabChange(num);
+      }
+    }
+  }
+
+  componentWillMount() {
+    window.addEventListener('keydown', this.handleKeyDown);
+  }
+
   componentWillReceiveProps(next) {
     if (this.props.backgroundColor !== next.backgroundColor) {
       // this can be removed when `setBackgroundColor` in electron

lib/UI/main/term.js

@@ -17,10 +17,9 @@ class Term extends Component {
     this.xt.onArrow = props.onArrow;
     // this.xt.focus = props.onSelect.bind(null, props.uid);
   }
-  
 
   onKey(key, ev) {
-    if(isAccelerator(ev)) {
+    if (isAccelerator(ev)) {
       return false;
     }
     rpc.emit('data', {uid: this.uid, data: key});
@@ -43,13 +42,12 @@ class Term extends Component {
     this.xt.writeln('Welcome to xterm.js');
     this.xt.writeln('Just type some keys in the prompt below.');
     this.xt.writeln('');
-    this.xt.attachCustomKeydownHandler(this.onKey);
     this.xt.on('key', this.onKey);
-    this.xt.attachCustomKeydownHandler(function(e){
-      if(isAccelerator(e)) {
+    this.xt.attachCustomKeydownHandler(e => {
+      if (isAccelerator(e)) {
         return false;
       }
-    })
+    });
   }
 
   componentDidMount() {
@@ -59,21 +57,21 @@ class Term extends Component {
     window.addEventListener('resize', this._SizeListener);
   }
 
-  componentWillReceiveProps(next) {
-    // if (next.activeTerm) {
-      // this.focus();
-      // this.xt.textarea.focus();
-    // }
-    // this._SizeListener();
-  }
+  // componentWillReceiveProps(next) {
+  //   // if (next.activeTerm) {
+  //     // this.focus();
+  //     // this.xt.textarea.focus();
+  //   // }
+  //   // this._SizeListener();
+  // }
 
   template(css) {
     const {activeTerm} = this.props;
     return (<div
-        ref={c => {
-          this.terminal = c;
-        }
+      ref={t => {
+        this.terminal = t;
       }
+    }
       className={css('terminal', activeTerm && 'activeTerm')}
       />);
   }

lib/communication/actions/tab.js

@@ -29,3 +29,12 @@ export function directionalSwitch(arrow) {
     });
   };
 }
+
+export function tabChange(num) {
+  return dispatch => {
+    dispatch({
+      type: 'TAB_SWITCH',
+      num
+    });
+  };
+}

lib/connector/hyper.js

@@ -1,5 +1,6 @@
 import {connect} from '../utils/plugins';
 import Hyper from '../UI/hyper';
+import {tabChange} from '../communication/actions/tab';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
@@ -14,7 +15,11 @@ const HyperConnector = connect(
     };
   },
   dispatch => {
-    return {};
+    return {
+      tabChange(num) {
+        dispatch(tabChange(num));
+      }
+    };
   },
   null,
   {withRef: true}

lib/reducers/conditions/pane.js

@@ -1,4 +1,4 @@
-import {request, split, select, arrow, close, renum} from '../objects/pane';
+import {request, split, select, swith, close, renum} from '../objects/pane';
 
 const conditions = (state, action) => {
   switch (action.type) {
@@ -15,7 +15,7 @@ const conditions = (state, action) => {
     case 'PANE_CREATED':
       return state;
     case 'PANE_SWITCH':
-      return arrow(state, action);
+      return swith(state, action);
     default:
       return state;
   }

lib/reducers/conditions/tab.js

@@ -1,4 +1,4 @@
-import {create, select, arrow} from '../objects/tab';
+import {create, select, swith} from '../objects/tab';
 
 const conditions = (state, action) => {
   switch (action.type) {
@@ -7,7 +7,7 @@ const conditions = (state, action) => {
     case 'TAB_SELECT':
       return select(state, action);
     case 'TAB_SWITCH':
-      return arrow(state, action);
+      return swith(state, action);
     default:
       return state;
   }

lib/reducers/objects/Display.js

@@ -55,7 +55,6 @@ export function right(state, display) {
   const pane = state.active.pane;
   const indexOf = display.panes.indexOf(pane);
   if (indexOf + 1 <= display.panes.length - 1) {
-    console.log('hello');
     return setActive(state, display.panes[indexOf + 1]);
   }
   // return state;

lib/reducers/objects/pane.js

@@ -172,7 +172,7 @@ export function close(state, action) {
   }));
 }
 
-export function arrow(state, action) {
+export function swith(state, action) {
   const display = state.displays[state.active.display];
   switch (action.arrow) {
     case 'Left':