From 214a5103f3e2914028206a13ba115c69a7ee07f1 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 21 Oct 2017 11:06:58 +0900 Subject: [PATCH] emit mapped keys from input-component --- src/content/actions/input.js | 11 +-- src/content/components/common/index.js | 4 +- src/content/components/common/input.js | 11 ++- src/content/components/common/keymapper.js | 4 +- test/content/actions/input.test.js | 8 +- test/content/components/common/input.test.js | 78 ++++++++++++++++++++ 6 files changed, 95 insertions(+), 21 deletions(-) create mode 100644 test/content/components/common/input.test.js diff --git a/src/content/actions/input.js b/src/content/actions/input.js index 10ff835..31cfee3 100644 --- a/src/content/actions/input.js +++ b/src/content/actions/input.js @@ -1,16 +1,9 @@ import actions from 'content/actions'; -const asKeymapChars = (key, ctrl) => { - if (ctrl) { - return ''; - } - return key; -}; - -const keyPress = (key, ctrl) => { +const keyPress = (key) => { return { type: actions.INPUT_KEY_PRESS, - key: asKeymapChars(key, ctrl), + key, }; }; diff --git a/src/content/components/common/index.js b/src/content/components/common/index.js index 98a2337..db0ac43 100644 --- a/src/content/components/common/index.js +++ b/src/content/components/common/index.js @@ -10,8 +10,8 @@ export default class Common { const input = new InputComponent(win.document.body, store); const keymapper = new KeymapperComponent(store); - input.onKey((key, ctrl) => follow.key(key, ctrl)); - input.onKey((key, ctrl) => keymapper.key(key, ctrl)); + input.onKey(key => follow.key(key)); + input.onKey(key => keymapper.key(key)); this.store = store; this.children = [ diff --git a/src/content/components/common/input.js b/src/content/components/common/input.js index 2de0d7d..9af9fbe 100644 --- a/src/content/components/common/input.js +++ b/src/content/components/common/input.js @@ -1,3 +1,10 @@ +const mapKey = (e) => { + if (e.ctrlKey) { + return ''; + } + return e.key; +}; + export default class InputComponent { constructor(target) { this.pressed = {}; @@ -47,8 +54,10 @@ export default class InputComponent { return; } + let key = mapKey(e); + for (let listener of this.onKeyListeners) { - let stop = listener(e.key, e.ctrlKey); + let stop = listener(key); if (stop) { e.preventDefault(); e.stopPropagation(); diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index 655c3f2..8c0ddb1 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -9,8 +9,8 @@ export default class KeymapperComponent { update() { } - key(key, ctrl) { - this.store.dispatch(inputActions.keyPress(key, ctrl)); + key(key) { + this.store.dispatch(inputActions.keyPress(key)); let input = this.store.getState().input; let matched = Object.keys(input.keymaps).filter((keyStr) => { diff --git a/test/content/actions/input.test.js b/test/content/actions/input.test.js index 6031829..30705d2 100644 --- a/test/content/actions/input.test.js +++ b/test/content/actions/input.test.js @@ -5,16 +5,10 @@ import * as inputActions from 'content/actions/input'; describe("input actions", () => { describe("keyPress", () => { 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.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(''); - }); }); describe("clearKeys", () => { diff --git a/test/content/components/common/input.test.js b/test/content/components/common/input.test.js new file mode 100644 index 0000000..d4f554a --- /dev/null +++ b/test/content/components/common/input.test.js @@ -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(''); + }); + 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 }); + }) +});