console component
This commit is contained in:
parent
749eea5ecf
commit
0c0a7efe70
3 changed files with 146 additions and 84 deletions
|
@ -2,10 +2,14 @@ export default class Completion {
|
|||
constructor(wrapper, store) {
|
||||
this.wrapper = wrapper;
|
||||
this.store = store;
|
||||
this.prevState = {};
|
||||
}
|
||||
|
||||
update() {
|
||||
let state = this.store.getState();
|
||||
if (JSON.stringify(this.prevState) === JSON.stringify(state)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = '';
|
||||
|
||||
|
@ -24,6 +28,8 @@ export default class Completion {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.prevState = state;
|
||||
}
|
||||
|
||||
createCompletionTitle(text) {
|
||||
|
|
131
src/components/console.js
Normal file
131
src/components/console.js
Normal file
|
@ -0,0 +1,131 @@
|
|||
import messages from '../content/messages';
|
||||
import * as completionActions from '../actions/completion';
|
||||
|
||||
export default class ConsoleComponent {
|
||||
constructor(wrapper, store) {
|
||||
this.wrapper = wrapper;
|
||||
this.prevValue = '';
|
||||
this.prevState = {};
|
||||
this.completionOrigin = '';
|
||||
this.store = store;
|
||||
|
||||
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('keyup', this.onKeyUp.bind(this));
|
||||
}
|
||||
|
||||
static onBlur() {
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_BLURRED,
|
||||
});
|
||||
}
|
||||
|
||||
onKeyDown(e) {
|
||||
let doc = this.wrapper.ownerDocument;
|
||||
let input = doc.querySelector('#vimvixen-console-command-input');
|
||||
|
||||
switch (e.keyCode) {
|
||||
case KeyboardEvent.DOM_VK_ESCAPE:
|
||||
return input.blur();
|
||||
case KeyboardEvent.DOM_VK_RETURN:
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_ENTERED,
|
||||
text: e.target.value
|
||||
});
|
||||
case KeyboardEvent.DOM_VK_TAB:
|
||||
if (e.shiftKey) {
|
||||
this.store.dispatch(completionActions.selectPrev());
|
||||
} else {
|
||||
this.store.dispatch(completionActions.selectNext());
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onKeyUp(e) {
|
||||
if (e.keyCode === KeyboardEvent.DOM_VK_TAB) {
|
||||
return;
|
||||
}
|
||||
if (e.target.value === this.prevValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
let doc = this.wrapper.ownerDocument;
|
||||
let input = doc.querySelector('#vimvixen-console-command-input');
|
||||
this.completionOrigin = input.value;
|
||||
|
||||
this.prevValue = e.target.value;
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_CHANGEED,
|
||||
text: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
// TODO use store/reducer to update state.
|
||||
update(state) {
|
||||
if (!this.prevState.commandShown && state.commandShown) {
|
||||
this.showCommand(state.commandText);
|
||||
} else if (!state.commandShown) {
|
||||
this.hideCommand();
|
||||
}
|
||||
|
||||
if (state.errorShown) {
|
||||
this.setErrorText(state.errorText);
|
||||
this.showError();
|
||||
} else {
|
||||
this.hideError();
|
||||
}
|
||||
|
||||
this.prevState = state;
|
||||
}
|
||||
|
||||
showCommand(text) {
|
||||
let doc = this.wrapper.ownerDocument;
|
||||
let command = doc.querySelector('#vimvixen-console-command');
|
||||
let input = doc.querySelector('#vimvixen-console-command-input');
|
||||
|
||||
command.style.display = 'block';
|
||||
input.value = text;
|
||||
input.focus();
|
||||
}
|
||||
|
||||
hideCommand() {
|
||||
let doc = this.wrapper.ownerDocument;
|
||||
let command = doc.querySelector('#vimvixen-console-command');
|
||||
command.style.display = 'none';
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
setErrorText(text) {
|
||||
let doc = this.wrapper.ownerDocument;
|
||||
let error = doc.querySelector('#vimvixen-console-error');
|
||||
error.textContent = text;
|
||||
}
|
||||
|
||||
showError() {
|
||||
let doc = this.wrapper.ownerDocument;
|
||||
let error = doc.querySelector('#vimvixen-console-error');
|
||||
error.style.display = 'block';
|
||||
}
|
||||
|
||||
hideError() {
|
||||
let doc = this.wrapper.ownerDocument;
|
||||
let error = doc.querySelector('#vimvixen-console-error');
|
||||
error.style.display = 'none';
|
||||
}
|
||||
}
|
|
@ -1,114 +1,39 @@
|
|||
import './console.scss';
|
||||
import messages from '../content/messages';
|
||||
import CompletionComponent from '../components/completion';
|
||||
import ConsoleComponent from '../components/console';
|
||||
import completionReducer from '../reducers/completion';
|
||||
import * as store from '../store';
|
||||
import * as completionActions from '../actions/completion';
|
||||
|
||||
const completionStore = store.createStore(completionReducer);
|
||||
let completionComponent = null;
|
||||
let consoleComponent = null;
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
let wrapper = document.querySelector('#vimvixen-console-completion');
|
||||
completionComponent = new CompletionComponent(wrapper, completionStore);
|
||||
});
|
||||
|
||||
// TODO consider object-oriented
|
||||
let prevValue = '';
|
||||
let completionOrigin = '';
|
||||
let prevState = {};
|
||||
// TODO use root root store instead of completionStore
|
||||
consoleComponent = new ConsoleComponent(document.body, completionStore);
|
||||
});
|
||||
|
||||
completionStore.subscribe(() => {
|
||||
completionComponent.update();
|
||||
|
||||
let state = completionStore.getState();
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
|
||||
if (state.groupSelection >= 0) {
|
||||
let item = state.groups[state.groupSelection].items[state.itemSelection];
|
||||
input.value = item.content;
|
||||
consoleComponent.setCommandValue(item.content);
|
||||
} else if (state.groups.length > 0) {
|
||||
input.value = completionOrigin;
|
||||
consoleComponent.setCommandCompletionOrigin();
|
||||
}
|
||||
});
|
||||
|
||||
const handleBlur = () => {
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_BLURRED,
|
||||
});
|
||||
};
|
||||
|
||||
const handleKeydown = (e) => {
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
|
||||
switch (e.keyCode) {
|
||||
case KeyboardEvent.DOM_VK_ESCAPE:
|
||||
return input.blur();
|
||||
case KeyboardEvent.DOM_VK_RETURN:
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_ENTERED,
|
||||
text: e.target.value
|
||||
});
|
||||
case KeyboardEvent.DOM_VK_TAB:
|
||||
if (e.shiftKey) {
|
||||
completionStore.dispatch(completionActions.selectPrev());
|
||||
} else {
|
||||
completionStore.dispatch(completionActions.selectNext());
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyup = (e) => {
|
||||
if (e.keyCode === KeyboardEvent.DOM_VK_TAB) {
|
||||
return;
|
||||
}
|
||||
if (e.target.value === prevValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
completionOrigin = input.value;
|
||||
|
||||
prevValue = e.target.value;
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_CHANGEED,
|
||||
text: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
input.addEventListener('blur', handleBlur);
|
||||
input.addEventListener('keydown', handleKeydown);
|
||||
input.addEventListener('keyup', handleKeyup);
|
||||
});
|
||||
|
||||
const updateCompletions = (completions) => {
|
||||
completionStore.dispatch(completionActions.setItems(completions));
|
||||
};
|
||||
|
||||
const update = (state) => {
|
||||
let error = window.document.querySelector('#vimvixen-console-error');
|
||||
let command = window.document.querySelector('#vimvixen-console-command');
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
consoleComponent.update(state);
|
||||
|
||||
error.style.display = state.errorShown ? 'block' : 'none';
|
||||
error.textContent = state.errorText;
|
||||
|
||||
command.style.display = state.commandShown ? 'block' : 'none';
|
||||
if (state.commandShown && !prevState.commandShown) {
|
||||
input.value = state.commandText;
|
||||
input.focus();
|
||||
}
|
||||
if (JSON.stringify(state.completions) !==
|
||||
JSON.stringify(prevState.completions)) {
|
||||
updateCompletions(state.completions);
|
||||
}
|
||||
|
||||
prevState = state;
|
||||
completionStore.dispatch(completionActions.setItems(state.completions));
|
||||
};
|
||||
|
||||
browser.runtime.onMessage.addListener((action) => {
|
||||
|
|
Reference in a new issue