1 files changed, 148 insertions, 0 deletions
diff --git a/src/console/components/console.js b/src/console/components/console.js
new file mode 100644
index 0000000..9023d91
--- /dev/null
+++ b/src/console/components/console.js
@@ -0,0 +1,148 @@
+import messages from 'shared/messages';
+import * as consoleActions from 'console/actions/console';
+
+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));
+
+    this.hideCommand();
+    this.hideError();
+  }
+
+  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
+      }).then(this.onBlur);
+    case KeyboardEvent.DOM_VK_TAB:
+      if (e.shiftKey) {
+        this.store.dispatch(consoleActions.completionPrev());
+      } else {
+        this.store.dispatch(consoleActions.completionNext());
+      }
+      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_QUERY_COMPLETIONS,
+      text: e.target.value
+    }).then((completions) => {
+      this.store.dispatch(consoleActions.setCompletions(completions));
+    });
+  }
+
+  update() {
+    let state = this.store.getState();
+    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();
+    }
+
+    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;
+  }
+
+  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';
+  }
+}