emit mapped keys from input-component

jh-changes
Shin'ya Ueoka 7 years ago
parent c2a663a64d
commit 214a5103f3
  1. 11
      src/content/actions/input.js
  2. 4
      src/content/components/common/index.js
  3. 11
      src/content/components/common/input.js
  4. 4
      src/content/components/common/keymapper.js
  5. 8
      test/content/actions/input.test.js
  6. 78
      test/content/components/common/input.test.js

@ -1,16 +1,9 @@
import actions from 'content/actions'; import actions from 'content/actions';
const asKeymapChars = (key, ctrl) => { const keyPress = (key) => {
if (ctrl) {
return '<C-' + key.toUpperCase() + '>';
}
return key;
};
const keyPress = (key, ctrl) => {
return { return {
type: actions.INPUT_KEY_PRESS, type: actions.INPUT_KEY_PRESS,
key: asKeymapChars(key, ctrl), key,
}; };
}; };

@ -10,8 +10,8 @@ export default class Common {
const input = new InputComponent(win.document.body, store); const input = new InputComponent(win.document.body, store);
const keymapper = new KeymapperComponent(store); const keymapper = new KeymapperComponent(store);
input.onKey((key, ctrl) => follow.key(key, ctrl)); input.onKey(key => follow.key(key));
input.onKey((key, ctrl) => keymapper.key(key, ctrl)); input.onKey(key => keymapper.key(key));
this.store = store; this.store = store;
this.children = [ this.children = [

@ -1,3 +1,10 @@
const mapKey = (e) => {
if (e.ctrlKey) {
return '<C-' + e.key.toUpperCase() + '>';
}
return e.key;
};
export default class InputComponent { export default class InputComponent {
constructor(target) { constructor(target) {
this.pressed = {}; this.pressed = {};
@ -47,8 +54,10 @@ export default class InputComponent {
return; return;
} }
let key = mapKey(e);
for (let listener of this.onKeyListeners) { for (let listener of this.onKeyListeners) {
let stop = listener(e.key, e.ctrlKey); let stop = listener(key);
if (stop) { if (stop) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

@ -9,8 +9,8 @@ export default class KeymapperComponent {
update() { update() {
} }
key(key, ctrl) { key(key) {
this.store.dispatch(inputActions.keyPress(key, ctrl)); this.store.dispatch(inputActions.keyPress(key));
let input = this.store.getState().input; let input = this.store.getState().input;
let matched = Object.keys(input.keymaps).filter((keyStr) => { let matched = Object.keys(input.keymaps).filter((keyStr) => {

@ -5,16 +5,10 @@ import * as inputActions from 'content/actions/input';
describe("input actions", () => { describe("input actions", () => {
describe("keyPress", () => { describe("keyPress", () => {
it('create INPUT_KEY_PRESS action', () => { it('create INPUT_KEY_PRESS action', () => {
let action = inputActions.keyPress('a', false); let action = inputActions.keyPress('a');
expect(action.type).to.equal(actions.INPUT_KEY_PRESS); expect(action.type).to.equal(actions.INPUT_KEY_PRESS);
expect(action.key).to.equal('a'); expect(action.key).to.equal('a');
}); });
it('create INPUT_KEY_PRESS action from key with ctrl', () => {
let action = inputActions.keyPress('b', true);
expect(action.type).to.equal(actions.INPUT_KEY_PRESS);
expect(action.key).to.equal('<C-B>');
});
}); });
describe("clearKeys", () => { describe("clearKeys", () => {

@ -0,0 +1,78 @@
import InputComponent from 'content/components/common/input';
import { expect } from "chai";
describe('InputComponent', () => {
it('register callbacks', () => {
let component = new InputComponent(window.document);
component.onKey((key) => {
expect(key).is.equals('a');
});
component.onKeyDown({ key: 'a' });
});
it('invoke callback once', () => {
let component = new InputComponent(window.document);
let a = 0, b = 0;
component.onKey((key) => {
if (key == 'a') {
++a;
} else {
key == 'b'
++b;
}
});
component.onKeyDown({ key: 'a' });
component.onKeyDown({ key: 'b' });
component.onKeyPress({ key: 'a' });
component.onKeyUp({ key: 'a' });
component.onKeyPress({ key: 'b' });
component.onKeyUp({ key: 'b' });
expect(a).is.equals(1);
expect(b).is.equals(1);
})
it('add prefix when ctrl pressed', () => {
let component = new InputComponent(window.document);
component.onKey((key) => {
expect(key).is.equals('<C-A>');
});
component.onKeyDown({ key: 'a', ctrlKey: true });
})
it('does not invoke only meta keys', () => {
let component = new InputComponent(window.document);
component.onKey((key) => {
expect.fail();
});
component.onKeyDown({ key: 'Shift' });
component.onKeyDown({ key: 'Control' });
component.onKeyDown({ key: 'Alt' });
component.onKeyDown({ key: 'OS' });
})
it('ignores events from input elements', () => {
['input', 'textarea', 'select'].forEach((name) => {
let target = window.document.createElement(name);
let component = new InputComponent(target);
component.onKey((key) => {
expect.fail();
});
component.onKeyDown({ key: 'x', target });
});
});
it('ignores events from contenteditable elements', () => {
let target = window.document.createElement('div');
let component = new InputComponent(target);
component.onKey((key) => {
expect.fail();
});
target.setAttribute('contenteditable', '');
component.onKeyDown({ key: 'x', target });
target.setAttribute('contenteditable', 'true');
component.onKeyDown({ key: 'x', target });
})
});