From a57cdbd5b5f4efa94ecc61498fdb4039276f86f0 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 23 Oct 2017 20:10:05 +0900 Subject: [PATCH 1/3] dom helper --- src/content/components/common/follow.js | 6 ++++-- src/content/components/common/input.js | 10 ++++++---- src/shared/utils/dom.js | 8 ++++++++ 3 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 src/shared/utils/dom.js diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index 5688da3..ce3d19c 100644 --- a/src/content/components/common/follow.js +++ b/src/content/components/common/follow.js @@ -1,5 +1,6 @@ import messages from 'shared/messages'; import Hint from './hint'; +import * as dom from 'shared/utils/dom'; const TARGET_SELECTOR = [ 'a', 'button', 'input', 'textarea', @@ -136,8 +137,9 @@ export default class Follow { case 'button': return element.click(); default: - // it may contenteditable - return element.focus(); + if (dom.isContentEditable(element)) { + return element.focus(); + } } } diff --git a/src/content/components/common/input.js b/src/content/components/common/input.js index f285b0c..ef5af29 100644 --- a/src/content/components/common/input.js +++ b/src/content/components/common/input.js @@ -1,3 +1,5 @@ +import * as dom from 'shared/utils/dom'; + const modifierdKeyName = (name) => { if (name.length === 1) { return name.toUpperCase(); @@ -78,12 +80,12 @@ export default class InputComponent { } fromInput(e) { + if (!e.target) { + return false; + } return e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement || - e.target instanceof HTMLElement && - e.target.hasAttribute('contenteditable') && ( - e.target.getAttribute('contenteditable').toLowerCase() === 'true' || - e.target.getAttribute('contenteditable').toLowerCase() === ''); + dom.isContentEditable(e.target); } } diff --git a/src/shared/utils/dom.js b/src/shared/utils/dom.js new file mode 100644 index 0000000..c111ee7 --- /dev/null +++ b/src/shared/utils/dom.js @@ -0,0 +1,8 @@ +const isContentEditable = (element) => { + return element.hasAttribute('contenteditable') && ( + element.getAttribute('contenteditable').toLowerCase() === 'true' || + element.getAttribute('contenteditable').toLowerCase() === '' + ); +}; + +export { isContentEditable }; From 6b60d09ae2c3151a456341f454e1009da69062c3 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 23 Oct 2017 20:40:09 +0900 Subject: [PATCH 2/3] follow [tabindex] the [tabindex] elements are used in gmail --- src/content/components/common/follow.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index ce3d19c..65e0af9 100644 --- a/src/content/components/common/follow.js +++ b/src/content/components/common/follow.js @@ -4,7 +4,7 @@ import * as dom from 'shared/utils/dom'; const TARGET_SELECTOR = [ 'a', 'button', 'input', 'textarea', - '[contenteditable=true]', '[contenteditable=""]' + '[contenteditable=true]', '[contenteditable=""]', '[tabindex]' ].join(','); const inViewport = (win, element, viewSize, framePosition) => { @@ -139,6 +139,8 @@ export default class Follow { default: if (dom.isContentEditable(element)) { return element.focus(); + } else if (element.hasAttribute('tabindex')) { + return element.click(); } } } From a4b86bf3a06c9f4e78bd5a714ae4673066a2f23f Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 24 Oct 2017 21:12:51 +0900 Subject: [PATCH 3/3] scroll first scrollable elment --- src/content/scrolls.js | 119 +++++++++++++++++++++++++++++++---------- 1 file changed, 92 insertions(+), 27 deletions(-) diff --git a/src/content/scrolls.js b/src/content/scrolls.js index 86ea554..eda1946 100644 --- a/src/content/scrolls.js +++ b/src/content/scrolls.js @@ -1,47 +1,112 @@ const SCROLL_DELTA_X = 48; const SCROLL_DELTA_Y = 48; -const scrollVertically = (page, count) => { - let x = page.scrollX; - let y = page.scrollY + SCROLL_DELTA_X * count; - page.scrollTo(x, y); +const isVisible = (win, element) => { + let rect = element.getBoundingClientRect(); + if (rect.width === 0 || rect.height === 0) { + return false; + } + if (rect.right < 0 && rect.bottom < 0) { + return false; + } + if (win.innerWidth < rect.left && win.innerHeight < rect.top) { + return false; + } + + let { display, visibility } = win.getComputedStyle(element); + if (display === 'none' || visibility === 'hidden') { + return false; + } + return true; +}; + +const isScrollable = (win, element) => { + let { overflowX, overflowY } = win.getComputedStyle(element); + if (element.tagName !== 'HTML' && + overflowX !== 'scroll' && overflowX !== 'auto' && + overflowY !== 'scroll' && overflowY !== 'auto') { + return false; + } + return element.scrollWidth > element.clientWidth || + element.scrollHeight > element.clientHeight; +}; + +// Find a visiable and scrollable element by depth-first search. Currently +// this method is called by each scrolling, and the returned value of this +// method is not cached. That does not cause performance issue because in the +// most pages, the window is root element i,e, documentElement. +const findScrollable = (win, element) => { + if (isScrollable(win, element)) { + return element; + } + + let children = Array.prototype + .filter.call(element.children, e => isVisible(win, e)); + for (let child of children) { + let scrollable = findScrollable(win, child); + if (scrollable) { + return scrollable; + } + } + return null; +}; + +const scrollTarget = (win) => { + let target = findScrollable(win, win.document.documentElement); + if (target) { + return target; + } + return win.document.documentElement; +}; + +const scrollVertically = (win, count) => { + let target = scrollTarget(win); + let x = target.scrollLeft; + let y = target.scrollTop + SCROLL_DELTA_Y * count; + target.scrollTo(x, y); }; -const scrollHorizonally = (page, count) => { - let x = page.scrollX + SCROLL_DELTA_Y * count; - let y = page.scrollY; - page.scrollTo(x, y); +const scrollHorizonally = (win, count) => { + let target = scrollTarget(win); + let x = target.scrollLeft + SCROLL_DELTA_X * count; + let y = target.scrollTop; + target.scrollTo(x, y); }; -const scrollPages = (page, count) => { - let height = page.innerHeight; - let x = page.scrollX; - let y = page.scrollY + height * count; - page.scrollTo(x, y); +const scrollPages = (win, count) => { + let target = scrollTarget(win); + let height = target.innerHeight; + let x = target.scrollLeft; + let y = target.scrollLeft + height * count; + target.scrollTo(x, y); }; -const scrollTop = (page) => { - let x = page.scrollX; +const scrollTop = (win) => { + let target = scrollTarget(win); + let x = target.scrollLeft; let y = 0; - page.scrollTo(x, y); + target.scrollTo(x, y); }; -const scrollBottom = (page) => { - let x = page.scrollX; - let y = page.scrollMaxY; - page.scrollTo(x, y); +const scrollBottom = (win) => { + let target = scrollTarget(win); + let x = target.scrollLeft; + let y = target.scrollHeight; + target.scrollTo(x, y); }; -const scrollHome = (page) => { +const scrollHome = (win) => { + let target = scrollTarget(win); let x = 0; - let y = page.scrollY; - page.scrollTo(x, y); + let y = target.scrollLeft; + target.scrollTo(x, y); }; -const scrollEnd = (page) => { - let x = page.scrollMaxX; - let y = page.scrollY; - page.scrollTo(x, y); +const scrollEnd = (win) => { + let target = scrollTarget(win); + let x = target.scrollWidth; + let y = target.scrollLeft; + target.scrollTo(x, y); }; export {