aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/command-line/command-line-frame.js19
-rw-r--r--src/command-line/command-line-frame.scss11
-rw-r--r--src/command-line/command-line.html18
-rw-r--r--src/command-line/command-line.js64
-rw-r--r--src/command-line/command-line.scss52
-rw-r--r--src/content/footer-line.css46
-rw-r--r--src/content/footer-line.js78
-rw-r--r--src/content/index.js62
8 files changed, 202 insertions, 148 deletions
diff --git a/src/command-line/command-line-frame.js b/src/command-line/command-line-frame.js
new file mode 100644
index 0000000..3f1dda4
--- /dev/null
+++ b/src/command-line/command-line-frame.js
@@ -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();
+ }
+}
diff --git a/src/command-line/command-line-frame.scss b/src/command-line/command-line-frame.scss
new file mode 100644
index 0000000..88772d9
--- /dev/null
+++ b/src/command-line/command-line-frame.scss
@@ -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;
+}
diff --git a/src/command-line/command-line.html b/src/command-line/command-line.html
new file mode 100644
index 0000000..bad0b66
--- /dev/null
+++ b/src/command-line/command-line.html
@@ -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>
diff --git a/src/command-line/command-line.js b/src/command-line/command-line.js
new file mode 100644
index 0000000..34f3f35
--- /dev/null
+++ b/src/command-line/command-line.js
@@ -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();
+});
diff --git a/src/command-line/command-line.scss b/src/command-line/command-line.scss
new file mode 100644
index 0000000..68a0a03
--- /dev/null
+++ b/src/command-line/command-line.scss
@@ -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;
+ }
+ }
+}
diff --git a/src/content/footer-line.css b/src/content/footer-line.css
deleted file mode 100644
index 041776c..0000000
--- a/src/content/footer-line.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/content/footer-line.js b/src/content/footer-line.js
deleted file mode 100644
index fc1dc7b..0000000
--- a/src/content/footer-line.js
+++ /dev/null
@@ -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;
- }
-}
diff --git a/src/content/index.js b/src/content/index.js
index 9dd3706..9bd4e15 100644
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -1,29 +1,10 @@
import * as scrolls from './scrolls';
import * as histories from './histories';
import * as actions from '../shared/actions';
-import FooterLine from './footer-line';
+import CommandLineFrame from '../command-line/command-line-frame';
import Follow from './follow';
-var footer = 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();
-}
+let cmd = null;
const invokeEvent = (action) => {
if (typeof action === 'undefined' || action === null) {
@@ -32,14 +13,14 @@ const invokeEvent = (action) => {
switch (action[0]) {
case actions.CMD_OPEN:
- createFooterLine();
+ cmd = new CommandLineFrame(window);
break;
case actions.CMD_TABS_OPEN:
if (action[1] || false) {
// alter url
- createFooterLine('open ' + window.location.href);
+ cmd = new CommandLineFrame(window, 'open ' + window.location.href);
} else {
- createFooterLine('open ');
+ cmd = new CommandLineFrame(window, 'open ');
}
break;
case actions.SCROLL_LINES:
@@ -89,3 +70,36 @@ window.addEventListener("keypress", (e) => {
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;
+ }
+});
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-04 02:53:40 +0000