65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
export default class Completion {
|
|
constructor(wrapper, store) {
|
|
this.wrapper = wrapper;
|
|
this.store = store;
|
|
this.prevState = {};
|
|
|
|
store.subscribe(() => {
|
|
this.update();
|
|
});
|
|
}
|
|
|
|
update() {
|
|
let state = this.store.getState();
|
|
if (JSON.stringify(this.prevState) === JSON.stringify(state)) {
|
|
return;
|
|
}
|
|
|
|
this.wrapper.innerHTML = '';
|
|
|
|
for (let i = 0; i < state.completions.length; ++i) {
|
|
let group = state.completions[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;
|
|
}
|
|
}
|