clean completion

src/console/console.js

@@ -6,7 +6,7 @@ const parent = window.parent;
 
 // TODO consider object-oriented
 var prevValue = "";
-window.completion = null;
+var completion = null;
 var completionOrigin = "";
 
 const blurMessage = () => {
@@ -34,10 +34,10 @@ const handleBlur = () => {
 };
 
 const completeNext = () => {
-  if (!window.completion) {
+  if (!completion) {
     return;
   }
-  let item = window.completion.next();
+  let item = completion.next();
   if (!item) {
     return;
   }
@@ -49,10 +49,10 @@ const completeNext = () => {
 }
 
 const completePrev = () => {
-  if (!window.completion) {
+  if (!completion) {
     return;
   }
-  let item = window.completion.prev();
+  let item = completion.prev();
   if (!item) {
     return;
   }
@@ -125,53 +125,67 @@ const showError = (text) => {
   completion.style.display = 'none';
 }
 
+const createCompletionTitle = (text) => {
+  let li = document.createElement('li');
+  li.className = 'vimvixen-console-completion-title';
+  li.textContent = text;
+  return li
+}
+
+const createCompletionItem = (icon, caption, url) => {
+  let captionEle = document.createElement('span');
+  captionEle.className = 'vimvixen-console-completion-item-caption';
+  captionEle.textContent = caption
+
+  let urlEle = document.createElement('span');
+  urlEle.className = 'vimvixen-console-completion-item-url';
+  urlEle.textContent = url
+
+  let li = document.createElement('li');
+  li.style.backgroundImage = 'url(' + icon + ')';
+  li.className = 'vimvixen-console-completion-item';
+  li.append(captionEle);
+  li.append(urlEle);
+  return li;
+}
+
 const setCompletions = (completions) => {
-  let completion  = window.document.querySelector('#vimvixen-console-completion');
+  let container  = window.document.querySelector('#vimvixen-console-completion');
-  completion.style.display = 'block';
+  container.style.display = 'block';
-  completion.innerHTML = '';
+  container.innerHTML = '';
 
   let pairs = [];
 
   for (let group of completions) {
-    let title = window.document.createElement('li');
+    let title = createCompletionTitle(group.name);
-    title.className = 'vimvixen-console-completion-title';
+    container.append(title);
-    title.textContent = group.name;
-
-    completion.append(title);
 
     for (let item of group.items) {
-      let caption = window.document.createElement('span');
+      let li = createCompletionItem(item.icon, item.caption, item.url);
-      caption.textContent = item.caption;
+      container.append(li);
-      caption.className = 'vimvixen-console-completion-item-caption';
-
-      let url = window.document.createElement('span');
-      url.textContent = item.url;
-      url.className = 'vimvixen-console-completion-item-url';
-
-      let li = window.document.createElement('li');
-      li.style.backgroundImage = 'url(' + item.icon + ')';
-      li.className = 'vimvixen-console-completion-item';
-      li.append(caption);
-      li.append(url);
-
-      completion.append(li);
 
       pairs.push([item, li]);
     }
   }
 
-  window.completion = new Completion(pairs);
+  completion = new Completion(pairs);
 
   let input = window.document.querySelector('#vimvixen-console-command-input');
   completionOrigin = input.value.split(' ')[0];
 }
 
-const selectCompletion = (element) => {
+const selectCompletion = (target) => {
-  let elements = window.document.querySelectorAll('.vimvixen-console-completion-item');
+  let container  = window.document.querySelector('#vimvixen-console-completion');
-  Array.prototype.forEach.call(elements, (ele) => {
+  Array.prototype.forEach.call(container.children, (ele) => {
-    ele.className = 'vimvixen-console-completion-item';
+    if (!ele.classList.contains('vimvixen-console-completion-item')) {
+      return;
+    }
+    if (ele === target) {
+      ele.classList.add('vimvixen-completion-selected');
+    } else {
+      ele.classList.remove('vimvixen-completion-selected');
+    }
   });
-  element.classList.add('vimvixen-completion-selected');
 };
 
 messages.receive(window, (message) => {