completion hightlight

2 files changed, 23 insertions, 9 deletions

diff --git a/src/console/console.js b/src/console/console.js
index d139a50..da6e3ca 100644
--- a/src/console/console.js
+++ b/src/console/console.js
@@ -43,7 +43,9 @@ const completeNext = () => {
   }
 
   let input = window.document.querySelector('#vimvixen-console-command-input');
-  input.value = completionOrigin + ' ' + item.content;
+  input.value = completionOrigin + ' ' + item[0].content;
+
+  selectCompletion(item[1]);
 }
 
 const completePrev = () => {
@@ -56,7 +58,9 @@ const completePrev = () => {
   }
 
   let input = window.document.querySelector('#vimvixen-console-command-input');
-  input.value = completionOrigin + ' ' + item.content;
+  input.value = completionOrigin + ' ' + item[0].content;
+
+  selectCompletion(item[1]);
 }
 
 const handleKeydown = (e) => {
@@ -126,6 +130,8 @@ const setCompletions = (completions) => {
   completion.style.display = 'block';
   completion.innerHTML = '';
 
+  let pairs = [];
+
   for (let group of completions) {
     let title = window.document.createElement('li');
     title.className = 'vimvixen-console-completion-title';
@@ -147,22 +153,27 @@ const setCompletions = (completions) => {
       li.className = 'vimvixen-console-completion-item';
       li.append(caption);
       li.append(url);
-      li.setAttribute('data-content', item.content);
 
       completion.append(li);
+
+      pairs.push([item, li]);
     }
   }
 
-  let flatten = [];
-  for (let group of completions) {
-    flatten = flatten.concat(group.items);
-  }
-  window.completion = new Completion(flatten);
+  window.completion = new Completion(pairs);
 
   let input = window.document.querySelector('#vimvixen-console-command-input');
   completionOrigin = input.value.split(' ')[0];
 }
 
+const selectCompletion = (element) => {
+  let elements = window.document.querySelectorAll('.vimvixen-console-completion-item');
+  Array.prototype.forEach.call(elements, (ele) => {
+    ele.className = 'vimvixen-console-completion-item';
+  });
+  element.classList.add('vimvixen-completion-selected');
+};
+
 messages.receive(window, (message) => {
   switch (message.type) {
   case 'vimvixen.console.show.command':
diff --git a/src/console/console.scss b/src/console/console.scss
index c22b14f..7bb46dd 100644
--- a/src/console/console.scss
+++ b/src/console/console.scss
@@ -43,6 +43,10 @@ body {
       background-repeat: no-repeat;
       white-space: nowrap;
 
+      &.vimvixen-completion-selected {
+        background-color: yellow;
+      }
+
       &-caption {
         display: inline-block;
         width: 40%;
@@ -53,7 +57,6 @@ body {
         color: green;
       }
     }
-
   }
 
   &-error {