From 40dce0ca6e7eaffcc214327f72ba17d307daad44 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 Sep 2017 18:29:25 +0900 Subject: add setCompletions --- src/console/console.scss | 38 +++++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) (limited to 'src/console/console.scss') diff --git a/src/console/console.scss b/src/console/console.scss index 0de873d..b91e0b8 100644 --- a/src/console/console.scss +++ b/src/console/console.scss @@ -23,20 +23,40 @@ body { line-height: 16px; } - &-error { - background-color: red; - font-weight: bold; - color: white; + &-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-repeat: no-repeat; - &-title { - background-color: lightgray; + &-caption { + display: inline-block; + width: 40%; + } + + &-url { + display: inline-block; + color: green; + } + } + + } + + &-error { + background-color: red; font-weight: bold; - margin: 0; - padding: 0; + color: white; @include consoole-font; } -- cgit v1.2.3 From ee9359c138b146dc5a4d31e988c3a7f3ed0444e5 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 5 Sep 2017 13:56:16 +0900 Subject: fix completion --- src/background/index.js | 3 ++- src/console/console.js | 9 ++++++--- src/console/console.scss | 3 +++ 3 files changed, 11 insertions(+), 4 deletions(-) (limited to 'src/console/console.scss') diff --git a/src/background/index.js b/src/background/index.js index 4a5e6d6..4aa3856 100644 --- a/src/background/index.js +++ b/src/background/index.js @@ -90,7 +90,8 @@ browser.runtime.onMessage.addListener((request, sender) => { return { caption: tab.title, content: tab.title, - url: tab.url + url: tab.url, + icon: tab.favIconUrl } }); return { diff --git a/src/console/console.js b/src/console/console.js index 3c7d61f..d139a50 100644 --- a/src/console/console.js +++ b/src/console/console.js @@ -43,7 +43,7 @@ const completeNext = () => { } let input = window.document.querySelector('#vimvixen-console-command-input'); - input.value = completionOrigin + item.content; + input.value = completionOrigin + ' ' + item.content; } const completePrev = () => { @@ -56,7 +56,7 @@ const completePrev = () => { } let input = window.document.querySelector('#vimvixen-console-command-input'); - input.value = completionOrigin + item.content; + input.value = completionOrigin + ' ' + item.content; } const handleKeydown = (e) => { @@ -80,6 +80,9 @@ const handleKeydown = (e) => { }; const handleKeyup = (e) => { + if (e.keyCode === KeyboardEvent.DOM_VK_TAB) { + return; + } if (e.target.value === prevValue) { return; } @@ -157,7 +160,7 @@ const setCompletions = (completions) => { window.completion = new Completion(flatten); let input = window.document.querySelector('#vimvixen-console-command-input'); - completionOrigin = input.value; + completionOrigin = input.value.split(' ')[0]; } messages.receive(window, (message) => { diff --git a/src/console/console.scss b/src/console/console.scss index b91e0b8..c22b14f 100644 --- a/src/console/console.scss +++ b/src/console/console.scss @@ -8,6 +8,7 @@ body { bottom: 0; left: 0; right: 0; + overflow: hidden; } .vimvixen-console { @@ -38,7 +39,9 @@ body { &-item { padding-left: 1.5rem; background-position: 0 center; + background-size: contain; background-repeat: no-repeat; + white-space: nowrap; &-caption { display: inline-block; -- cgit v1.2.3 From caf24779ddfdceb5e9a0fab4f55c92c8d52cda7f Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 5 Sep 2017 14:37:58 +0900 Subject: completion hightlight --- src/console/console.js | 27 +++++++++++++++++++-------- src/console/console.scss | 5 ++++- 2 files changed, 23 insertions(+), 9 deletions(-) (limited to 'src/console/console.scss') diff --git a/src/console/console.js b/src/console/console.js index d139a50..da6e3ca 100644 --- a/src/console/console.js +++ b/src/console/console.js @@ -43,7 +43,9 @@ const completeNext = () => { } let input = window.document.querySelector('#vimvixen-console-command-input'); - input.value = completionOrigin + ' ' + item.content; + input.value = completionOrigin + ' ' + item[0].content; + + selectCompletion(item[1]); } const completePrev = () => { @@ -56,7 +58,9 @@ const completePrev = () => { } let input = window.document.querySelector('#vimvixen-console-command-input'); - input.value = completionOrigin + ' ' + item.content; + input.value = completionOrigin + ' ' + item[0].content; + + selectCompletion(item[1]); } const handleKeydown = (e) => { @@ -126,6 +130,8 @@ const setCompletions = (completions) => { completion.style.display = 'block'; completion.innerHTML = ''; + let pairs = []; + for (let group of completions) { let title = window.document.createElement('li'); title.className = 'vimvixen-console-completion-title'; @@ -147,22 +153,27 @@ const setCompletions = (completions) => { li.className = 'vimvixen-console-completion-item'; li.append(caption); li.append(url); - li.setAttribute('data-content', item.content); completion.append(li); + + pairs.push([item, li]); } } - let flatten = []; - for (let group of completions) { - flatten = flatten.concat(group.items); - } - window.completion = new Completion(flatten); + window.completion = new Completion(pairs); let input = window.document.querySelector('#vimvixen-console-command-input'); completionOrigin = input.value.split(' ')[0]; } +const selectCompletion = (element) => { + let elements = window.document.querySelectorAll('.vimvixen-console-completion-item'); + Array.prototype.forEach.call(elements, (ele) => { + ele.className = 'vimvixen-console-completion-item'; + }); + element.classList.add('vimvixen-completion-selected'); +}; + messages.receive(window, (message) => { switch (message.type) { case 'vimvixen.console.show.command': diff --git a/src/console/console.scss b/src/console/console.scss index c22b14f..7bb46dd 100644 --- a/src/console/console.scss +++ b/src/console/console.scss @@ -43,6 +43,10 @@ body { background-repeat: no-repeat; white-space: nowrap; + &.vimvixen-completion-selected { + background-color: yellow; + } + &-caption { display: inline-block; width: 40%; @@ -53,7 +57,6 @@ body { color: green; } } - } &-error { -- cgit v1.2.3