diff options
| -rw-r--r-- | manifest.json | 7 | ||||
| -rw-r--r-- | src/command-line/command-line-frame.js | 19 | ||||
| -rw-r--r-- | src/command-line/command-line-frame.scss | 11 | ||||
| -rw-r--r-- | src/command-line/index.html | 4 | ||||
| -rw-r--r-- | src/command-line/index.js | 63 | ||||
| -rw-r--r-- | src/content/index.js | 62 |
6 files changed, 140 insertions, 26 deletions
diff --git a/manifest.json b/manifest.json index 1d511fa..b687363 100644 --- a/manifest.json +++ b/manifest.json @@ -10,9 +10,14 @@ } ], "background": { - "scripts": ["build/background.js"] + "scripts": [ + "build/background.js" + ] }, "permissions": [ "sessions" + ], + "web_accessible_resources": [ + "build/command-line.html" ] } 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..67bf514 --- /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: 20px; + position: fixed; + z-index: 10000; + border: none; +} diff --git a/src/command-line/index.html b/src/command-line/index.html index e9e4123..bad0b66 100644 --- a/src/command-line/index.html +++ b/src/command-line/index.html @@ -9,7 +9,9 @@ <div> <p class='vimvixen-command-line-title'></p> <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> </body> diff --git a/src/command-line/index.js b/src/command-line/index.js index 67aac61..f99afa0 100644 --- a/src/command-line/index.js +++ b/src/command-line/index.js @@ -1 +1,64 @@ 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(); +}); 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; + } +}); |