jab2870/Vim-Vixen
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Rename command-line to console

Browse source
This commit is contained in:
Shin'ya Ueoka 2017-09-01 08:51:14 +09:00
parent f1b9c6ba9d
commit 6e5286ef10
9 changed files with 35 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/console/console-frame.js Normal file
View file

@ -0,0 +1,19 @@
import './console-frame.scss';
export default class ConsoleFrame {
constructor(win, initial = '') {
let url = browser.runtime.getURL('build/console.html') +
'#' + encodeURIComponent(initial);
let element = window.document.createElement('iframe');
element.src = url;
element.className = 'vimvixen-console-frame';
win.document.body.append(element);
this.element = element;
}
remove() {
this.element.remove();
}
}

11
src/console/console-frame.scss Normal file
View file

@ -0,0 +1,11 @@
.vimvixen-console-frame {
margin: 0;
padding: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 10000;
border: none;
}

18
src/console/console.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
<title>VimVixen console</title>
<script src='console.js'></script>
</head>
<body class='vimvixen-console'>
<div>
<p class='vimvixen-console-title'></p>
<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>

64
src/console/console.js Normal file
View file

@ -0,0 +1,64 @@
import './console.scss';
const parent = window.parent;
// TODO consider object-oriented
var prevValue = "";
const blurData = () => {
return JSON.stringify({
type: 'vimvixen.commandline.blur'
});
};
const keydownData = (input) => {
return JSON.stringify({
type: 'vimvixen.commandline.enter',
value: input.value
});
};
const keyupData = (input) => {
return JSON.stringify({
type: 'vimvixen.commandline.change',
value: input.value
});
};
const handleBlur = () => {
parent.postMessage(blurData(), '*');
};
const handleKeydown = (e) => {
switch(e.keyCode) {
case KeyboardEvent.DOM_VK_ESCAPE:
parent.postMessage(blurData(), '*');
break;
case KeyboardEvent.DOM_VK_RETURN:
parent.postMessage(keydownData(e.target), '*');
break;
}
};
const handleKeyup = (e) => {
if (e.target.value === prevValue) {
return;
}
parent.postMessage(keyupData(e.target), '*');
prevValue = e.target.value;
};
window.addEventListener('load', () => {
let hash = window.location.hash;
let initial = '';
if (hash.length > 0) {
initial = decodeURIComponent(hash.substring(1));
}
let input = window.document.querySelector('#vimvixen-console-command-input');
input.addEventListener('blur', handleBlur);
input.addEventListener('keydown', handleKeydown);
input.addEventListener('keyup', handleKeyup);
input.value = initial;
input.focus();
});

52
src/console/console.scss Normal file
View file

@ -0,0 +1,52 @@
html, body, * {
margin: 0;
padding: 0;
}
body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.vimvixen-console {
border-top: 1px solid gray;
bottom: 0;
margin: 0;
padding: 0;
@mixin input-style {
font-style: normal;
font-family: monospace;
font-size: 12px;
}
&-title {
background-color: lightgray;
font-weight: bold;
margin: 0;
padding: 0;
@include input-style;
}
&-command {
background-color: white;
display: flex;
&-prompt:before {
content: ':';
@include input-style;
}
&-input {
border: none;
flex-grow: 1;
@include input-style;
}
}
}