aboutsummaryrefslogtreecommitdiff
path: root/src/console
diff options
context:
space:
mode:
Diffstat (limited to 'src/console')
-rw-r--r--src/console/actions/console.js20
-rw-r--r--src/console/actions/index.js2
-rw-r--r--src/console/components/console.js164
-rw-r--r--src/console/index.html3
-rw-r--r--src/console/index.js4
-rw-r--r--src/console/reducers/index.js32
-rw-r--r--src/console/site.scss8
7 files changed, 144 insertions, 89 deletions
diff --git a/src/console/actions/console.js b/src/console/actions/console.js
index 0d891bb..2cf8e8d 100644
--- a/src/console/actions/console.js
+++ b/src/console/actions/console.js
@@ -7,6 +7,12 @@ const showCommand = (text) => {
};
};
+const showFind = () => {
+ return {
+ type: actions.CONSOLE_SHOW_FIND,
+ };
+};
+
const showError = (text) => {
return {
type: actions.CONSOLE_SHOW_ERROR,
@@ -27,10 +33,18 @@ const hideCommand = () => {
};
};
-const setCompletions = (completions) => {
+const setConsoleText = (consoleText) => {
+ return {
+ type: actions.CONSOLE_SET_CONSOLE_TEXT,
+ consoleText,
+ };
+};
+
+const setCompletions = (completionSource, completions) => {
return {
type: actions.CONSOLE_SET_COMPLETIONS,
- completions: completions
+ completionSource,
+ completions,
};
};
@@ -47,6 +61,6 @@ const completionPrev = () => {
};
export {
- showCommand, showError, showInfo, hideCommand,
+ showCommand, showFind, showError, showInfo, hideCommand, setConsoleText,
setCompletions, completionNext, completionPrev
};
diff --git a/src/console/actions/index.js b/src/console/actions/index.js
index c4f88cd..a85e329 100644
--- a/src/console/actions/index.js
+++ b/src/console/actions/index.js
@@ -4,7 +4,9 @@ export default {
CONSOLE_SHOW_ERROR: 'console.show.error',
CONSOLE_SHOW_INFO: 'console.show.info',
CONSOLE_HIDE_COMMAND: 'console.hide.command',
+ CONSOLE_SET_CONSOLE_TEXT: 'console.set.command',
CONSOLE_SET_COMPLETIONS: 'console.set.completions',
CONSOLE_COMPLETION_NEXT: 'console.completion.next',
CONSOLE_COMPLETION_PREV: 'console.completion.prev',
+ CONSOLE_SHOW_FIND: 'console.show.find',
};
diff --git a/src/console/components/console.js b/src/console/components/console.js
index 5028e2a..7bc3364 100644
--- a/src/console/components/console.js
+++ b/src/console/components/console.js
@@ -1,45 +1,44 @@
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() {
- return browser.runtime.sendMessage({
- type: messages.CONSOLE_BLURRED,
- });
+ let state = this.store.getState();
+ if (state.mode === 'command') {
+ this.hideCommand();
+ }
}
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();
+ return this.hideCommand();
case KeyboardEvent.DOM_VK_RETURN:
- return browser.runtime.sendMessage({
- type: messages.CONSOLE_ENTERED,
- text: e.target.value
- }).then(this.onBlur);
+ e.stopPropagation();
+ e.preventDefault();
+ return this.onEntered(e.target.value);
case KeyboardEvent.DOM_VK_TAB:
if (e.shiftKey) {
this.store.dispatch(consoleActions.completionPrev());
@@ -52,94 +51,105 @@ export default class ConsoleComponent {
}
}
+ onEntered(value) {
+ let state = this.store.getState();
+ if (state.mode === 'command') {
+ browser.runtime.sendMessage({
+ 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,
+ }), '*');
+ }
+ }
+
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));
});
}
- update() {
- let state = this.store.getState();
- if (this.prevState.mode !== 'command' && state.mode === 'command') {
- this.showCommand(state.commandText);
- } else if (state.mode !== 'command') {
- this.hideCommand();
- }
+ onInputShown(state) {
+ let doc = this.wrapper.ownerDocument;
+ let input = doc.querySelector('#vimvixen-console-command-input');
- if (state.mode === 'error' || state.mode === 'info') {
- this.showMessage(state.mode, state.messageText);
- } else {
- this.hideMessage();
- }
+ input.focus();
+ window.focus();
- 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();
+ if (state.mode === 'command') {
+ this.onInput({ target: input });
}
+ }
- this.prevState = state;
+ hideCommand() {
+ this.store.dispatch(consoleActions.hideCommand());
+ window.top.postMessage(JSON.stringify({
+ type: messages.CONSOLE_UNFOCUS,
+ }), '*');
}
- showCommand(text) {
- let doc = this.wrapper.ownerDocument;
- let command = doc.querySelector('#vimvixen-console-command');
- let input = doc.querySelector('#vimvixen-console-command-input');
+ update() {
+ let state = this.store.getState();
- command.style.display = 'block';
- input.value = text;
- input.focus();
+ this.updateMessage(state);
+ this.updateCommand(state);
+ this.updatePrompt(state);
- window.focus();
- this.onInput({ target: input });
+ if (this.prevMode !== state.mode && inputShownMode(state)) {
+ this.onInputShown(state);
+ }
+ this.prevMode = state.mode;
}
- hideCommand() {
+ updateMessage(state) {
let doc = this.wrapper.ownerDocument;
- let command = doc.querySelector('#vimvixen-console-command');
- command.style.display = 'none';
- }
+ let box = doc.querySelector('.vimvixen-console-message');
+ let display = 'none';
+ let classList = ['vimvixen-console-message'];
- setCommandValue(value) {
- let doc = this.wrapper.ownerDocument;
- let input = doc.querySelector('#vimvixen-console-command-input');
- input.value = value;
+ if (state.mode === 'error' || state.mode === 'info') {
+ display = 'block';
+ classList.push('vimvixen-console-' + state.mode);
+ }
+
+ box.className = classList.join(' ');
+ box.style.display = display;
+ box.textContent = state.messageText;
}
- setCommandCompletionOrigin() {
+ updateCommand(state) {
let doc = this.wrapper.ownerDocument;
+ let command = doc.querySelector('#vimvixen-console-command');
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';
+ let display = 'none';
+ if (inputShownMode(state)) {
+ display = 'block';
+ }
+
+ command.style.display = display;
+ input.value = state.consoleText;
}
- hideMessage() {
+ updatePrompt(state) {
+ let classList = ['vimvixen-console-command-prompt'];
+ if (inputShownMode(state)) {
+ classList.push('prompt-' + state.mode);
+ }
+
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(' ');
}
}
diff --git a/src/console/index.html b/src/console/index.html
index f41a8dc..52ecb76 100644
--- a/src/console/index.html
+++ b/src/console/index.html
@@ -6,8 +6,7 @@
<script src='console.js'></script>
</head>
<body class='vimvixen-console'>
- <p id='vimvixen-console-message'
- class='vimvixen-console-message'></p>
+ <p class='vimvixen-console-message'></p>
<div id='vimvixen-console-command'>
<ul id='vimvixen-console-completion' class='vimvixen-console-completion'></ul>
<div class='vimvixen-console-command'>
diff --git a/src/console/index.js b/src/console/index.js
index 36473fe..86edd9a 100644
--- a/src/console/index.js
+++ b/src/console/index.js
@@ -18,12 +18,12 @@ const onMessage = (message) => {
switch (message.type) {
case messages.CONSOLE_SHOW_COMMAND:
return store.dispatch(consoleActions.showCommand(message.command));
+ case messages.CONSOLE_SHOW_FIND:
+ return store.dispatch(consoleActions.showFind());
case messages.CONSOLE_SHOW_ERROR:
return store.dispatch(consoleActions.showError(message.text));
case messages.CONSOLE_SHOW_INFO:
return store.dispatch(consoleActions.showInfo(message.text));
- case messages.CONSOLE_HIDE_COMMAND:
- return store.dispatch(consoleActions.hideCommand());
}
};
diff --git a/src/console/reducers/index.js b/src/console/reducers/index.js
index d4affa7..60c0007 100644
--- a/src/console/reducers/index.js
+++ b/src/console/reducers/index.js
@@ -3,7 +3,8 @@ import actions from 'console/actions';
const defaultState = {
mode: '',
messageText: '',
- commandText: '',
+ consoleText: '',
+ completionSource: '',
completions: [],
groupSelection: -1,
itemSelection: -1,
@@ -43,13 +44,25 @@ const prevSelection = (state) => {
return [state.groupSelection, state.itemSelection - 1];
};
+const nextConsoleText = (completions, group, item, defaults) => {
+ if (group < 0 || item < 0) {
+ return defaults;
+ }
+ return completions[group].items[item].content;
+};
+
export default function reducer(state = defaultState, action = {}) {
switch (action.type) {
case actions.CONSOLE_SHOW_COMMAND:
return Object.assign({}, state, {
mode: 'command',
- commandText: action.text,
- errorShown: false,
+ consoleText: action.text,
+ completions: []
+ });
+ case actions.CONSOLE_SHOW_FIND:
+ return Object.assign({}, state, {
+ mode: 'find',
+ consoleText: '',
completions: []
});
case actions.CONSOLE_SHOW_ERROR:
@@ -64,11 +77,16 @@ export default function reducer(state = defaultState, action = {}) {
});
case actions.CONSOLE_HIDE_COMMAND:
return Object.assign({}, state, {
- mode: state.mode === 'command' ? '' : state.mode,
+ mode: state.mode === 'command' || state.mode === 'find' ? '' : state.mode,
+ });
+ case actions.CONSOLE_SET_CONSOLE_TEXT:
+ return Object.assign({}, state, {
+ consoleText: action.consoleText,
});
case actions.CONSOLE_SET_COMPLETIONS:
return Object.assign({}, state, {
completions: action.completions,
+ completionSource: action.completionSource,
groupSelection: -1,
itemSelection: -1,
});
@@ -77,6 +95,9 @@ export default function reducer(state = defaultState, action = {}) {
return Object.assign({}, state, {
groupSelection: next[0],
itemSelection: next[1],
+ consoleText: nextConsoleText(
+ state.completions, next[0], next[1],
+ state.completionSource),
});
}
case actions.CONSOLE_COMPLETION_PREV: {
@@ -84,6 +105,9 @@ export default function reducer(state = defaultState, action = {}) {
return Object.assign({}, state, {
groupSelection: next[0],
itemSelection: next[1],
+ consoleText: nextConsoleText(
+ state.completions, next[0], next[1],
+ state.completionSource),
});
}
default:
diff --git a/src/console/site.scss b/src/console/site.scss
index e5cb2df..cd40db5 100644
--- a/src/console/site.scss
+++ b/src/console/site.scss
@@ -85,9 +85,15 @@ body {
display: flex;
&-prompt:before {
+ @include consoole-font;
+ }
+
+ &-prompt.prompt-command:before {
content: ':';
+ }
- @include consoole-font;
+ &-prompt.prompt-find:before {
+ content: '/';
}
&-input {
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-16 19:47:34 +0000