VimVixen command-line

From a808b2894090f30e65f396f7caa5af36af83442c Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 28 Aug 2017 20:08:16 +0900 Subject: command-line as background page --- webpack.config.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'webpack.config.js') diff --git a/webpack.config.js b/webpack.config.js index 1c80236..5019366 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,4 @@ +var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); const src = path.resolve(__dirname, 'src'); @@ -6,7 +7,8 @@ const dist = path.resolve(__dirname, 'build'); module.exports = { entry: { index: path.join(src, 'content'), - background: path.join(src, 'background') + background: path.join(src, 'background'), + 'command-line': path.join(src, 'command-line') }, output: { @@ -28,10 +30,22 @@ module.exports = { test: /\.css$/, loader: 'style-loader!css-loader', }, + { + test: /\.scss$/, + loader: 'style-loader!css-loader!sass-loader?sourceMap=true' + }, ] }, resolve: { extensions: [ '.js' ] - } + }, + + plugins: [ + new HtmlWebpackPlugin({ + template: path.join(src, 'command-line', 'index.html'), + filename: path.join(dist, 'command-line.html'), + inject: false + }) + ] }; -- cgit v1.2.3 From 041eacf4fbea1486b00c196343bbbe2df4f0970b Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 29 Aug 2017 21:20:42 +0900 Subject: rename command-line files --- src/command-line/command-line.html | 18 +++++++++++ src/command-line/command-line.js | 64 ++++++++++++++++++++++++++++++++++++++ src/command-line/command-line.scss | 42 +++++++++++++++++++++++++ src/command-line/index.html | 18 ----------- src/command-line/index.js | 64 -------------------------------------- src/command-line/index.scss | 42 ------------------------- webpack.config.js | 4 +-- 7 files changed, 126 insertions(+), 126 deletions(-) create mode 100644 src/command-line/command-line.html create mode 100644 src/command-line/command-line.js create mode 100644 src/command-line/command-line.scss delete mode 100644 src/command-line/index.html delete mode 100644 src/command-line/index.js delete mode 100644 src/command-line/index.scss (limited to 'webpack.config.js') 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 @@ + + + + + VimVixen command-line + + + +

+

+

+ +

+

+ + 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..2256bf2 --- /dev/null +++ b/src/command-line/command-line.scss @@ -0,0 +1,42 @@ +html, body, * { + margin: 0; + padding: 0; +} + +.vimvixen-command-line { + border-top: 1px solid gray; + bottom: 0; + margin: 0; + padding: 0; + + &-title { + background-color: lightgray; + font-weight: bold; + margin: 0; + padding: 0; + } + + &-line { + background-color: white; + display: flex; + + @mixin input-style { + font-style: normal; + font-family: monospace; + font-size: 12px; + } + + &-prompt:before { + content: ':'; + + @include input-style; + } + + &-input { + border: none; + flex-grow: 1; + + @include input-style; + } + } +} diff --git a/src/command-line/index.html b/src/command-line/index.html deleted file mode 100644 index bad0b66..0000000 --- a/src/command-line/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - VimVixen command-line - - - -

-

-

- -

-

- - diff --git a/src/command-line/index.js b/src/command-line/index.js deleted file mode 100644 index f99afa0..0000000 --- a/src/command-line/index.js +++ /dev/null @@ -1,64 +0,0 @@ -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/command-line/index.scss b/src/command-line/index.scss deleted file mode 100644 index 2256bf2..0000000 --- a/src/command-line/index.scss +++ /dev/null @@ -1,42 +0,0 @@ -html, body, * { - margin: 0; - padding: 0; -} - -.vimvixen-command-line { - border-top: 1px solid gray; - bottom: 0; - margin: 0; - padding: 0; - - &-title { - background-color: lightgray; - font-weight: bold; - margin: 0; - padding: 0; - } - - &-line { - background-color: white; - display: flex; - - @mixin input-style { - font-style: normal; - font-family: monospace; - font-size: 12px; - } - - &-prompt:before { - content: ':'; - - @include input-style; - } - - &-input { - border: none; - flex-grow: 1; - - @include input-style; - } - } -} diff --git a/webpack.config.js b/webpack.config.js index 5019366..f34d203 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,7 +8,7 @@ module.exports = { entry: { index: path.join(src, 'content'), background: path.join(src, 'background'), - 'command-line': path.join(src, 'command-line') + 'command-line': path.join(src, 'command-line', 'command-line.js') }, output: { @@ -43,7 +43,7 @@ module.exports = { plugins: [ new HtmlWebpackPlugin({ - template: path.join(src, 'command-line', 'index.html'), + template: path.join(src, 'command-line', 'command-line.html'), filename: path.join(dist, 'command-line.html'), inject: false }) -- cgit v1.2.3