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

Merge branch 'iframe-command-line'

Browse Source
jh-changes
Shin'ya Ueoka 7 years ago
parent 21404ad534 b711678329
commit f1b9c6ba9d
12 changed files with 1713 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      manifest.json
  2. 1501
      package-lock.json
  3. 3
      package.json
  4. 19
      src/command-line/command-line-frame.js
  5. 11
      src/command-line/command-line-frame.scss
  6. 18
      src/command-line/command-line.html
  7. 64
      src/command-line/command-line.js
  8. 52
      src/command-line/command-line.scss
  9. 46
      src/content/footer-line.css
  10. 78
      src/content/footer-line.js
  11. 62
      src/content/index.js
  12. 18
      webpack.config.js

7
manifest.json
Unescape View File

@ -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"
] ]
} }

1501
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
Unescape View File

@ -24,6 +24,7 @@
"chai": "^4.1.1", "chai": "^4.1.1",
"css-loader": "^0.28.4", "css-loader": "^0.28.4",
"eslint": "^4.4.1", "eslint": "^4.4.1",
"html-webpack-plugin": "^2.30.1",
"karma": "^1.7.0", "karma": "^1.7.0",
"karma-firefox-launcher": "^1.0.1", "karma-firefox-launcher": "^1.0.1",
"karma-html2js-preprocessor": "^1.1.0", "karma-html2js-preprocessor": "^1.1.0",
@ -32,6 +33,8 @@
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4", "karma-webpack": "^2.0.4",
"mocha": "^3.5.0", "mocha": "^3.5.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2", "style-loader": "^0.18.2",
"webpack": "^3.5.3" "webpack": "^3.5.3"
} }

19
src/command-line/command-line-frame.js
Unescape View File

@ -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();
}
}

11
src/command-line/command-line-frame.scss
Unescape View File

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

18
src/command-line/command-line.html
Unescape View File

@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
<title>VimVixen command-line</title>
<script src='command-line.js'></script>
</head>
<body class='vimvixen-command-line'>
<div>
<p class='vimvixen-command-line-title'></p>
<div class='vimvixen-command-line-line'>
<i class='vimvixen-command-line-line-prompt'></i><input
id='vimvixen-command-line-line-input'
class='vimvixen-command-line-line-input'></input>
</div>
</div>
</body>
</html>

64
src/command-line/command-line.js
Unescape View File

@ -0,0 +1,64 @@
import './command-line.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();
});

52
src/command-line/command-line.scss
Unescape View File

@ -0,0 +1,52 @@
html, body, * {
margin: 0;
padding: 0;
}
body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.vimvixen-command-line {
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;
}
&-line {
background-color: white;
display: flex;
&-prompt:before {
content: ':';
@include input-style;
}
&-input {
border: none;
flex-grow: 1;
@include input-style;
}
}
}

46
src/content/footer-line.css
Unescape View File

@ -1,46 +0,0 @@
.vimvixen-footerline {
border-top: 1px solid gray;
bottom: 0;
box-sizing: border-box;
font-family: monospace;
font-size: 12px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
right: 0;
z-index: 10000;
}
.vimvixen-footerline-title {
background-color: lightgray;
font-weight: bold;
margin: 0;
padding: 0;
}
.vimvixen-footerline-container-outer {
background-color: white;
position: relative;
}
.vimvixen-footerline-container-outer:before {
content: ':';
background-color: white;
float: left;
text-align: right;
width: 12px;
}
.vimvixen-footerline-container-inner {
position: absolute;
left: 12px;
right: 0;
}
.vimvixen-footerline-input {
margin: 0;
padding: 0;
width: 100%;
border: none;
}

78
src/content/footer-line.js
Unescape View File

@ -1,78 +0,0 @@
import './footer-line.css';
export default class FooterLine {
constructor(doc, initial = '') {
this.initUi(doc);
this.enteredCallback = () => {}
this.promptChangeCallback = () => {}
this.input.addEventListener('blur', this.handleBlur.bind(this));
this.input.addEventListener('keydown', this.handleKeydown.bind(this));
this.input.addEventListener('keyup', this.handleKeyup.bind(this));
this.input.value = initial;
}
initUi(doc) {
this.title = doc.createElement('p');
this.title.className = 'vimvixen-footerline-title';
let containerInner = doc.createElement('div');
containerInner.className = 'vimvixen-footerline-container-inner';
let containerOuter = doc.createElement('div');
containerOuter.className = 'vimvixen-footerline-container-outer';
this.input = doc.createElement('input');
this.input.className = 'vimvixen-footerline-input';
this.wrapper = doc.createElement('div');
this.wrapper.className = 'vimvixen-footerline';
containerOuter.append(containerInner);
containerInner.append(this.input);
this.wrapper.append(this.title);
this.wrapper.append(containerOuter);
doc.body.append(this.wrapper)
}
focus() {
this.input.focus();
}
remove() {
this.wrapper.remove();
}
onPromptChange(callback) {
this.promptChangeCallback = callback;
}
onEntered(callback) {
this.enteredCallback = callback;
}
handleBlur() {
this.remove();
}
handleKeydown(e) {
this.prevValue = e.target.value;
switch(e.keyCode) {
case KeyboardEvent.DOM_VK_ESCAPE:
this.remove();
break;
case KeyboardEvent.DOM_VK_RETURN:
this.enteredCallback(e);
break;
}
}
handleKeyup(e) {
if (e.target.value === this.prevValue) {
return;
}
this.promptChangeCallback(e);
this.prevValue = e.target.value;
}
}

62
src/content/index.js
Unescape View File

@ -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;
}
});

18
webpack.config.js
Unescape View File

@ -1,3 +1,4 @@
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path'); var path = require('path');
const src = path.resolve(__dirname, 'src'); const src = path.resolve(__dirname, 'src');
@ -6,7 +7,8 @@ const dist = path.resolve(__dirname, 'build');
module.exports = { module.exports = {
entry: { entry: {
index: path.join(src, 'content'), index: path.join(src, 'content'),
background: path.join(src, 'background') background: path.join(src, 'background'),
'command-line': path.join(src, 'command-line', 'command-line.js')
}, },
output: { output: {
@ -28,10 +30,22 @@ module.exports = {
test: /\.css$/, test: /\.css$/,
loader: 'style-loader!css-loader', loader: 'style-loader!css-loader',
}, },
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader?sourceMap=true'
},
] ]
}, },
resolve: { resolve: {
extensions: [ '.js' ] extensions: [ '.js' ]
} },
plugins: [
new HtmlWebpackPlugin({
template: path.join(src, 'command-line', 'command-line.html'),
filename: path.join(dist, 'command-line.html'),
inject: false
})
]
}; };