From e3fdf742e7dc3fa3518746d185418a2e63ca2118 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 13 Jan 2018 22:42:39 +0900 Subject: [PATCH 1/4] add focus input key map --- src/settings/components/form/keymaps-form.jsx | 1 + src/shared/settings/default.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx index eb77e52..e25107c 100644 --- a/src/settings/components/form/keymaps-form.jsx +++ b/src/settings/components/form/keymaps-form.jsx @@ -36,6 +36,7 @@ const KeyMapFields = [ ['navigate.link.prev', 'Open previous link'], ['navigate.parent', 'Go to parent directory'], ['navigate.root', 'Go to root directory'], + ['focus.input', 'Focus input'], ], [ ['find.start', 'Start find mode'], ['find.next', 'Find next word'], diff --git a/src/shared/settings/default.js b/src/shared/settings/default.js index 0c3f0d9..4ad81c4 100644 --- a/src/shared/settings/default.js +++ b/src/shared/settings/default.js @@ -43,6 +43,7 @@ export default { "]]": { "type": "navigate.link.next" }, "gu": { "type": "navigate.parent" }, "gU": { "type": "navigate.root" }, + "gi": { "type": "focus.input" }, "y": { "type": "urls.yank" }, "p": { "type": "urls.paste", "newTab": false }, "P": { "type": "urls.paste", "newTab": true }, From 9384fd07d5cc63841a832af053b5e792cae9f798 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 13 Jan 2018 23:05:51 +0900 Subject: [PATCH 2/4] implement focus input --- src/content/actions/operation.js | 3 +++ src/content/focuses.js | 10 ++++++++++ src/shared/operations.js | 3 +++ 3 files changed, 16 insertions(+) create mode 100644 src/content/focuses.js diff --git a/src/content/actions/operation.js b/src/content/actions/operation.js index b4b2e38..5fd0f48 100644 --- a/src/content/actions/operation.js +++ b/src/content/actions/operation.js @@ -2,6 +2,7 @@ import operations from 'shared/operations'; import messages from 'shared/messages'; import * as scrolls from 'content/scrolls'; import * as navigates from 'content/navigates'; +import * as focuses from 'content/focuses'; import * as urls from 'content/urls'; import * as consoleFrames from 'content/console-frames'; import * as addonActions from './addon'; @@ -57,6 +58,8 @@ const exec = (operation, repeat, settings) => { return navigates.parent(window); case operations.NAVIGATE_ROOT: return navigates.root(window); + case operations.FOCUS_INPUT: + return focuses.focusInput(); case operations.URLS_YANK: urls.yank(window); return consoleFrames.postMessage(window.document, { diff --git a/src/content/focuses.js b/src/content/focuses.js new file mode 100644 index 0000000..c2658b4 --- /dev/null +++ b/src/content/focuses.js @@ -0,0 +1,10 @@ +const focusInput = () => { + let inputTypes = ['email', 'number', 'search', 'tel', 'text', 'url']; + let inputSelector = inputTypes.map(type => `input[type=${type}]`).join(','); + let target = window.document.querySelector(inputSelector + ',textarea'); + if (target) { + target.focus(); + } +}; + +export { focusInput }; diff --git a/src/shared/operations.js b/src/shared/operations.js index 7334369..ff833a2 100644 --- a/src/shared/operations.js +++ b/src/shared/operations.js @@ -31,6 +31,9 @@ export default { NAVIGATE_PARENT: 'navigate.parent', NAVIGATE_ROOT: 'navigate.root', + // Focus + FOCUS_INPUT: 'focus.input', + // Tabs TAB_CLOSE: 'tabs.close', TAB_REOPEN: 'tabs.reopen', From 03e7e333a3183ea7bf10938c2650b1d74362589f Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 13 Jan 2018 23:11:15 +0900 Subject: [PATCH 3/4] update README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a249ada..ca507d0 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ The default mappings are as follows: - [[, ]]: find prev or next links and open it - gu: go to parent directory - gU: go to root directory +- gi, G: focus first input #### Misc - zi, zo: zoom-in/zoom-out From d1a81a877f0e7364b7d69e214ec74151d76dd25c Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 15 Jan 2018 21:56:10 +0900 Subject: [PATCH 4/4] focus on visible elements --- src/content/focuses.js | 5 ++++- src/content/scrolls.js | 24 +++--------------------- src/shared/utils/dom.js | 24 +++++++++++++++++++++++- 3 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/content/focuses.js b/src/content/focuses.js index c2658b4..a6f6cc8 100644 --- a/src/content/focuses.js +++ b/src/content/focuses.js @@ -1,7 +1,10 @@ +import * as doms from 'shared/utils/dom'; + const focusInput = () => { let inputTypes = ['email', 'number', 'search', 'tel', 'text', 'url']; let inputSelector = inputTypes.map(type => `input[type=${type}]`).join(','); - let target = window.document.querySelector(inputSelector + ',textarea'); + let targets = window.document.querySelectorAll(inputSelector + ',textarea'); + let target = Array.from(targets).find(doms.isVisible); if (target) { target.focus(); } diff --git a/src/content/scrolls.js b/src/content/scrolls.js index e8e9642..0d1f7c8 100644 --- a/src/content/scrolls.js +++ b/src/content/scrolls.js @@ -1,3 +1,5 @@ +import * as doms from 'shared/utils/dom'; + const SCROLL_DELTA_X = 48; const SCROLL_DELTA_Y = 48; const SMOOTH_SCROLL_DURATION = 150; @@ -5,25 +7,6 @@ const SMOOTH_SCROLL_DURATION = 150; // dirty way to store scrolling state on globally let scrolling = [false]; -const isVisible = (element) => { - let rect = element.getBoundingClientRect(); - if (rect.width === 0 || rect.height === 0) { - return false; - } - if (rect.right < 0 && rect.bottom < 0) { - return false; - } - if (window.innerWidth < rect.left && window.innerHeight < rect.top) { - return false; - } - - let { display, visibility } = window.getComputedStyle(element); - if (display === 'none' || visibility === 'hidden') { - return false; - } - return true; -}; - const isScrollableStyle = (element) => { let { overflowX, overflowY } = window.getComputedStyle(element); return !(overflowX !== 'scroll' && overflowX !== 'auto' && @@ -44,8 +27,7 @@ const findScrollable = (element) => { return element; } - let children = Array.prototype - .filter.call(element.children, e => isVisible(e)); + let children = Array.from(element.children).filter(doms.isVisible); for (let child of children) { let scrollable = findScrollable(child); if (scrollable) { diff --git a/src/shared/utils/dom.js b/src/shared/utils/dom.js index d4fd68a..f138c33 100644 --- a/src/shared/utils/dom.js +++ b/src/shared/utils/dom.js @@ -81,4 +81,26 @@ const viewportRect = (e) => { }; }; -export { isContentEditable, viewportRect }; +const isVisible = (element) => { + let rect = element.getBoundingClientRect(); + if (rect.width === 0 || rect.height === 0) { + return false; + } + if (rect.right < 0 && rect.bottom < 0) { + return false; + } + if (window.innerWidth < rect.left && window.innerHeight < rect.top) { + return false; + } + if (element.nodeName === 'INPUT' && element.type.toLowerCase() === 'hidden') { + return false; + } + + let { display, visibility } = window.getComputedStyle(element); + if (display === 'none' || visibility === 'hidden') { + return false; + } + return true; +}; + +export { isContentEditable, viewportRect, isVisible };