console component

2 files changed, 137 insertions, 0 deletions

diff --git a/src/components/completion.js b/src/components/completion.js
index e6ee0cb..489061c 100644
--- a/src/components/completion.js
+++ b/src/components/completion.js
@@ -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) {
diff --git a/src/components/console.js b/src/components/console.js
new file mode 100644
index 0000000..a4bdad5
--- /dev/null
+++ b/src/components/console.js
@@ -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';
+  }
+}