aboutsummaryrefslogtreecommitdiff
path: root/src/console
diff options
context:
space:
mode:
Diffstat (limited to 'src/console')
-rw-r--r--src/console/completion.js26
-rw-r--r--src/console/console-frame.js7
-rw-r--r--src/console/console.html2
-rw-r--r--src/console/console.js119
-rw-r--r--src/console/console.scss44
5 files changed, 188 insertions, 10 deletions
diff --git a/src/console/completion.js b/src/console/completion.js
new file mode 100644
index 0000000..0c21cb0
--- /dev/null
+++ b/src/console/completion.js
@@ -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;
+ }
+}
diff --git a/src/console/console-frame.js b/src/console/console-frame.js
index ea9f523..e6bf3f5 100644
--- a/src/console/console-frame.js
+++ b/src/console/console-frame.js
@@ -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
+ });
+ }
}
diff --git a/src/console/console.html b/src/console/console.html
index 2eb445d..4222f12 100644
--- a/src/console/console.html
+++ b/src/console/console.html
@@ -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'
diff --git a/src/console/console.js b/src/console/console.js
index e0227aa..c32eca0 100644
--- a/src/console/console.js
+++ b/src/console/console.js
@@ -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;
}
});
diff --git a/src/console/console.scss b/src/console/console.scss
index 0de873d..7bb46dd 100644
--- a/src/console/console.scss
+++ b/src/console/console.scss
@@ -8,6 +8,7 @@ body {
bottom: 0;
left: 0;
right: 0;
+ overflow: hidden;
}
.vimvixen-console {
@@ -23,20 +24,45 @@ body {
line-height: 16px;
}
- &-error {
- background-color: red;
- font-weight: bold;
- color: white;
+ &-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;
- &-title {
- background-color: lightgray;
+ &.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;
- margin: 0;
- padding: 0;
+ color: white;
@include consoole-font;
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-17 02:44:58 +0000