diff --git a/src/actions/completion.js b/src/actions/completion.js deleted file mode 100644 index 733f516..0000000 --- a/src/actions/completion.js +++ /dev/null @@ -1,22 +0,0 @@ -import actions from 'actions'; - -const setItems = (groups) => { - return { - type: actions.COMPLETION_SET_ITEMS, - groups, - }; -}; - -const selectNext = () => { - return { - type: actions.COMPLETION_SELECT_NEXT - }; -}; - -const selectPrev = () => { - return { - type: actions.COMPLETION_SELECT_PREV - }; -}; - -export { setItems, selectNext, selectPrev }; diff --git a/src/actions/console.js b/src/actions/console.js index ba1fbeb..4183489 100644 --- a/src/actions/console.js +++ b/src/actions/console.js @@ -7,6 +7,19 @@ const showCommand = (text) => { }; }; +const showError = (text) => { + return { + type: actions.CONSOLE_SHOW_ERROR, + text: text + }; +}; + +const hide = () => { + return { + type: actions.CONSOLE_HIDE + }; +}; + const setCompletions = (completions) => { return { type: actions.CONSOLE_SET_COMPLETIONS, @@ -14,17 +27,18 @@ const setCompletions = (completions) => { }; }; -const showError = (text) => { +const completionNext = () => { return { - type: actions.CONSOLE_SHOW_ERROR, - text: text + type: actions.CONSOLE_COMPLETION_NEXT, }; }; -const hide = () => { +const completionPrev = () => { return { - type: actions.CONSOLE_HIDE + type: actions.CONSOLE_COMPLETION_PREV, }; }; -export { showCommand, setCompletions, showError, hide }; +export { + showCommand, showError, hide, setCompletions, completionNext, completionPrev +}; diff --git a/src/actions/index.js b/src/actions/index.js index 4e8d4a7..6a64795 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,9 +1,11 @@ export default { // console commands - CONSOLE_SHOW_COMMAND: 'vimvixen.console.show.command', - CONSOLE_SET_COMPLETIONS: 'vimvixen.console.set.completions', - CONSOLE_SHOW_ERROR: 'vimvixen.console.show.error', - CONSOLE_HIDE: 'vimvixen.console.hide', + CONSOLE_SHOW_COMMAND: 'console.show.command', + CONSOLE_SET_COMPLETIONS: 'console.set.completions', + CONSOLE_SHOW_ERROR: 'console.show.error', + CONSOLE_HIDE: 'console.hide', + CONSOLE_COMPLETION_NEXT: 'console.completion.next', + CONSOLE_COMPLETION_PREV: 'console.completion.prev', // User input INPUT_KEY_PRESS: 'input.key,press', diff --git a/src/components/completion.js b/src/components/completion.js index d1fdd06..f527a84 100644 --- a/src/components/completion.js +++ b/src/components/completion.js @@ -6,15 +6,15 @@ export default class Completion { } update() { - let state = this.store.getState().completion; + let state = this.store.getState().console; if (JSON.stringify(this.prevState) === JSON.stringify(state)) { return; } this.wrapper.innerHTML = ''; - for (let i = 0; i < state.groups.length; ++i) { - let group = state.groups[i]; + for (let i = 0; i < state.completions.length; ++i) { + let group = state.completions[i]; let title = this.createCompletionTitle(group.name); this.wrapper.append(title); diff --git a/src/components/console.js b/src/components/console.js index 3a7f88b..12341c1 100644 --- a/src/components/console.js +++ b/src/components/console.js @@ -1,5 +1,5 @@ import messages from 'content/messages'; -import * as completionActions from 'actions/completion'; +import * as consoleActions from 'actions/console'; export default class ConsoleComponent { constructor(wrapper, store) { @@ -39,9 +39,9 @@ export default class ConsoleComponent { }).then(this.onBlur); case KeyboardEvent.DOM_VK_TAB: if (e.shiftKey) { - this.store.dispatch(completionActions.selectPrev()); + this.store.dispatch(consoleActions.completionPrev()); } else { - this.store.dispatch(completionActions.selectNext()); + this.store.dispatch(consoleActions.completionNext()); } e.stopPropagation(); e.preventDefault(); @@ -66,7 +66,7 @@ export default class ConsoleComponent { type: messages.CONSOLE_QUERY_COMPLETIONS, text: e.target.value }).then((completions) => { - this.store.dispatch(completionActions.setItems(completions)); + this.store.dispatch(consoleActions.setCompletions(completions)); }); } @@ -85,6 +85,18 @@ export default class ConsoleComponent { this.hideError(); } + if (state.groupSelection >= 0 && state.itemSelection >= 0) { + let group = state.completions[state.groupSelection]; + let item = group.items[state.itemSelection]; + this.setCommandValue(item.content); + } else if (state.completions.length > 0 && + JSON.stringify(this.prevState.completions) === + JSON.stringify(state.completions)) { + // Reset input only completion groups not changed (unselected an item in + // completion) in order to avoid to override previous input + this.setCommandCompletionOrigin(); + } + this.prevState = state; } diff --git a/src/pages/console.js b/src/pages/console.js index 4d3dd3f..20a60f6 100644 --- a/src/pages/console.js +++ b/src/pages/console.js @@ -9,7 +9,6 @@ import * as consoleActions from 'actions/console'; const store = createStore(reducers); let completionComponent = null; let consoleComponent = null; -let prevState = {}; window.addEventListener('load', () => { let wrapper = document.querySelector('#vimvixen-console-completion'); @@ -21,19 +20,6 @@ window.addEventListener('load', () => { store.subscribe(() => { completionComponent.update(); consoleComponent.update(); - - let state = store.getState().completion; - - if (state.groupSelection >= 0) { - let item = state.groups[state.groupSelection].items[state.itemSelection]; - consoleComponent.setCommandValue(item.content); - } else if (state.groups.length > 0 && - JSON.stringify(prevState.groups) === JSON.stringify(state.groups)) { - // Reset input only completion groups not changed (unselected an item in - // completion) in order to avoid to override previous input - consoleComponent.setCommandCompletionOrigin(); - } - prevState = state; }); browser.runtime.onMessage.addListener((action) => { diff --git a/src/reducers/completion.js b/src/reducers/completion.js deleted file mode 100644 index f85a500..0000000 --- a/src/reducers/completion.js +++ /dev/null @@ -1,68 +0,0 @@ -import actions from 'actions'; - -const defaultState = { - groupSelection: -1, - itemSelection: -1, - groups: [], -}; - -const nextSelection = (state) => { - if (state.groupSelection < 0) { - return [0, 0]; - } - - let group = state.groups[state.groupSelection]; - if (state.groupSelection + 1 >= state.groups.length && - state.itemSelection + 1 >= group.items.length) { - return [-1, -1]; - } - if (state.itemSelection + 1 >= group.items.length) { - return [state.groupSelection + 1, 0]; - } - return [state.groupSelection, state.itemSelection + 1]; -}; - -const prevSelection = (state) => { - if (state.groupSelection < 0) { - return [ - state.groups.length - 1, - state.groups[state.groups.length - 1].items.length - 1 - ]; - } - if (state.groupSelection === 0 && state.itemSelection === 0) { - return [-1, -1]; - } else if (state.itemSelection === 0) { - return [ - state.groupSelection - 1, - state.groups[state.groupSelection - 1].items.length - 1 - ]; - } - return [state.groupSelection, state.itemSelection - 1]; -}; - -export default function reducer(state = defaultState, action = {}) { - switch (action.type) { - case actions.COMPLETION_SET_ITEMS: - return Object.assign({}, state, { - groups: action.groups, - groupSelection: -1, - itemSelection: -1, - }); - case actions.COMPLETION_SELECT_NEXT: { - let next = nextSelection(state); - return Object.assign({}, state, { - groupSelection: next[0], - itemSelection: next[1], - }); - } - case actions.COMPLETION_SELECT_PREV: { - let next = prevSelection(state); - return Object.assign({}, state, { - groupSelection: next[0], - itemSelection: next[1], - }); - } - default: - return state; - } -} diff --git a/src/reducers/console.js b/src/reducers/console.js index 3e63672..b9ed5b8 100644 --- a/src/reducers/console.js +++ b/src/reducers/console.js @@ -6,6 +6,42 @@ const defaultState = { commandShown: false, commandText: '', completions: [], + groupSelection: -1, + itemSelection: -1, +}; + +const nextSelection = (state) => { + if (state.groupSelection < 0) { + return [0, 0]; + } + + let group = state.completions[state.groupSelection]; + if (state.groupSelection + 1 >= state.completions.length && + state.itemSelection + 1 >= group.items.length) { + return [-1, -1]; + } + if (state.itemSelection + 1 >= group.items.length) { + return [state.groupSelection + 1, 0]; + } + return [state.groupSelection, state.itemSelection + 1]; +}; + +const prevSelection = (state) => { + if (state.groupSelection < 0) { + return [ + state.completions.length - 1, + state.completions[state.completions.length - 1].items.length - 1 + ]; + } + if (state.groupSelection === 0 && state.itemSelection === 0) { + return [-1, -1]; + } else if (state.itemSelection === 0) { + return [ + state.groupSelection - 1, + state.completions[state.groupSelection - 1].items.length - 1 + ]; + } + return [state.groupSelection, state.itemSelection - 1]; }; export default function reducer(state = defaultState, action = {}) { @@ -17,10 +53,6 @@ export default function reducer(state = defaultState, action = {}) { errorShown: false, completions: [] }); - case actions.CONSOLE_SET_COMPLETIONS: - return Object.assign({}, state, { - completions: action.completions - }); case actions.CONSOLE_SHOW_ERROR: return Object.assign({}, state, { errorText: action.text, @@ -36,6 +68,26 @@ export default function reducer(state = defaultState, action = {}) { errorShown: false, commandShown: false }); + case actions.CONSOLE_SET_COMPLETIONS: + return Object.assign({}, state, { + completions: action.completions, + groupSelection: -1, + itemSelection: -1, + }); + case actions.CONSOLE_COMPLETION_NEXT: { + let next = nextSelection(state); + return Object.assign({}, state, { + groupSelection: next[0], + itemSelection: next[1], + }); + } + case actions.CONSOLE_COMPLETION_PREV: { + let next = prevSelection(state); + return Object.assign({}, state, { + groupSelection: next[0], + itemSelection: next[1], + }); + } default: return state; } diff --git a/src/reducers/index.js b/src/reducers/index.js index 5a4f14b..8ed6452 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,14 +2,12 @@ import inputReducer from 'reducers/input'; import consoleReducer from 'reducers/console'; import settingReducer from 'reducers/setting'; import followReducer from 'reducers/follow'; -import completionReducer from 'reducers/completion'; const defaultState = { input: inputReducer(undefined, {}), console: consoleReducer(undefined, {}), setting: settingReducer(undefined, {}), follow: followReducer(undefined, {}), - completion: completionReducer(undefined, {}), }; export default function reducer(state = defaultState, action = {}) { @@ -18,6 +16,5 @@ export default function reducer(state = defaultState, action = {}) { console: consoleReducer(state.console, action), setting: settingReducer(state.setting, action), follow: followReducer(state.follow, action), - completion: completionReducer(state.completion, action), }); } diff --git a/test/actions/completion.test.js b/test/actions/completion.test.js deleted file mode 100644 index 92de383..0000000 --- a/test/actions/completion.test.js +++ /dev/null @@ -1,27 +0,0 @@ -import { expect } from "chai"; -import actions from 'actions'; -import * as completionActions from 'actions/completion'; - -describe("completion actions", () => { - describe('setItems', () => { - it('create COMPLETION_SET_ITEMS action', () => { - let action = completionActions.setItems([1, 2, 3]); - expect(action.type).to.equal(actions.COMPLETION_SET_ITEMS); - expect(action.groups).to.deep.equal([1, 2, 3]); - }); - }); - - describe('selectNext', () => { - it('create COMPLETION_SELECT_NEXT action', () => { - let action = completionActions.selectNext(); - expect(action.type).to.equal(actions.COMPLETION_SELECT_NEXT); - }); - }); - - describe('selectPrev', () => { - it('create COMPLETION_SELECT_PREV action', () => { - let action = completionActions.selectPrev(); - expect(action.type).to.equal(actions.COMPLETION_SELECT_PREV); - }); - }); -}); diff --git a/test/actions/console.test.js b/test/actions/console.test.js index 2dbcf55..ff905bc 100644 --- a/test/actions/console.test.js +++ b/test/actions/console.test.js @@ -11,14 +11,6 @@ describe("console actions", () => { }); }); - describe("setCompletions", () => { - it('create CONSOLE_SET_COMPLETIONS action', () => { - let action = consoleActions.setCompletions([1,2,3]); - expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS); - expect(action.completions).to.deep.equal([1, 2, 3]); - }); - }); - describe("showError", () => { it('create CONSOLE_SHOW_ERROR action', () => { let action = consoleActions.showError('an error'); @@ -33,5 +25,27 @@ describe("console actions", () => { expect(action.type).to.equal(actions.CONSOLE_HIDE); }); }); + + describe("setCompletions", () => { + it('create CONSOLE_SET_COMPLETIONS action', () => { + let action = consoleActions.setCompletions([1,2,3]); + expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS); + expect(action.completions).to.deep.equal([1, 2, 3]); + }); + }); + + describe("completionPrev", () => { + it('create CONSOLE_COMPLETION_PREV action', () => { + let action = consoleActions.completionPrev(); + expect(action.type).to.equal(actions.CONSOLE_COMPLETION_PREV); + }); + }); + + describe("completionNext", () => { + it('create CONSOLE_COMPLETION_NEXT action', () => { + let action = consoleActions.completionNext(); + expect(action.type).to.equal(actions.CONSOLE_COMPLETION_NEXT); + }); + }); }); diff --git a/test/reducers/completion.test.js b/test/reducers/completion.test.js deleted file mode 100644 index b2b36d9..0000000 --- a/test/reducers/completion.test.js +++ /dev/null @@ -1,90 +0,0 @@ -import { expect } from "chai"; -import actions from 'actions'; -import completionReducer from 'reducers/completion'; - -describe("completion reducer", () => { - it ('return the initial state', () => { - let state = completionReducer(undefined, {}); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - expect(state).to.have.deep.property('groups', []); - }); - - it ('return next state for COMPLETION_SET_ITEMS', () => { - let state = { - groupSelection: 0, - itemSelection: 0, - groups: [], - } - let action = { - type: actions.COMPLETION_SET_ITEMS, - groups: [{ - name: 'Apple', - items: [1, 2, 3] - }, { - name: 'Banana', - items: [4, 5, 6] - }] - } - state = completionReducer(state, action); - expect(state).to.have.property('groups', action.groups); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - }); - - it ('return next state for COMPLETION_SELECT_NEXT', () => { - let action = { type: actions.COMPLETION_SELECT_NEXT }; - let state = { - groupSelection: -1, - itemSelection: -1, - groups: [{ - name: 'Apple', - items: [1, 2] - }, { - name: 'Banana', - items: [3] - }] - }; - - state = completionReducer(state, action); - expect(state).to.have.property('groupSelection', 0); - expect(state).to.have.property('itemSelection', 0); - - state = completionReducer(state, action); - expect(state).to.have.property('groupSelection', 0); - expect(state).to.have.property('itemSelection', 1); - - state = completionReducer(state, action); - state = completionReducer(state, action); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - }); - - it ('return next state for COMPLETION_SELECT_PREV', () => { - let action = { type: actions.COMPLETION_SELECT_PREV }; - let state = { - groupSelection: -1, - itemSelection: -1, - groups: [{ - name: 'Apple', - items: [1, 2] - }, { - name: 'Banana', - items: [3] - }] - }; - - state = completionReducer(state, action); - expect(state).to.have.property('groupSelection', 1); - expect(state).to.have.property('itemSelection', 0); - - state = completionReducer(state, action); - expect(state).to.have.property('groupSelection', 0); - expect(state).to.have.property('itemSelection', 1); - - state = completionReducer(state, action); - state = completionReducer(state, action); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - }); -}); diff --git a/test/reducers/console.test.js b/test/reducers/console.test.js index d9f500f..5ebf4bc 100644 --- a/test/reducers/console.test.js +++ b/test/reducers/console.test.js @@ -10,6 +10,8 @@ describe("console reducer", () => { expect(state).to.have.property('commandShown', false); expect(state).to.have.property('commandText', ''); expect(state).to.have.deep.property('completions', []); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); }); it('return next state for CONSOLE_SHOW_COMMAND', () => { @@ -20,12 +22,6 @@ describe("console reducer", () => { expect(state).to.have.property('errorShown', false); }); - it('return next state for CONSOLE_SET_COMPLETIONS', () => { - let action = { type: actions.CONSOLE_SET_COMPLETIONS, completions: [1, 2, 3] }; - let state = consoleReducer({}, action); - expect(state).to.have.deep.property('completions', [1, 2, 3]); - }); - it('return next state for CONSOLE_SHOW_ERROR', () => { let action = { type: actions.CONSOLE_SHOW_ERROR, text: 'an error' }; let state = consoleReducer({}, action); @@ -40,4 +36,83 @@ describe("console reducer", () => { expect(state).to.have.property('errorShown', false); expect(state).to.have.property('commandShown', false); }); + + it ('return next state for CONSOLE_SET_COMPLETIONS', () => { + let state = { + groupSelection: 0, + itemSelection: 0, + completions: [], + } + let action = { + type: actions.CONSOLE_SET_COMPLETIONS, + completions: [{ + name: 'Apple', + items: [1, 2, 3] + }, { + name: 'Banana', + items: [4, 5, 6] + }] + } + state = consoleReducer(state, action); + expect(state).to.have.property('completions', action.completions); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); + }); + + it ('return next state for CONSOLE_COMPLETION_NEXT', () => { + let action = { type: actions.CONSOLE_COMPLETION_NEXT }; + let state = { + groupSelection: -1, + itemSelection: -1, + completions: [{ + name: 'Apple', + items: [1, 2] + }, { + name: 'Banana', + items: [3] + }] + }; + + state = consoleReducer(state, action); + expect(state).to.have.property('groupSelection', 0); + expect(state).to.have.property('itemSelection', 0); + + state = consoleReducer(state, action); + expect(state).to.have.property('groupSelection', 0); + expect(state).to.have.property('itemSelection', 1); + + state = consoleReducer(state, action); + state = consoleReducer(state, action); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); + }); + + it ('return next state for CONSOLE_COMPLETION_PREV', () => { + let action = { type: actions.CONSOLE_COMPLETION_PREV }; + let state = { + groupSelection: -1, + itemSelection: -1, + completions: [{ + name: 'Apple', + items: [1, 2] + }, { + name: 'Banana', + items: [3] + }] + }; + + state = consoleReducer(state, action); + expect(state).to.have.property('groupSelection', 1); + expect(state).to.have.property('itemSelection', 0); + + state = consoleReducer(state, action); + expect(state).to.have.property('groupSelection', 0); + expect(state).to.have.property('itemSelection', 1); + + state = consoleReducer(state, action); + state = consoleReducer(state, action); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); + }); + });