diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | src/content/actions/operation.js | 3 | ||||
| -rw-r--r-- | src/content/focuses.js | 13 | ||||
| -rw-r--r-- | src/content/scrolls.js | 24 | ||||
| -rw-r--r-- | src/settings/components/form/keymaps-form.jsx | 1 | ||||
| -rw-r--r-- | src/shared/operations.js | 3 | ||||
| -rw-r--r-- | src/shared/settings/default.js | 1 | ||||
| -rw-r--r-- | src/shared/utils/dom.js | 24 |
8 files changed, 48 insertions, 22 deletions
@@ -50,6 +50,7 @@ The default mappings are as follows: - <kbd>[</kbd><kbd>[</kbd>, <kbd>]</kbd><kbd>]</kbd>: find prev or next links and open it - <kbd>g</kbd><kbd>u</kbd>: go to parent directory - <kbd>g</kbd><kbd>U</kbd>: go to root directory +- <kbd>g</kbd><kbd>i</kbd>, <kbd>G</kbd>: focus first input #### Misc - <kbd>z</kbd><kbd>i</kbd>, <kbd>z</kbd><kbd>o</kbd>: zoom-in/zoom-out 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..a6f6cc8 --- /dev/null +++ b/src/content/focuses.js @@ -0,0 +1,13 @@ +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 targets = window.document.querySelectorAll(inputSelector + ',textarea'); + let target = Array.from(targets).find(doms.isVisible); + if (target) { + target.focus(); + } +}; + +export { focusInput }; 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/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx index 4e08616..0e4a223 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/operations.js b/src/shared/operations.js index 4172f8b..008e9eb 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_CLOSE_FORCE: 'tabs.close.force', diff --git a/src/shared/settings/default.js b/src/shared/settings/default.js index c85a079..3c4dcac 100644 --- a/src/shared/settings/default.js +++ b/src/shared/settings/default.js @@ -45,6 +45,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 }, 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 }; |