diff options
Diffstat (limited to 'src/console')
-rw-r--r-- | src/console/completion.js | 27 | ||||
-rw-r--r-- | src/console/console-frame.scss | 12 | ||||
-rw-r--r-- | src/console/console.html | 20 | ||||
-rw-r--r-- | src/console/console.js | 186 | ||||
-rw-r--r-- | src/console/console.scss | 92 | ||||
-rw-r--r-- | src/console/frames.js | 18 |
6 files changed, 0 insertions, 355 deletions
diff --git a/src/console/completion.js b/src/console/completion.js deleted file mode 100644 index 4c69afb..0000000 --- a/src/console/completion.js +++ /dev/null @@ -1,27 +0,0 @@ -export default class Completion { - constructor(completions) { - if (typeof completions.length !== 'number') { - throw new TypeError('completions does not have a length in number'); - } - this.completions = completions; - this.index = 0; - } - - prev() { - let length = this.completions.length; - if (length === 0) { - return null; - } - this.index = (this.index + length - 1) % length; - return this.completions[this.index]; - } - - next() { - if (this.completions.length === 0) { - return null; - } - let item = this.completions[this.index]; - this.index = (this.index + 1) % this.completions.length; - return item; - } -} diff --git a/src/console/console-frame.scss b/src/console/console-frame.scss deleted file mode 100644 index 33bfff3..0000000 --- a/src/console/console-frame.scss +++ /dev/null @@ -1,12 +0,0 @@ -.vimvixen-console-frame { - margin: 0; - padding: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - position: fixed; - z-index: 10000; - border: none; - pointer-events:none; -} diff --git a/src/console/console.html b/src/console/console.html deleted file mode 100644 index 4222f12..0000000 --- a/src/console/console.html +++ /dev/null @@ -1,20 +0,0 @@ -<!doctype html> -<html> - <head> - <meta charset=utf-8 /> - <title>VimVixen console</title> - <script src='console.js'></script> - </head> - <body class='vimvixen-console'> - <p id='vimvixen-console-error' - class='vimvixen-console-error'></p> - <div id='vimvixen-console-command'> - <ul id='vimvixen-console-completion' class='vimvixen-console-completion'></ul> - <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 deleted file mode 100644 index 4471446..0000000 --- a/src/console/console.js +++ /dev/null @@ -1,186 +0,0 @@ -import './console.scss'; -import Completion from './completion'; -import messages from '../messages'; - -// TODO consider object-oriented -let prevValue = ''; -let completion = null; -let completionOrigin = ''; -let prevState = {}; - -const handleBlur = () => { - return browser.runtime.sendMessage({ - type: messages.CONSOLE_BLURRED, - }); -}; - -const selectCompletion = (target) => { - let container = window.document.querySelector('#vimvixen-console-completion'); - Array.prototype.forEach.call(container.children, (ele) => { - if (!ele.classList.contains('vimvixen-console-completion-item')) { - return; - } - if (ele === target) { - ele.classList.add('vimvixen-completion-selected'); - } else { - ele.classList.remove('vimvixen-completion-selected'); - } - }); -}; - -const completeNext = () => { - if (!completion) { - return; - } - let item = completion.next(); - if (!item) { - return; - } - - let input = window.document.querySelector('#vimvixen-console-command-input'); - input.value = completionOrigin + ' ' + item[0].content; - - selectCompletion(item[1]); -}; - -const completePrev = () => { - if (!completion) { - return; - } - let item = completion.prev(); - if (!item) { - return; - } - - let input = window.document.querySelector('#vimvixen-console-command-input'); - input.value = completionOrigin + ' ' + item[0].content; - - selectCompletion(item[1]); -}; - -const handleKeydown = (e) => { - let input = window.document.querySelector('#vimvixen-console-command-input'); - - switch (e.keyCode) { - case KeyboardEvent.DOM_VK_ESCAPE: - return input.blur(); - case KeyboardEvent.DOM_VK_RETURN: - return browser.runtime.sendMessage({ - type: messages.CONSOLE_ENTERED, - text: e.target.value - }); - case KeyboardEvent.DOM_VK_TAB: - if (e.shiftKey) { - completePrev(); - } else { - completeNext(); - } - e.stopPropagation(); - e.preventDefault(); - break; - } -}; - -const handleKeyup = (e) => { - if (e.keyCode === KeyboardEvent.DOM_VK_TAB) { - return; - } - if (e.target.value === prevValue) { - return; - } - prevValue = e.target.value; - return browser.runtime.sendMessage({ - type: messages.CONSOLE_CHANGEED, - text: e.target.value - }); -}; - -window.addEventListener('load', () => { - let input = window.document.querySelector('#vimvixen-console-command-input'); - input.addEventListener('blur', handleBlur); - input.addEventListener('keydown', handleKeydown); - input.addEventListener('keyup', handleKeyup); -}); - -const createCompletionTitle = (text) => { - let li = document.createElement('li'); - li.className = 'vimvixen-console-completion-title'; - li.textContent = text; - return li; -}; - -const createCompletionItem = (icon, caption, url) => { - let captionEle = document.createElement('span'); - captionEle.className = 'vimvixen-console-completion-item-caption'; - captionEle.textContent = caption; - - let urlEle = document.createElement('span'); - urlEle.className = 'vimvixen-console-completion-item-url'; - urlEle.textContent = url; - - let li = document.createElement('li'); - li.style.backgroundImage = 'url(' + icon + ')'; - li.className = 'vimvixen-console-completion-item'; - li.append(captionEle); - li.append(urlEle); - return li; -}; - -const updateCompletions = (completions) => { - let completionsContainer = - window.document.querySelector('#vimvixen-console-completion'); - let input = window.document.querySelector('#vimvixen-console-command-input'); - - completionsContainer.innerHTML = ''; - - let pairs = []; - - for (let group of completions) { - let title = createCompletionTitle(group.name); - completionsContainer.append(title); - - for (let item of group.items) { - let li = createCompletionItem(item.icon, item.caption, item.url); - completionsContainer.append(li); - - pairs.push([item, li]); - } - } - - completion = new Completion(pairs); - completionOrigin = input.value.split(' ')[0]; -}; - -const update = (state) => { - let error = window.document.querySelector('#vimvixen-console-error'); - let command = window.document.querySelector('#vimvixen-console-command'); - let input = window.document.querySelector('#vimvixen-console-command-input'); - - error.style.display = state.errorShown ? 'block' : 'none'; - error.textContent = state.errorText; - - command.style.display = state.commandShown ? 'block' : 'none'; - if (state.commandShown && !prevState.commandShown) { - input.value = state.commandText; - input.focus(); - } - if (JSON.stringify(state.completions) !== - JSON.stringify(prevState.completions)) { - updateCompletions(state.completions); - } - - prevState = state; -}; - -browser.runtime.onMessage.addListener((action) => { - if (action.type === messages.STATE_UPDATE) { - return update(action.state.console); - } -}); - -window.addEventListener('load', () => { - let error = window.document.querySelector('#vimvixen-console-error'); - let command = window.document.querySelector('#vimvixen-console-command'); - error.style.display = 'none'; - command.style.display = 'none'; -}); diff --git a/src/console/console.scss b/src/console/console.scss deleted file mode 100644 index 5823dce..0000000 --- a/src/console/console.scss +++ /dev/null @@ -1,92 +0,0 @@ -html, body, * { - margin: 0; - padding: 0; -} - -body { - position: absolute; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; -} - -.vimvixen-console { - border-top: 1px solid gray; - bottom: 0; - margin: 0; - padding: 0; - - @mixin consoole-font { - font-style: normal; - font-family: monospace; - font-size: 12px; - line-height: 16px; - } - - &-completion { - background-color: white; - - @include consoole-font; - - &-title { - background-color: lightgray; - font-weight: bold; - margin: 0; - padding: 0; - } - - &-item { - padding-left: 1.5rem; - background-position: 0 center; - background-size: contain; - background-repeat: no-repeat; - white-space: nowrap; - - &.vimvixen-completion-selected { - background-color: yellow; - } - - &-caption { - display: inline-block; - width: 40%; - text-overflow: ellipsis; - overflow: hidden; - } - - &-url { - display: inline-block; - color: green; - width: 60%; - text-overflow: ellipsis; - overflow: hidden; - } - } - } - - &-error { - background-color: red; - font-weight: bold; - color: white; - - @include consoole-font; - } - - &-command { - background-color: white; - display: flex; - - &-prompt:before { - content: ':'; - - @include consoole-font; - } - - &-input { - border: none; - flex-grow: 1; - - @include consoole-font; - } - } -} diff --git a/src/console/frames.js b/src/console/frames.js deleted file mode 100644 index 3f06466..0000000 --- a/src/console/frames.js +++ /dev/null @@ -1,18 +0,0 @@ -import './console-frame.scss'; - -const initialize = (doc) => { - let iframe = doc.createElement('iframe'); - iframe.src = browser.runtime.getURL('build/console.html'); - iframe.id = 'vimvixen-console-frame'; - iframe.className = 'vimvixen-console-frame'; - doc.body.append(iframe); - - return iframe; -}; - -const blur = (doc) => { - let iframe = doc.getElementById('vimvixen-console-frame'); - iframe.blur(); -}; - -export { initialize, blur }; |