diff options
| author | Shin'ya Ueoka <ueokande@i-beam.org> | 2017-09-01 08:51:14 +0900 |
|---|---|---|
| committer | Shin'ya Ueoka <ueokande@i-beam.org> | 2017-09-01 09:15:44 +0900 |
| commit | 6e5286ef10b26d0a09f3882d6c3bfdbd92223d0f (patch) | |
| tree | 40d46345e48d0567e1c65201ca9d55e428060172 /src/console | |
| parent | f1b9c6ba9d33fe1927c4855d4981d88ad73d5818 (diff) | |
Rename command-line to console
Diffstat (limited to 'src/console')
| -rw-r--r-- | src/console/console-frame.js | 19 | ||||
| -rw-r--r-- | src/console/console-frame.scss | 11 | ||||
| -rw-r--r-- | src/console/console.html | 18 | ||||
| -rw-r--r-- | src/console/console.js | 64 | ||||
| -rw-r--r-- | src/console/console.scss | 52 |
5 files changed, 164 insertions, 0 deletions
diff --git a/src/console/console-frame.js b/src/console/console-frame.js new file mode 100644 index 0000000..cf72f25 --- /dev/null +++ b/src/console/console-frame.js @@ -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(); + } +} diff --git a/src/console/console-frame.scss b/src/console/console-frame.scss new file mode 100644 index 0000000..1bab2b0 --- /dev/null +++ b/src/console/console-frame.scss @@ -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; +} diff --git a/src/console/console.html b/src/console/console.html new file mode 100644 index 0000000..9177045 --- /dev/null +++ b/src/console/console.html @@ -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> diff --git a/src/console/console.js b/src/console/console.js new file mode 100644 index 0000000..f8a91a6 --- /dev/null +++ b/src/console/console.js @@ -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(); +}); diff --git a/src/console/console.scss b/src/console/console.scss new file mode 100644 index 0000000..becc15c --- /dev/null +++ b/src/console/console.scss @@ -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; + } + } +} |