remove window from scrolls

jh-changes
Shin'ya Ueoka 7 years ago
parent 4d4a959162
commit 057a0b8a46
  1. 14
      src/content/actions/operation.js
  2. 60
      src/content/scrolls.js

@ -24,19 +24,19 @@ const exec = (operation) => {
type: messages.FIND_PREV, type: messages.FIND_PREV,
}), '*'); }), '*');
case operations.SCROLL_VERTICALLY: case operations.SCROLL_VERTICALLY:
return scrolls.scrollVertically(window, operation.count); return scrolls.scrollVertically(operation.count);
case operations.SCROLL_HORIZONALLY: case operations.SCROLL_HORIZONALLY:
return scrolls.scrollHorizonally(window, operation.count); return scrolls.scrollHorizonally(operation.count);
case operations.SCROLL_PAGES: case operations.SCROLL_PAGES:
return scrolls.scrollPages(window, operation.count); return scrolls.scrollPages(operation.count);
case operations.SCROLL_TOP: case operations.SCROLL_TOP:
return scrolls.scrollTop(window); return scrolls.scrollTop();
case operations.SCROLL_BOTTOM: case operations.SCROLL_BOTTOM:
return scrolls.scrollBottom(window); return scrolls.scrollBottom();
case operations.SCROLL_HOME: case operations.SCROLL_HOME:
return scrolls.scrollHome(window); return scrolls.scrollHome();
case operations.SCROLL_END: case operations.SCROLL_END:
return scrolls.scrollEnd(window); return scrolls.scrollEnd();
case operations.FOLLOW_START: case operations.FOLLOW_START:
return window.top.postMessage(JSON.stringify({ return window.top.postMessage(JSON.stringify({
type: messages.FOLLOW_START, type: messages.FOLLOW_START,

@ -1,7 +1,7 @@
const SCROLL_DELTA_X = 48; const SCROLL_DELTA_X = 48;
const SCROLL_DELTA_Y = 48; const SCROLL_DELTA_Y = 48;
const isVisible = (win, element) => { const isVisible = (element) => {
let rect = element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) { if (rect.width === 0 || rect.height === 0) {
return false; return false;
@ -9,19 +9,19 @@ const isVisible = (win, element) => {
if (rect.right < 0 && rect.bottom < 0) { if (rect.right < 0 && rect.bottom < 0) {
return false; return false;
} }
if (win.innerWidth < rect.left && win.innerHeight < rect.top) { if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
return false; return false;
} }
let { display, visibility } = win.getComputedStyle(element); let { display, visibility } = window.getComputedStyle(element);
if (display === 'none' || visibility === 'hidden') { if (display === 'none' || visibility === 'hidden') {
return false; return false;
} }
return true; return true;
}; };
const isScrollableStyle = (win, element) => { const isScrollableStyle = (element) => {
let { overflowX, overflowY } = win.getComputedStyle(element); let { overflowX, overflowY } = window.getComputedStyle(element);
return !(overflowX !== 'scroll' && overflowX !== 'auto' && return !(overflowX !== 'scroll' && overflowX !== 'auto' &&
overflowY !== 'scroll' && overflowY !== 'auto'); overflowY !== 'scroll' && overflowY !== 'auto');
}; };
@ -35,15 +35,15 @@ const isOverflowed = (element) => {
// this method is called by each scrolling, and the returned value of this // 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 // method is not cached. That does not cause performance issue because in the
// most pages, the window is root element i,e, documentElement. // most pages, the window is root element i,e, documentElement.
const findScrollable = (win, element) => { const findScrollable = (element) => {
if (isScrollableStyle(win, element) && isOverflowed(element)) { if (isScrollableStyle(element) && isOverflowed(element)) {
return element; return element;
} }
let children = Array.prototype let children = Array.prototype
.filter.call(element.children, e => isVisible(win, e)); .filter.call(element.children, e => isVisible(e));
for (let child of children) { for (let child of children) {
let scrollable = findScrollable(win, child); let scrollable = findScrollable(child);
if (scrollable) { if (scrollable) {
return scrollable; return scrollable;
} }
@ -51,65 +51,65 @@ const findScrollable = (win, element) => {
return null; return null;
}; };
const scrollTarget = (win) => { const scrollTarget = () => {
if (isOverflowed(win.document.documentElement)) { if (isOverflowed(window.document.documentElement)) {
return win.document.documentElement; return window.document.documentElement;
} }
if (isOverflowed(win.document.body)) { if (isOverflowed(window.document.body)) {
return win.document.body; return window.document.body;
} }
let target = findScrollable(win, win.document.documentElement); let target = findScrollable(window.document.documentElement);
if (target) { if (target) {
return target; return target;
} }
return win.document.documentElement; return window.document.documentElement;
}; };
const scrollVertically = (win, count) => { const scrollVertically = (count) => {
let target = scrollTarget(win); let target = scrollTarget();
let x = target.scrollLeft; let x = target.scrollLeft;
let y = target.scrollTop + SCROLL_DELTA_Y * count; let y = target.scrollTop + SCROLL_DELTA_Y * count;
target.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollHorizonally = (win, count) => { const scrollHorizonally = (count) => {
let target = scrollTarget(win); let target = scrollTarget();
let x = target.scrollLeft + SCROLL_DELTA_X * count; let x = target.scrollLeft + SCROLL_DELTA_X * count;
let y = target.scrollTop; let y = target.scrollTop;
target.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollPages = (win, count) => { const scrollPages = (count) => {
let target = scrollTarget(win); let target = scrollTarget();
let height = target.clientHeight; let height = target.clientHeight;
let x = target.scrollLeft; let x = target.scrollLeft;
let y = target.scrollTop + height * count; let y = target.scrollTop + height * count;
target.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollTop = (win) => { const scrollTop = () => {
let target = scrollTarget(win); let target = scrollTarget();
let x = target.scrollLeft; let x = target.scrollLeft;
let y = 0; let y = 0;
target.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollBottom = (win) => { const scrollBottom = () => {
let target = scrollTarget(win); let target = scrollTarget();
let x = target.scrollLeft; let x = target.scrollLeft;
let y = target.scrollHeight; let y = target.scrollHeight;
target.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollHome = (win) => { const scrollHome = () => {
let target = scrollTarget(win); let target = scrollTarget();
let x = 0; let x = 0;
let y = target.scrollTop; let y = target.scrollTop;
target.scrollTo(x, y); target.scrollTo(x, y);
}; };
const scrollEnd = (win) => { const scrollEnd = () => {
let target = scrollTarget(win); let target = scrollTarget();
let x = target.scrollWidth; let x = target.scrollWidth;
let y = target.scrollTop; let y = target.scrollTop;
target.scrollTo(x, y); target.scrollTo(x, y);