src/components/completion.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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 = '';

    for (let i = 0; i < state.groups.length; ++i) {
      let group = state.groups[i];
      let title = this.createCompletionTitle(group.name);
      this.wrapper.append(title);

      for (let j = 0; j < group.items.length; ++j) {
        let item = group.items[j];
        let li = this.createCompletionItem(item.icon, item.caption, item.url);
        this.wrapper.append(li);

        if (i === state.groupSelection && j === state.itemSelection) {
          li.classList.add('vimvixen-completion-selected');
        }
      }
    }

    this.prevState = state;
  }

  createCompletionTitle(text) {
    let doc = this.wrapper.ownerDocument;
    let li = doc.createElement('li');
    li.className = 'vimvixen-console-completion-title';
    li.textContent = text;
    return li;
  }

  createCompletionItem(icon, caption, url) {
    let doc = this.wrapper.ownerDocument;

    let captionEle = doc.createElement('span');
    captionEle.className = 'vimvixen-console-completion-item-caption';
    captionEle.textContent = caption;

    let urlEle = doc.createElement('span');
    urlEle.className = 'vimvixen-console-completion-item-url';
    urlEle.textContent = url;

    let li = doc.createElement('li');
    li.style.backgroundImage = 'url(' + icon + ')';
    li.className = 'vimvixen-console-completion-item';
    li.append(captionEle);
    li.append(urlEle);
    return li;
  }
}