Use pure redux on console
This commit is contained in:
parent
4fa93663d7
commit
85b4bd5b07
4 changed files with 61 additions and 63 deletions
|
@ -1,3 +1,4 @@
|
||||||
|
import messages from 'shared/messages';
|
||||||
import actions from 'console/actions';
|
import actions from 'console/actions';
|
||||||
|
|
||||||
const hide = () => {
|
const hide = () => {
|
||||||
|
@ -34,11 +35,30 @@ const showInfo = (text) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const hideCommand = () => {
|
const hideCommand = () => {
|
||||||
|
window.top.postMessage(JSON.stringify({
|
||||||
|
type: messages.CONSOLE_UNFOCUS,
|
||||||
|
}), '*');
|
||||||
return {
|
return {
|
||||||
type: actions.CONSOLE_HIDE_COMMAND,
|
type: actions.CONSOLE_HIDE_COMMAND,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const enterCommand = async(text) => {
|
||||||
|
await browser.runtime.sendMessage({
|
||||||
|
type: messages.CONSOLE_ENTER_COMMAND,
|
||||||
|
text,
|
||||||
|
});
|
||||||
|
return hideCommand(text);
|
||||||
|
};
|
||||||
|
|
||||||
|
const enterFind = (text) => {
|
||||||
|
window.top.postMessage(JSON.stringify({
|
||||||
|
type: messages.CONSOLE_ENTER_FIND,
|
||||||
|
text,
|
||||||
|
}), '*');
|
||||||
|
return hideCommand();
|
||||||
|
};
|
||||||
|
|
||||||
const setConsoleText = (consoleText) => {
|
const setConsoleText = (consoleText) => {
|
||||||
return {
|
return {
|
||||||
type: actions.CONSOLE_SET_CONSOLE_TEXT,
|
type: actions.CONSOLE_SET_CONSOLE_TEXT,
|
||||||
|
@ -46,11 +66,15 @@ const setConsoleText = (consoleText) => {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const setCompletions = (completionSource, completions) => {
|
const getCompletions = async(text) => {
|
||||||
|
let completions = await browser.runtime.sendMessage({
|
||||||
|
type: messages.CONSOLE_QUERY_COMPLETIONS,
|
||||||
|
text,
|
||||||
|
});
|
||||||
return {
|
return {
|
||||||
type: actions.CONSOLE_SET_COMPLETIONS,
|
type: actions.CONSOLE_SET_COMPLETIONS,
|
||||||
completionSource,
|
|
||||||
completions,
|
completions,
|
||||||
|
completionSource: text,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -68,5 +92,5 @@ const completionPrev = () => {
|
||||||
|
|
||||||
export {
|
export {
|
||||||
hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText,
|
hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText,
|
||||||
setCompletions, completionNext, completionPrev
|
enterCommand, enterFind, getCompletions, completionNext, completionPrev
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import messages from 'shared/messages';
|
|
||||||
import * as consoleActions from 'console/actions/console';
|
import * as consoleActions from 'console/actions/console';
|
||||||
|
|
||||||
const inputShownMode = (state) => {
|
const inputShownMode = (state) => {
|
||||||
|
@ -26,15 +25,22 @@ export default class ConsoleComponent {
|
||||||
|
|
||||||
onBlur() {
|
onBlur() {
|
||||||
let state = this.store.getState();
|
let state = this.store.getState();
|
||||||
if (state.mode === 'command') {
|
if (state.mode === 'command' || state.mode === 'find') {
|
||||||
this.hideCommand();
|
return this.store.dispatch(consoleActions.hideCommand());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
doEnter(e) {
|
doEnter(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return this.onEntered(e.target.value);
|
|
||||||
|
let state = this.store.getState();
|
||||||
|
let value = e.target.value;
|
||||||
|
if (state.mode === 'command') {
|
||||||
|
return this.store.dispatch(consoleActions.enterCommand(value));
|
||||||
|
} else if (state.mode === 'find') {
|
||||||
|
return this.store.dispatch(consoleActions.enterFind(value));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
selectNext(e) {
|
selectNext(e) {
|
||||||
|
@ -51,11 +57,11 @@ export default class ConsoleComponent {
|
||||||
|
|
||||||
onKeyDown(e) {
|
onKeyDown(e) {
|
||||||
if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
|
if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
|
||||||
return this.hideCommand();
|
this.store.dispatch(consoleActions.hideCommand());
|
||||||
}
|
}
|
||||||
switch (e.keyCode) {
|
switch (e.keyCode) {
|
||||||
case KeyboardEvent.DOM_VK_ESCAPE:
|
case KeyboardEvent.DOM_VK_ESCAPE:
|
||||||
return this.hideCommand();
|
return this.store.dispatch(consoleActions.hideCommand());
|
||||||
case KeyboardEvent.DOM_VK_RETURN:
|
case KeyboardEvent.DOM_VK_RETURN:
|
||||||
return this.doEnter(e);
|
return this.doEnter(e);
|
||||||
case KeyboardEvent.DOM_VK_TAB:
|
case KeyboardEvent.DOM_VK_TAB:
|
||||||
|
@ -69,7 +75,7 @@ export default class ConsoleComponent {
|
||||||
break;
|
break;
|
||||||
case KeyboardEvent.DOM_VK_OPEN_BRACKET:
|
case KeyboardEvent.DOM_VK_OPEN_BRACKET:
|
||||||
if (e.ctrlKey) {
|
if (e.ctrlKey) {
|
||||||
return this.hideCommand();
|
return this.store.dispatch(consoleActions.hideCommand());
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case KeyboardEvent.DOM_VK_M:
|
case KeyboardEvent.DOM_VK_M:
|
||||||
|
@ -90,32 +96,10 @@ export default class ConsoleComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onEntered(value) {
|
onInput(e) {
|
||||||
let state = this.store.getState();
|
let text = e.target.value;
|
||||||
if (state.mode === 'command') {
|
this.store.dispatch(consoleActions.setConsoleText(text));
|
||||||
browser.runtime.sendMessage({
|
this.store.dispatch(consoleActions.getCompletions(text));
|
||||||
type: messages.CONSOLE_ENTER_COMMAND,
|
|
||||||
text: value,
|
|
||||||
});
|
|
||||||
this.hideCommand();
|
|
||||||
} else if (state.mode === 'find') {
|
|
||||||
this.hideCommand();
|
|
||||||
window.top.postMessage(JSON.stringify({
|
|
||||||
type: messages.CONSOLE_ENTER_FIND,
|
|
||||||
text: value,
|
|
||||||
}), '*');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async onInput(e) {
|
|
||||||
this.store.dispatch(consoleActions.setConsoleText(e.target.value));
|
|
||||||
|
|
||||||
let source = e.target.value;
|
|
||||||
let completions = await browser.runtime.sendMessage({
|
|
||||||
type: messages.CONSOLE_QUERY_COMPLETIONS,
|
|
||||||
text: source,
|
|
||||||
});
|
|
||||||
this.store.dispatch(consoleActions.setCompletions(source, completions));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onInputShown(state) {
|
onInputShown(state) {
|
||||||
|
@ -126,17 +110,12 @@ export default class ConsoleComponent {
|
||||||
window.focus();
|
window.focus();
|
||||||
|
|
||||||
if (state.mode === 'command') {
|
if (state.mode === 'command') {
|
||||||
this.onInput({ target: input });
|
let text = state.consoleText;
|
||||||
|
input.value = text;
|
||||||
|
this.store.dispatch(consoleActions.getCompletions(text));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hideCommand() {
|
|
||||||
this.store.dispatch(consoleActions.hideCommand());
|
|
||||||
window.top.postMessage(JSON.stringify({
|
|
||||||
type: messages.CONSOLE_UNFOCUS,
|
|
||||||
}), '*');
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
let state = this.store.getState();
|
let state = this.store.getState();
|
||||||
|
|
||||||
|
|
|
@ -3,10 +3,14 @@ import messages from 'shared/messages';
|
||||||
import CompletionComponent from 'console/components/completion';
|
import CompletionComponent from 'console/components/completion';
|
||||||
import ConsoleComponent from 'console/components/console';
|
import ConsoleComponent from 'console/components/console';
|
||||||
import reducers from 'console/reducers';
|
import reducers from 'console/reducers';
|
||||||
import { createStore } from 'shared/store';
|
import { createStore, applyMiddleware } from 'redux';
|
||||||
|
import promise from 'redux-promise';
|
||||||
import * as consoleActions from 'console/actions/console';
|
import * as consoleActions from 'console/actions/console';
|
||||||
|
|
||||||
const store = createStore(reducers);
|
const store = createStore(
|
||||||
|
reducers,
|
||||||
|
applyMiddleware(promise),
|
||||||
|
);
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
let wrapper = document.querySelector('#vimvixen-console-completion');
|
let wrapper = document.querySelector('#vimvixen-console-completion');
|
||||||
|
|
|
@ -23,14 +23,6 @@ describe("console actions", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("showInfo", () => {
|
|
||||||
it('create CONSOLE_SHOW_INFO action', () => {
|
|
||||||
let action = consoleActions.showInfo('an info');
|
|
||||||
expect(action.type).to.equal(actions.CONSOLE_SHOW_INFO);
|
|
||||||
expect(action.text).to.equal('an info');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("showError", () => {
|
describe("showError", () => {
|
||||||
it('create CONSOLE_SHOW_ERROR action', () => {
|
it('create CONSOLE_SHOW_ERROR action', () => {
|
||||||
let action = consoleActions.showError('an error');
|
let action = consoleActions.showError('an error');
|
||||||
|
@ -39,6 +31,14 @@ describe("console actions", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("showInfo", () => {
|
||||||
|
it('create CONSOLE_SHOW_INFO action', () => {
|
||||||
|
let action = consoleActions.showInfo('an info');
|
||||||
|
expect(action.type).to.equal(actions.CONSOLE_SHOW_INFO);
|
||||||
|
expect(action.text).to.equal('an info');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe("hideCommand", () => {
|
describe("hideCommand", () => {
|
||||||
it('create CONSOLE_HIDE_COMMAND action', () => {
|
it('create CONSOLE_HIDE_COMMAND action', () => {
|
||||||
let action = consoleActions.hideCommand();
|
let action = consoleActions.hideCommand();
|
||||||
|
@ -54,15 +54,6 @@ describe("console actions", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("setCompletions", () => {
|
|
||||||
it('create CONSOLE_SET_COMPLETIONS action', () => {
|
|
||||||
let action = consoleActions.setCompletions('query', [1, 2, 3]);
|
|
||||||
expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS);
|
|
||||||
expect(action.completionSource).to.deep.equal('query');
|
|
||||||
expect(action.completions).to.deep.equal([1, 2, 3]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("completionPrev", () => {
|
describe("completionPrev", () => {
|
||||||
it('create CONSOLE_COMPLETION_PREV action', () => {
|
it('create CONSOLE_COMPLETION_PREV action', () => {
|
||||||
let action = consoleActions.completionPrev();
|
let action = consoleActions.completionPrev();
|
||||||
|
|
Reference in a new issue