Merge pull request #93 from ueokande/improve-for-certain-pages

Improve for aberration pages
jh-changes
Shin'ya Ueoka 7 years ago committed by GitHub
commit c6f380135d
  1. 10
      src/content/components/common/follow.js
  2. 10
      src/content/components/common/input.js
  3. 119
      src/content/scrolls.js
  4. 8
      src/shared/utils/dom.js

@ -1,9 +1,10 @@
import messages from 'shared/messages'; import messages from 'shared/messages';
import Hint from './hint'; import Hint from './hint';
import * as dom from 'shared/utils/dom';
const TARGET_SELECTOR = [ const TARGET_SELECTOR = [
'a', 'button', 'input', 'textarea', 'a', 'button', 'input', 'textarea',
'[contenteditable=true]', '[contenteditable=""]' '[contenteditable=true]', '[contenteditable=""]', '[tabindex]'
].join(','); ].join(',');
const inViewport = (win, element, viewSize, framePosition) => { const inViewport = (win, element, viewSize, framePosition) => {
@ -136,8 +137,11 @@ export default class Follow {
case 'button': case 'button':
return element.click(); return element.click();
default: default:
// it may contenteditable if (dom.isContentEditable(element)) {
return element.focus(); return element.focus();
} else if (element.hasAttribute('tabindex')) {
return element.click();
}
} }
} }

@ -1,3 +1,5 @@
import * as dom from 'shared/utils/dom';
const modifierdKeyName = (name) => { const modifierdKeyName = (name) => {
if (name.length === 1) { if (name.length === 1) {
return name.toUpperCase(); return name.toUpperCase();
@ -78,12 +80,12 @@ export default class InputComponent {
} }
fromInput(e) { fromInput(e) {
if (!e.target) {
return false;
}
return e.target instanceof HTMLInputElement || return e.target instanceof HTMLInputElement ||
e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLTextAreaElement ||
e.target instanceof HTMLSelectElement || e.target instanceof HTMLSelectElement ||
e.target instanceof HTMLElement && dom.isContentEditable(e.target);
e.target.hasAttribute('contenteditable') && (
e.target.getAttribute('contenteditable').toLowerCase() === 'true' ||
e.target.getAttribute('contenteditable').toLowerCase() === '');
} }
} }

@ -1,47 +1,112 @@
const SCROLL_DELTA_X = 48; const SCROLL_DELTA_X = 48;
const SCROLL_DELTA_Y = 48; const SCROLL_DELTA_Y = 48;
const scrollVertically = (page, count) => { const isVisible = (win, element) => {
let x = page.scrollX; let rect = element.getBoundingClientRect();
let y = page.scrollY + SCROLL_DELTA_X * count; if (rect.width === 0 || rect.height === 0) {
page.scrollTo(x, y); 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) => { const scrollHorizonally = (win, count) => {
let x = page.scrollX + SCROLL_DELTA_Y * count; let target = scrollTarget(win);
let y = page.scrollY; let x = target.scrollLeft + SCROLL_DELTA_X * count;
page.scrollTo(x, y); let y = target.scrollTop;
target.scrollTo(x, y);
}; };
const scrollPages = (page, count) => { const scrollPages = (win, count) => {
let height = page.innerHeight; let target = scrollTarget(win);
let x = page.scrollX; let height = target.innerHeight;
let y = page.scrollY + height * count; let x = target.scrollLeft;
page.scrollTo(x, y); let y = target.scrollLeft + height * count;
target.scrollTo(x, y);
}; };
const scrollTop = (page) => { const scrollTop = (win) => {
let x = page.scrollX; let target = scrollTarget(win);
let x = target.scrollLeft;
let y = 0; let y = 0;
page.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollBottom = (page) => { const scrollBottom = (win) => {
let x = page.scrollX; let target = scrollTarget(win);
let y = page.scrollMaxY; let x = target.scrollLeft;
page.scrollTo(x, y); let y = target.scrollHeight;
target.scrollTo(x, y);
}; };
const scrollHome = (page) => { const scrollHome = (win) => {
let target = scrollTarget(win);
let x = 0; let x = 0;
let y = page.scrollY; let y = target.scrollLeft;
page.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollEnd = (page) => { const scrollEnd = (win) => {
let x = page.scrollMaxX; let target = scrollTarget(win);
let y = page.scrollY; let x = target.scrollWidth;
page.scrollTo(x, y); let y = target.scrollLeft;
target.scrollTo(x, y);
}; };
export { export {

@ -0,0 +1,8 @@
const isContentEditable = (element) => {
return element.hasAttribute('contenteditable') && (
element.getAttribute('contenteditable').toLowerCase() === 'true' ||
element.getAttribute('contenteditable').toLowerCase() === ''
);
};
export { isContentEditable };