use iframe-ed command-line

jh-changes
Shin'ya Ueoka 7 years ago
parent a808b28940
commit dc42864607
  1. 7
      manifest.json
  2. 19
      src/command-line/command-line-frame.js
  3. 11
      src/command-line/command-line-frame.scss
  4. 4
      src/command-line/index.html
  5. 63
      src/command-line/index.js
  6. 62
      src/content/index.js

@ -10,9 +10,14 @@
} }
], ],
"background": { "background": {
"scripts": ["build/background.js"] "scripts": [
"build/background.js"
]
}, },
"permissions": [ "permissions": [
"sessions" "sessions"
],
"web_accessible_resources": [
"build/command-line.html"
] ]
} }

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

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

@ -9,7 +9,9 @@
<div> <div>
<p class='vimvixen-command-line-title'></p> <p class='vimvixen-command-line-title'></p>
<div class='vimvixen-command-line-line'> <div class='vimvixen-command-line-line'>
<i class='vimvixen-command-line-line-prompt'></i><input class='vimvixen-command-line-line-input'></input> <i class='vimvixen-command-line-line-prompt'></i><input
id='vimvixen-command-line-line-input'
class='vimvixen-command-line-line-input'></input>
</div> </div>
</div> </div>
</body> </body>

@ -1 +1,64 @@
import './index.scss'; import './index.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-command-line-line-input');
input.addEventListener('blur', handleBlur);
input.addEventListener('keydown', handleKeydown);
input.addEventListener('keyup', handleKeyup);
input.value = initial;
input.focus();
});

@ -1,29 +1,10 @@
import * as scrolls from './scrolls'; import * as scrolls from './scrolls';
import * as histories from './histories'; import * as histories from './histories';
import * as actions from '../shared/actions'; import * as actions from '../shared/actions';
import FooterLine from './footer-line'; import CommandLineFrame from '../command-line/command-line-frame';
import Follow from './follow'; import Follow from './follow';
var footer = null; let cmd = null;
const createFooterLine = (initial = '') => {
footer = new FooterLine(document, initial);
footer.onPromptChange((e) => {
let request = {
type: 'event.cmd.suggest',
text: e.target.value
};
browser.runtime.sendMessage(request);
});
footer.onEntered((e) => {
let request = {
type: 'event.cmd.enter',
text: e.target.value
};
browser.runtime.sendMessage(request);
});
footer.focus();
}
const invokeEvent = (action) => { const invokeEvent = (action) => {
if (typeof action === 'undefined' || action === null) { if (typeof action === 'undefined' || action === null) {
@ -32,14 +13,14 @@ const invokeEvent = (action) => {
switch (action[0]) { switch (action[0]) {
case actions.CMD_OPEN: case actions.CMD_OPEN:
createFooterLine(); cmd = new CommandLineFrame(window);
break; break;
case actions.CMD_TABS_OPEN: case actions.CMD_TABS_OPEN:
if (action[1] || false) { if (action[1] || false) {
// alter url // alter url
createFooterLine('open ' + window.location.href); cmd = new CommandLineFrame(window, 'open ' + window.location.href);
} else { } else {
createFooterLine('open '); cmd = new CommandLineFrame(window, 'open ');
} }
break; break;
case actions.SCROLL_LINES: case actions.SCROLL_LINES:
@ -89,3 +70,36 @@ window.addEventListener("keypress", (e) => {
console.log(`Vim Vixen: ${err}`); console.log(`Vim Vixen: ${err}`);
}); });
}); });
window.addEventListener('message', (e) => {
let message;
try {
message = JSON.parse(e.data);
} catch (e) {
// ignore message posted by author of web page
return;
}
switch (message.type) {
case 'vimvixen.commandline.blur':
if (cmd) {
cmd.remove();
cmd = null;
}
break;
case 'vimvixen.commandline.enter':
browser.runtime.sendMessage({
type: 'event.cmd.enter',
text: message.value
});
break;
case 'vimvixen.commandline.change':
browser.runtime.sendMessage({
type: 'event.cmd.suggest',
text: message.value
});
break;
default:
return;
}
});