Merge branch 'buffer-completion'
This commit is contained in:
commit
2cbdc483b7
9 changed files with 292 additions and 32 deletions
|
@ -55,9 +55,9 @@ const normalizeUrl = (string) => {
|
|||
}
|
||||
}
|
||||
|
||||
const cmdBuffer = (arg) => {
|
||||
const cmdBuffer = (sender, arg) => {
|
||||
if (isNaN(arg)) {
|
||||
return tabs.selectByKeyword(arg);
|
||||
return tabs.selectByKeyword(sender.tab, arg);
|
||||
} else {
|
||||
let index = parseInt(arg, 10) - 1;
|
||||
return tabs.selectAt(index);
|
||||
|
@ -73,7 +73,7 @@ const cmdEnterHandle = (request, sender) => {
|
|||
return browser.tabs.create({ url: normalizeUrl(words[1]) });
|
||||
case 'b':
|
||||
case 'buffer':
|
||||
return cmdBuffer(words[1]);
|
||||
return cmdBuffer(sender, words[1]);
|
||||
}
|
||||
throw new Error(words[0] + ' command is not defined');
|
||||
};
|
||||
|
@ -84,9 +84,20 @@ browser.runtime.onMessage.addListener((request, sender) => {
|
|||
return keyPressHandle(request, sender);
|
||||
case 'event.cmd.enter':
|
||||
return cmdEnterHandle(request, sender);
|
||||
case 'event.cmd.suggest':
|
||||
// TODO make suggestion and return
|
||||
break;
|
||||
case 'event.cmd.tabs.completion':
|
||||
return tabs.getCompletions(request.text).then((tabs) => {
|
||||
let items = tabs.map((tab) => {
|
||||
return {
|
||||
caption: tab.title,
|
||||
content: tab.title,
|
||||
url: tab.url,
|
||||
icon: tab.favIconUrl
|
||||
}
|
||||
});
|
||||
return {
|
||||
name: "Buffers",
|
||||
items: items
|
||||
};
|
||||
});
|
||||
}
|
||||
return Promise.resolve();
|
||||
});
|
||||
|
|
|
@ -31,7 +31,7 @@ const selectAt = (index) => {
|
|||
});
|
||||
};
|
||||
|
||||
const selectByKeyword = (keyword) => {
|
||||
const selectByKeyword = (current, keyword) => {
|
||||
return browser.tabs.query({ currentWindow: true }).then((tabs) => {
|
||||
let matched = tabs.filter((t) => {
|
||||
return t.url.includes(keyword) || t.title.includes(keyword)
|
||||
|
@ -39,14 +39,25 @@ const selectByKeyword = (keyword) => {
|
|||
|
||||
if (matched.length == 0) {
|
||||
throw new RangeError('No matching buffer for ' + keyword);
|
||||
} else if (matched.length >= 2) {
|
||||
throw new RangeError('More than one match for ' + keyword);
|
||||
}
|
||||
|
||||
for (let tab of matched) {
|
||||
if (tab.index > current.index) {
|
||||
return browser.tabs.update(tab.id, { active: true });
|
||||
}
|
||||
}
|
||||
return browser.tabs.update(matched[0].id, { active: true });
|
||||
});
|
||||
}
|
||||
|
||||
const getCompletions = (keyword) => {
|
||||
return browser.tabs.query({ currentWindow: true }).then((tabs) => {
|
||||
let matched = tabs.filter((t) => {
|
||||
return t.url.includes(keyword) || t.title.includes(keyword)
|
||||
})
|
||||
return matched;
|
||||
});
|
||||
};
|
||||
|
||||
const selectPrevTab = (current, count) => {
|
||||
return browser.tabs.query({ currentWindow: true }, (tabs) => {
|
||||
if (tabs.length < 2) {
|
||||
|
@ -76,4 +87,4 @@ const reload = (current, cache) => {
|
|||
);
|
||||
};
|
||||
|
||||
export { closeTab, reopenTab, selectAt, selectByKeyword, selectNextTab, selectPrevTab, reload };
|
||||
export { closeTab, reopenTab, selectAt, selectByKeyword, getCompletions, selectPrevTab, selectNextTab, reload };
|
||||
|
|
26
src/console/completion.js
Normal file
26
src/console/completion.js
Normal file
|
@ -0,0 +1,26 @@
|
|||
export default class Completion {
|
||||
constructor(completions) {
|
||||
if (typeof completions.length !== 'number') {
|
||||
throw new TypeError('completions does not have a length in number');
|
||||
}
|
||||
this.completions = completions
|
||||
this.index = 0;
|
||||
}
|
||||
|
||||
prev() {
|
||||
if (this.completions.length === 0) {
|
||||
return null;
|
||||
}
|
||||
this.index = (this.index + this.completions.length - 1) % this.completions.length
|
||||
return this.completions[this.index];
|
||||
}
|
||||
|
||||
next() {
|
||||
if (this.completions.length === 0) {
|
||||
return null;
|
||||
}
|
||||
let item = this.completions[this.index];
|
||||
this.index = (this.index + 1) % this.completions.length
|
||||
return item;
|
||||
}
|
||||
}
|
|
@ -51,4 +51,11 @@ export default class ConsoleFrame {
|
|||
isErrorShown() {
|
||||
return this.element.style.display === 'block' && this.errorShown;
|
||||
}
|
||||
|
||||
setCompletions(completions) {
|
||||
messages.send(this.element.contentWindow, {
|
||||
type: 'vimvixen.console.set.completions',
|
||||
completions: completions
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<p id='vimvixen-console-error'
|
||||
class='vimvixen-console-error'></p>
|
||||
<div id='vimvixen-console-command'>
|
||||
<p class='vimvixen-console-title'></p>
|
||||
<ul id='vimvixen-console-completion' class='vimvixen-console-completion'></ul>
|
||||
<div class='vimvixen-console-command'>
|
||||
<i class='vimvixen-console-command-prompt'></i><input
|
||||
id='vimvixen-console-command-input'
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
import './console.scss';
|
||||
import Completion from './completion';
|
||||
import * as messages from '../shared/messages';
|
||||
|
||||
const parent = window.parent;
|
||||
|
||||
// TODO consider object-oriented
|
||||
var prevValue = "";
|
||||
var completion = null;
|
||||
var completionOrigin = "";
|
||||
|
||||
const blurMessage = () => {
|
||||
return {
|
||||
|
@ -30,6 +33,36 @@ const handleBlur = () => {
|
|||
messages.send(parent, blurMessage());
|
||||
};
|
||||
|
||||
const completeNext = () => {
|
||||
if (!completion) {
|
||||
return;
|
||||
}
|
||||
let item = completion.next();
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
input.value = completionOrigin + ' ' + item[0].content;
|
||||
|
||||
selectCompletion(item[1]);
|
||||
}
|
||||
|
||||
const completePrev = () => {
|
||||
if (!completion) {
|
||||
return;
|
||||
}
|
||||
let item = completion.prev();
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
input.value = completionOrigin + ' ' + item[0].content;
|
||||
|
||||
selectCompletion(item[1]);
|
||||
}
|
||||
|
||||
const handleKeydown = (e) => {
|
||||
switch(e.keyCode) {
|
||||
case KeyboardEvent.DOM_VK_ESCAPE:
|
||||
|
@ -38,10 +71,22 @@ const handleKeydown = (e) => {
|
|||
case KeyboardEvent.DOM_VK_RETURN:
|
||||
messages.send(parent, keydownMessage(e.target));
|
||||
break;
|
||||
case KeyboardEvent.DOM_VK_TAB:
|
||||
if (e.shiftKey) {
|
||||
completePrev();
|
||||
} else {
|
||||
completeNext();
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyup = (e) => {
|
||||
if (e.keyCode === KeyboardEvent.DOM_VK_TAB) {
|
||||
return;
|
||||
}
|
||||
if (e.target.value === prevValue) {
|
||||
return;
|
||||
}
|
||||
|
@ -66,6 +111,11 @@ const showCommand = (text) => {
|
|||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
input.value = text;
|
||||
input.focus();
|
||||
|
||||
completion = null;
|
||||
let container = window.document.querySelector('#vimvixen-console-completion');
|
||||
container.innerHTML = '';
|
||||
messages.send(parent, keyupMessage(input));
|
||||
}
|
||||
|
||||
const showError = (text) => {
|
||||
|
@ -75,8 +125,74 @@ const showError = (text) => {
|
|||
|
||||
let command = window.document.querySelector('#vimvixen-console-command');
|
||||
command.style.display = 'none';
|
||||
|
||||
let completion = window.document.querySelector('#vimvixen-console-completion');
|
||||
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 container = window.document.querySelector('#vimvixen-console-completion');
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
let pairs = [];
|
||||
|
||||
for (let group of completions) {
|
||||
let title = createCompletionTitle(group.name);
|
||||
container.append(title);
|
||||
|
||||
for (let item of group.items) {
|
||||
let li = createCompletionItem(item.icon, item.caption, item.url);
|
||||
container.append(li);
|
||||
|
||||
pairs.push([item, li]);
|
||||
}
|
||||
}
|
||||
|
||||
completion = new Completion(pairs);
|
||||
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
completionOrigin = input.value.split(' ')[0];
|
||||
}
|
||||
|
||||
const selectCompletion = (target) => {
|
||||
let container = window.document.querySelector('#vimvixen-console-completion');
|
||||
Array.prototype.forEach.call(container.children, (ele) => {
|
||||
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');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
messages.receive(window, (message) => {
|
||||
switch (message.type) {
|
||||
case 'vimvixen.console.show.command':
|
||||
|
@ -85,5 +201,8 @@ messages.receive(window, (message) => {
|
|||
case 'vimvixen.console.show.error':
|
||||
showError(message.text);
|
||||
break;
|
||||
case 'vimvixen.console.set.completions':
|
||||
setCompletions(message.completions);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -8,6 +8,7 @@ body {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vimvixen-console {
|
||||
|
@ -23,6 +24,41 @@ body {
|
|||
line-height: 16px;
|
||||
}
|
||||
|
||||
&-completion {
|
||||
background-color: white;
|
||||
|
||||
@include consoole-font;
|
||||
|
||||
&-title {
|
||||
background-color: lightgray;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding-left: 1.5rem;
|
||||
background-position: 0 center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
white-space: nowrap;
|
||||
|
||||
&.vimvixen-completion-selected {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
&-caption {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&-url {
|
||||
display: inline-block;
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
background-color: red;
|
||||
font-weight: bold;
|
||||
|
@ -31,16 +67,6 @@ body {
|
|||
@include consoole-font;
|
||||
}
|
||||
|
||||
|
||||
&-title {
|
||||
background-color: lightgray;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include consoole-font;
|
||||
}
|
||||
|
||||
&-command {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
|
|
|
@ -83,11 +83,27 @@ window.addEventListener("keypress", (e) => {
|
|||
browser.runtime.sendMessage(request)
|
||||
.then(handleResponse)
|
||||
.catch((err) => {
|
||||
console.error("Vim Vixen:", err);
|
||||
vvConsole.showError(err.message);
|
||||
console.log(`Vim Vixen: ${err}`);
|
||||
});
|
||||
});
|
||||
|
||||
const doCompletion = (line) => {
|
||||
if (line.startsWith('buffer ')) {
|
||||
let keyword = line.replace('buffer ', '');
|
||||
|
||||
browser.runtime.sendMessage({
|
||||
type: 'event.cmd.tabs.completion',
|
||||
text: keyword
|
||||
}).then((completions) => {
|
||||
vvConsole.setCompletions([completions]);
|
||||
}).catch((err) => {
|
||||
console.error("Vim Vixen:", err);
|
||||
vvConsole.showError(err.message);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
messages.receive(window, (message) => {
|
||||
switch (message.type) {
|
||||
case 'vimvixen.command.blur':
|
||||
|
@ -99,17 +115,13 @@ messages.receive(window, (message) => {
|
|||
browser.runtime.sendMessage({
|
||||
type: 'event.cmd.enter',
|
||||
text: message.value
|
||||
}).catch((e) => {
|
||||
vvConsole.showError(e.message);
|
||||
}).catch((err) => {
|
||||
console.error("Vim Vixen:", err);
|
||||
vvConsole.showError(err.message);
|
||||
});
|
||||
break;
|
||||
case 'vimvixen.command.change':
|
||||
browser.runtime.sendMessage({
|
||||
type: 'event.cmd.suggest',
|
||||
text: message.value
|
||||
}).catch((e) => {
|
||||
vvConsole.showError(e.message);
|
||||
});
|
||||
doCompletion(message.value);
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
|
|
48
test/console/completion.test.js
Normal file
48
test/console/completion.test.js
Normal file
|
@ -0,0 +1,48 @@
|
|||
import { expect } from "chai";
|
||||
import Completion from '../../src/console/completion';
|
||||
|
||||
describe('Completion class', () => {
|
||||
describe('#constructor', () => {
|
||||
it('creates new object by iterable items', () => {
|
||||
new Completion([1,2,3,4,5]);
|
||||
new Completion([]);
|
||||
new Completion('hello');
|
||||
new Completion('');
|
||||
});
|
||||
|
||||
it('creates new object by iterable items', () => {
|
||||
expect(() => new Completion({ key: 'value' })).to.throw(TypeError);
|
||||
expect(() => new Completion(12345)).to.throw(TypeError);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#next', () => {
|
||||
it('complete next items', () => {
|
||||
let completion = new Completion([3, 4, 5]);
|
||||
expect(completion.next()).to.equal(3);
|
||||
expect(completion.next()).to.equal(4);
|
||||
expect(completion.next()).to.equal(5);
|
||||
expect(completion.next()).to.equal(3);
|
||||
});
|
||||
|
||||
it('returns null when empty completions', () => {
|
||||
let completion = new Completion([]);
|
||||
expect(completion.next()).to.be.null;
|
||||
});
|
||||
});
|
||||
|
||||
describe('#prev', () => {
|
||||
it('complete prev items', () => {
|
||||
let completion = new Completion([3, 4, 5]);
|
||||
expect(completion.prev()).to.equal(5);
|
||||
expect(completion.prev()).to.equal(4);
|
||||
expect(completion.prev()).to.equal(3);
|
||||
expect(completion.prev()).to.equal(5);
|
||||
});
|
||||
|
||||
it('returns null when empty completions', () => {
|
||||
let completion = new Completion([]);
|
||||
expect(completion.prev()).to.be.null;
|
||||
});
|
||||
});
|
||||
});
|
Reference in a new issue