68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
import { Component } from 'react';
|
|
import Router from 'next/router';
|
|
import getUrl from '../util/getUrl';
|
|
import { getKey } from '../util/keys';
|
|
import { doLogout } from '../redux/actions/userAct';
|
|
|
|
/* - keyboard shortcuts
|
|
g then h -> navigate home
|
|
g then n -> navigate to new doc
|
|
g then s -> navigate to settings
|
|
g then l -> logout
|
|
e (when on doc page) -> edit doc
|
|
/ (when on home page) -> focus search
|
|
ctrl/cmd + enter -> submit new doc (handled in CodeMirror component)
|
|
*/
|
|
const keyToUrl = {
|
|
72: '/',
|
|
78: '/new',
|
|
83: '/settings'
|
|
};
|
|
const keyToEl = {
|
|
69: { sel: '#edit', func: 'click' },
|
|
191: { sel: '.search', func: 'focus' }
|
|
};
|
|
|
|
class KeyShortcuts extends Component {
|
|
handleDown = e => {
|
|
const tag = e.target.tagName;
|
|
if(tag === 'INPUT' || tag === 'TEXTAREA') return;
|
|
const key = getKey(e);
|
|
if(this.prevKey === 71) { // prev key was g
|
|
switch (key) {
|
|
case 72:
|
|
case 78:
|
|
case 83: {
|
|
const url = keyToUrl[key];
|
|
Router.push(url, getUrl(url));
|
|
break;
|
|
}
|
|
case 76: {
|
|
setTimeout(doLogout, 1);
|
|
break;
|
|
}
|
|
default: break;
|
|
}
|
|
}
|
|
switch (key) {
|
|
case 69:
|
|
case 191: {
|
|
const { sel, func } = keyToEl[key];
|
|
const el = document.querySelector(sel);
|
|
if(el) setTimeout(() => el[func](), 1);
|
|
break;
|
|
}
|
|
default: break;
|
|
}
|
|
this.prevKey = key;
|
|
};
|
|
componentDidMount() {
|
|
window.addEventListener('keydown', this.handleDown);
|
|
}
|
|
componentWillUnmount() {
|
|
window.removeEventListener('keydown', this.handleDown);
|
|
}
|
|
render = () => null
|
|
}
|
|
|
|
export default KeyShortcuts; |