jab2870/Vim-Vixen
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

console as redux architecture

Browse source
This commit is contained in:
Shin'ya Ueoka 2017-11-07 21:20:22 +09:00
parent e1c70769ea
commit 956dd937d3
7 changed files with 110 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/console/components/console.js
View file

@ -1,25 +1,27 @@
import messages from 'shared/messages';
import * as consoleActions from 'console/actions/console';
const inputShownMode = (state) => {
return ['command', 'find'].includes(state.mode);
};
export default class ConsoleComponent {
constructor(wrapper, store) {
this.wrapper = wrapper;
this.prevState = {};
this.completionOrigin = '';
this.store = store;
this.prevMode = '';
let doc = this.wrapper.ownerDocument;
let input = doc.querySelector('#vimvixen-console-command-input');
input.addEventListener('blur', this.onBlur.bind(this));
input.addEventListener('keydown', this.onKeyDown.bind(this));
input.addEventListener('input', this.onInput.bind(this));
this.hideCommand();
this.hideMessage();
store.subscribe(() => {
this.update();
});
this.update();
}
onBlur() {
@ -53,105 +55,80 @@ export default class ConsoleComponent {
}
onInput(e) {
let doc = this.wrapper.ownerDocument;
let input = doc.querySelector('#vimvixen-console-command-input');
this.completionOrigin = input.value;
this.store.dispatch(consoleActions.setConsoleText(e.target.value));
let source = e.target.value;
return browser.runtime.sendMessage({
type: messages.CONSOLE_QUERY_COMPLETIONS,
text: e.target.value,
text: source,
}).then((completions) => {
this.store.dispatch(consoleActions.setCompletions(completions));
this.store.dispatch(consoleActions.setCompletions(source, completions));
});
}
onInputShown(state) {
let doc = this.wrapper.ownerDocument;
let input = doc.querySelector('#vimvixen-console-command-input');
input.focus();
window.focus();
if (state.mode === 'command') {
this.onInput({ target: input });
}
}
update() {
let state = this.store.getState();
if (this.prevState.mode !== 'command' && state.mode === 'command') {
this.showCommand(state.consoleText);
} else if (this.prevState.mode !== 'find' && state.mode === 'find') {
this.showFind();
} else if (state.mode !== 'command' && state.mode !== 'find') {
this.hideCommand();
this.updateMessage(state);
this.updateCommand(state);
this.updatePrompt(state);
if (this.prevMode !== state.mode && inputShownMode(state)) {
this.onInputShown(state);
}
this.prevMode = state.mode;
}
updateMessage(state) {
let doc = this.wrapper.ownerDocument;
let box = doc.querySelector('.vimvixen-console-message');
let display = 'none';
let classList = ['vimvixen-console-message'];
if (state.mode === 'error' || state.mode === 'info') {
this.showMessage(state.mode, state.messageText);
} else {
this.hideMessage();
display = 'block';
classList.push('vimvixen-console-' + state.mode);
}
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;
box.className = classList.join(' ');
box.style.display = display;
box.textContent = state.messageText;
}
showCommand(text) {
this.showConsole('command', text);
}
showFind() {
this.showConsole('find', '');
}
showConsole(mode, initial) {
updateCommand(state) {
let doc = this.wrapper.ownerDocument;
let command = doc.querySelector('#vimvixen-console-command');
let input = doc.querySelector('#vimvixen-console-command-input');
let promptEle = doc.querySelector('.vimvixen-console-command-prompt');
command.style.display = 'block';
input.value = initial;
input.focus();
promptEle.className = `vimvixen-console-command-prompt prompt-${mode}`;
let display = 'none';
if (inputShownMode(state)) {
display = 'block';
}
window.focus();
this.onInput({ target: input });
command.style.display = display;
input.value = state.consoleText;
}
hideCommand() {
let doc = this.wrapper.ownerDocument;
let command = doc.querySelector('#vimvixen-console-command');
command.style.display = 'none';
}
updatePrompt(state) {
let classList = ['vimvixen-console-command-prompt'];
if (inputShownMode(state)) {
classList.push('prompt-' + state.mode);
}
setCommandValue(value) {
let doc = this.wrapper.ownerDocument;
let input = doc.querySelector('#vimvixen-console-command-input');
input.value = value;
}
setCommandCompletionOrigin() {
let doc = this.wrapper.ownerDocument;
let input = doc.querySelector('#vimvixen-console-command-input');
input.value = this.completionOrigin;
}
showMessage(mode, text) {
let doc = this.wrapper.ownerDocument;
let error = doc.querySelector('#vimvixen-console-message');
error.classList.remove(
'vimvixen-console-info',
'vimvixen-console-error'
);
error.classList.add('vimvixen-console-' + mode);
error.textContent = text;
error.style.display = 'block';
}
hideMessage() {
let doc = this.wrapper.ownerDocument;
let error = doc.querySelector('#vimvixen-console-message');
error.style.display = 'none';
let ele = doc.querySelector('.vimvixen-console-command-prompt');
ele.className = classList.join(' ');
}
}