From 5a082b4ea51d283a20c5499c13fd48d9bed67fd2 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 13 Aug 2017 21:32:24 +0900 Subject: [PATCH] add command-line bar --- src/background/key-queue.js | 1 + src/content/footer-line.css | 29 +++++++++++++++++++++++++++ src/content/footer-line.js | 39 +++++++++++++++++++++++++++++++++++++ src/content/index.js | 8 ++++++++ src/shared/actions.js | 2 ++ 5 files changed, 79 insertions(+) create mode 100644 src/content/footer-line.css create mode 100644 src/content/footer-line.js diff --git a/src/background/key-queue.js b/src/background/key-queue.js index 666eec3..acbb6e0 100644 --- a/src/background/key-queue.js +++ b/src/background/key-queue.js @@ -2,6 +2,7 @@ import * as keys from './keys'; import * as actions from '../shared/actions'; const DEFAULT_KEYMAP = [ + { keys: [{ code: KeyboardEvent.DOM_VK_SEMICOLON, shift: true }], action: [ actions.CMD_OPEN ]}, { keys: [{ code: KeyboardEvent.DOM_VK_K }], action: [ actions.SCROLL_UP, 1 ]}, { keys: [{ code: KeyboardEvent.DOM_VK_J }], action: [ actions.SCROLL_DOWN, 1 ]}, { keys: [{ code: KeyboardEvent.DOM_VK_G }, { code: KeyboardEvent.DOM_VK_G }], action: [ actions.SCROLL_TOP ]}, diff --git a/src/content/footer-line.css b/src/content/footer-line.css new file mode 100644 index 0000000..ce35143 --- /dev/null +++ b/src/content/footer-line.css @@ -0,0 +1,29 @@ +.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-input{ + background-color: white; + bottom: 0; + margin: 0; + padding: 0; + width: 100%; + border: none; +} diff --git a/src/content/footer-line.js b/src/content/footer-line.js new file mode 100644 index 0000000..2a931f3 --- /dev/null +++ b/src/content/footer-line.js @@ -0,0 +1,39 @@ +import './footer-line.css'; + +export default class FooterLine { + constructor(doc) { + this.title = doc.createElement('p'); + this.title.className = 'vimvixen-footerline-title'; + + this.input = doc.createElement('input'); + this.input.className = 'vimvixen-footerline-input'; + + this.wrapper = doc.createElement('div'); + this.wrapper.className = 'vimvixen-footerline'; + + this.wrapper.append(this.title); + this.wrapper.append(this.input); + doc.body.append(this.wrapper) + + this.input.addEventListener('blur', this.handleBlur.bind(this)); + this.input.addEventListener('keydown', this.handleKeydown.bind(this)); + } + + focus() { + this.input.focus(); + } + + remove() { + this.wrapper.remove(); + } + + handleBlur() { + this.remove(); + } + + handleKeydown(e) { + if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE) { + this.remove(); + } + } +} diff --git a/src/content/index.js b/src/content/index.js index 03efc5e..8cf0aed 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -1,12 +1,20 @@ import * as scrolls from './scrolls'; +import FooterLine from './footer-line'; import * as actions from '../shared/actions'; +var footer = null; + const invokeEvent = (action) => { if (typeof action === 'undefined' || action === null) { return; } switch (action[0]) { + case actions.CMD_OPEN: + footer = new FooterLine(document); + footer.input.value = ':'; + footer.focus(); + break; case actions.SCROLL_UP: scrolls.scrollUp(window, action[1] || 1); break; diff --git a/src/shared/actions.js b/src/shared/actions.js index 3e3cbd0..4c9fec4 100644 --- a/src/shared/actions.js +++ b/src/shared/actions.js @@ -1,3 +1,4 @@ +export const CMD_OPEN = 'cmd.open'; export const TABS_PREV = 'tabs.prev'; export const TABS_NEXT = 'tabs.next'; export const SCROLL_UP = 'scroll.up'; @@ -11,6 +12,7 @@ const BACKGROUND_ACTION_SET = new Set([ ]); const CONTENT_ACTION_SET = new Set([ + CMD_OPEN, SCROLL_UP, SCROLL_DOWN, SCROLL_TOP,