move messages to content
This commit is contained in:
Shin'ya Ueoka
parent
1145eb3478
commit
6551420e1a
15 changed files with 12 additions and 12 deletions
|
|
@ -1,27 +0,0 @@
|
|||
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() {
|
||||
let length = this.completions.length;
|
||||
if (length === 0) {
|
||||
return null;
|
||||
}
|
||||
this.index = (this.index + length - 1) % 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.vimvixen-console-frame {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
border: none;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>VimVixen console</title>
|
||||
<script src='console.js'></script>
|
||||
</head>
|
||||
<body class='vimvixen-console'>
|
||||
<p id='vimvixen-console-error'
|
||||
class='vimvixen-console-error'></p>
|
||||
<div id='vimvixen-console-command'>
|
||||
<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'
|
||||
class='vimvixen-console-command-input'></input>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
import './console.scss';
|
||||
import Completion from './completion';
|
||||
import messages from '../messages';
|
||||
|
||||
// TODO consider object-oriented
|
||||
let prevValue = '';
|
||||
let completion = null;
|
||||
let completionOrigin = '';
|
||||
let prevState = {};
|
||||
|
||||
const handleBlur = () => {
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_BLURRED,
|
||||
});
|
||||
};
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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) => {
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
|
||||
switch (e.keyCode) {
|
||||
case KeyboardEvent.DOM_VK_ESCAPE:
|
||||
return input.blur();
|
||||
case KeyboardEvent.DOM_VK_RETURN:
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_ENTERED,
|
||||
text: e.target.value
|
||||
});
|
||||
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;
|
||||
}
|
||||
prevValue = e.target.value;
|
||||
return browser.runtime.sendMessage({
|
||||
type: messages.CONSOLE_CHANGEED,
|
||||
text: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
input.addEventListener('blur', handleBlur);
|
||||
input.addEventListener('keydown', handleKeydown);
|
||||
input.addEventListener('keyup', handleKeyup);
|
||||
});
|
||||
|
||||
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 updateCompletions = (completions) => {
|
||||
let completionsContainer =
|
||||
window.document.querySelector('#vimvixen-console-completion');
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
|
||||
completionsContainer.innerHTML = '';
|
||||
|
||||
let pairs = [];
|
||||
|
||||
for (let group of completions) {
|
||||
let title = createCompletionTitle(group.name);
|
||||
completionsContainer.append(title);
|
||||
|
||||
for (let item of group.items) {
|
||||
let li = createCompletionItem(item.icon, item.caption, item.url);
|
||||
completionsContainer.append(li);
|
||||
|
||||
pairs.push([item, li]);
|
||||
}
|
||||
}
|
||||
|
||||
completion = new Completion(pairs);
|
||||
completionOrigin = input.value.split(' ')[0];
|
||||
};
|
||||
|
||||
const update = (state) => {
|
||||
let error = window.document.querySelector('#vimvixen-console-error');
|
||||
let command = window.document.querySelector('#vimvixen-console-command');
|
||||
let input = window.document.querySelector('#vimvixen-console-command-input');
|
||||
|
||||
error.style.display = state.errorShown ? 'block' : 'none';
|
||||
error.textContent = state.errorText;
|
||||
|
||||
command.style.display = state.commandShown ? 'block' : 'none';
|
||||
if (state.commandShown && !prevState.commandShown) {
|
||||
input.value = state.commandText;
|
||||
input.focus();
|
||||
}
|
||||
if (JSON.stringify(state.completions) !==
|
||||
JSON.stringify(prevState.completions)) {
|
||||
updateCompletions(state.completions);
|
||||
}
|
||||
|
||||
prevState = state;
|
||||
};
|
||||
|
||||
browser.runtime.onMessage.addListener((action) => {
|
||||
if (action.type === messages.STATE_UPDATE) {
|
||||
return update(action.state.console);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
let error = window.document.querySelector('#vimvixen-console-error');
|
||||
let command = window.document.querySelector('#vimvixen-console-command');
|
||||
error.style.display = 'none';
|
||||
command.style.display = 'none';
|
||||
});
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
html, body, * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vimvixen-console {
|
||||
border-top: 1px solid gray;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@mixin consoole-font {
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
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%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-url {
|
||||
display: inline-block;
|
||||
color: green;
|
||||
width: 60%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
background-color: red;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
@include consoole-font;
|
||||
}
|
||||
|
||||
&-command {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
|
||||
&-prompt:before {
|
||||
content: ':';
|
||||
|
||||
@include consoole-font;
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
|
||||
@include consoole-font;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import './console-frame.scss';
|
||||
|
||||
const initialize = (doc) => {
|
||||
let iframe = doc.createElement('iframe');
|
||||
iframe.src = browser.runtime.getURL('build/console.html');
|
||||
iframe.id = 'vimvixen-console-frame';
|
||||
iframe.className = 'vimvixen-console-frame';
|
||||
doc.body.append(iframe);
|
||||
|
||||
return iframe;
|
||||
};
|
||||
|
||||
const blur = (doc) => {
|
||||
let iframe = doc.getElementById('vimvixen-console-frame');
|
||||
iframe.blur();
|
||||
};
|
||||
|
||||
export { initialize, blur };
|
||||
Reference in a new issue