From 514f91f8dc1eee8f3e1c6ef7c9cef6776c3b86d7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 11 Feb 2019 19:54:54 +0900 Subject: [PATCH 1/4] Make smooth-scroll smoother --- src/content/scrolls.js | 95 +++++++++++++----------------------------- 1 file changed, 30 insertions(+), 65 deletions(-) diff --git a/src/content/scrolls.js b/src/content/scrolls.js index b9a4bc3..e4431ec 100644 --- a/src/content/scrolls.js +++ b/src/content/scrolls.js @@ -2,10 +2,10 @@ import * as doms from 'shared/utils/dom'; const SCROLL_DELTA_X = 48; const SCROLL_DELTA_Y = 48; -const SMOOTH_SCROLL_DURATION = 150; // dirty way to store scrolling state on globally -let scrolling = [false]; +let scrolling = false; +let lastTimeoutId = null; const isScrollableStyle = (element) => { let { overflowX, overflowY } = window.getComputedStyle(element); @@ -51,65 +51,27 @@ const scrollTarget = () => { return window.document.documentElement; }; +const resetScrolling = () => { + scrolling = false; +}; + class SmoothScroller { - constructor(element, repeat) { + constructor(element) { this.element = element; - this.repeat = repeat; - this.scrolling = scrolling; - if (repeat) { - this.easing = SmoothScroller.linearEasing; - } else { - this.easing = SmoothScroller.inOutQuadEasing; - } } scroll(x, y) { - if (this.scrolling[0]) { - return; - } - scrolling[0] = true; - - this.startX = this.element.scrollLeft; - this.startY = this.element.scrollTop; - - this.targetX = x; - this.targetY = y; - this.distanceX = x - this.startX; - this.distanceY = y - this.startY; - this.timeStart = 0; - - window.requestAnimationFrame(this.loop.bind(this)); - } - - loop(time) { - if (!this.timeStart) { - this.timeStart = time; + window.scrollTo({ + left: x, + top: y, + behavior: 'smooth', + }); + scrolling = true; + if (lastTimeoutId) { + clearTimeout(lastTimeoutId); + lastTimeoutId = null; } - - let elapsed = time - this.timeStart; - let v = this.easing(elapsed / SMOOTH_SCROLL_DURATION); - let nextX = this.startX + this.distanceX * v; - let nextY = this.startY + this.distanceY * v; - - window.scrollTo(nextX, nextY); - - if (elapsed < SMOOTH_SCROLL_DURATION) { - window.requestAnimationFrame(this.loop.bind(this)); - } else { - scrolling[0] = false; - this.element.scrollTo(this.targetX, this.targetY); - } - } - - static inOutQuadEasing(t) { - if (t < 1) { - return t * t; - } - return -(t - 1) * (t - 1) + 1; - } - - static linearEasing(t) { - return t; + lastTimeoutId = setTimeout(resetScrolling, 100); } } @@ -123,9 +85,9 @@ class RoughtScroller { } } -const scroller = (element, smooth, repeat) => { +const scroller = (element, smooth) => { if (smooth) { - return new SmoothScroller(element, repeat); + return new SmoothScroller(element); } return new RoughtScroller(element); }; @@ -135,32 +97,35 @@ const getScroll = () => { return { x: target.scrollLeft, y: target.scrollTop }; }; -const scrollVertically = (count, smooth, repeat) => { +const scrollVertically = (count, smooth) => { let target = scrollTarget(); let x = target.scrollLeft; let y = target.scrollTop + SCROLL_DELTA_Y * count; - if (repeat && smooth) { + if (scrolling) { y = target.scrollTop + SCROLL_DELTA_Y * count * 4; } - scroller(target, smooth, repeat).scroll(x, y); + scroller(target, smooth).scroll(x, y); }; -const scrollHorizonally = (count, smooth, repeat) => { +const scrollHorizonally = (count, smooth) => { let target = scrollTarget(); let x = target.scrollLeft + SCROLL_DELTA_X * count; let y = target.scrollTop; - if (repeat && smooth) { + if (scrolling) { y = target.scrollTop + SCROLL_DELTA_Y * count * 4; } - scroller(target, smooth, repeat).scroll(x, y); + scroller(target, smooth).scroll(x, y); }; -const scrollPages = (count, smooth, repeat) => { +const scrollPages = (count, smooth) => { let target = scrollTarget(); let height = target.clientHeight; let x = target.scrollLeft; let y = target.scrollTop + height * count; - scroller(target, smooth, repeat).scroll(x, y); + if (scrolling) { + y = target.scrollTop + height * count * 4; + } + scroller(target, smooth).scroll(x, y); }; const scrollTo = (x, y, smooth) => { From 7bdecfdb340a02f767d8319dcd65334bd07c296e Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 11 Feb 2019 20:05:29 +0900 Subject: [PATCH 2/4] Clean scroller --- src/content/scrolls.js | 68 +++++++++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/src/content/scrolls.js b/src/content/scrolls.js index e4431ec..ce297b3 100644 --- a/src/content/scrolls.js +++ b/src/content/scrolls.js @@ -55,17 +55,39 @@ const resetScrolling = () => { scrolling = false; }; -class SmoothScroller { - constructor(element) { +class Scroller { + constructor(element, smooth) { this.element = element; + this.smooth = smooth; } - scroll(x, y) { + scrollTo(x, y) { + let behavior = this.smooth ? 'smooth' : 'auto'; window.scrollTo({ left: x, top: y, - behavior: 'smooth', + behavior: behavior, }); + if (!this.smooth) { + return; + } + this.prepareReset(); + } + + scrollBy(x, y) { + let behavior = this.smooth ? 'smooth' : 'auto'; + window.scrollBy({ + left: x, + top: y, + behavior: behavior, + }); + if (!this.smooth) { + return; + } + this.prepareReset(); + } + + prepareReset() { scrolling = true; if (lastTimeoutId) { clearTimeout(lastTimeoutId); @@ -85,13 +107,6 @@ class RoughtScroller { } } -const scroller = (element, smooth) => { - if (smooth) { - return new SmoothScroller(element); - } - return new RoughtScroller(element); -}; - const getScroll = () => { let target = scrollTarget(); return { x: target.scrollLeft, y: target.scrollTop }; @@ -99,66 +114,63 @@ const getScroll = () => { const scrollVertically = (count, smooth) => { let target = scrollTarget(); - let x = target.scrollLeft; - let y = target.scrollTop + SCROLL_DELTA_Y * count; + let delta = SCROLL_DELTA_Y * count; if (scrolling) { - y = target.scrollTop + SCROLL_DELTA_Y * count * 4; + delta = SCROLL_DELTA_Y * count * 4; } - scroller(target, smooth).scroll(x, y); + new Scroller(target, smooth).scrollBy(0, delta); }; const scrollHorizonally = (count, smooth) => { let target = scrollTarget(); - let x = target.scrollLeft + SCROLL_DELTA_X * count; - let y = target.scrollTop; + let delta = SCROLL_DELTA_X * count; if (scrolling) { - y = target.scrollTop + SCROLL_DELTA_Y * count * 4; + delta = SCROLL_DELTA_X * count * 4; } - scroller(target, smooth).scroll(x, y); + new Scroller(target, smooth).scrollBy(delta, 0); }; const scrollPages = (count, smooth) => { let target = scrollTarget(); let height = target.clientHeight; - let x = target.scrollLeft; - let y = target.scrollTop + height * count; + let delta = height * count; if (scrolling) { - y = target.scrollTop + height * count * 4; + delta = height * count; } - scroller(target, smooth).scroll(x, y); + new Scroller(target, smooth).scrollBy(0, delta); }; const scrollTo = (x, y, smooth) => { let target = scrollTarget(); - scroller(target, smooth, false).scroll(x, y); + new Scroller(target, smooth).scrollTo(x, y); }; const scrollToTop = (smooth) => { let target = scrollTarget(); let x = target.scrollLeft; let y = 0; - scroller(target, smooth, false).scroll(x, y); + new Scroller(target, smooth).scrollTo(x, y); }; const scrollToBottom = (smooth) => { let target = scrollTarget(); let x = target.scrollLeft; let y = target.scrollHeight; - scroller(target, smooth, false).scroll(x, y); + new Scroller(target, smooth).scrollTo(x, y); }; const scrollToHome = (smooth) => { let target = scrollTarget(); let x = 0; let y = target.scrollTop; - scroller(target, smooth, false).scroll(x, y); + new Scroller(target, smooth).scrollTo(x, y); }; const scrollToEnd = (smooth) => { let target = scrollTarget(); let x = target.scrollWidth; let y = target.scrollTop; - scroller(target, smooth, false).scroll(x, y); + new Scroller(target, smooth).scrollTo(x, y); }; export { From 4f342102c0ae8e7e4bc401e224e9d31f9089e6bd Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 11 Feb 2019 20:06:31 +0900 Subject: [PATCH 3/4] Remove repeat properties --- src/content/actions/operation.js | 8 ++++---- src/content/components/common/keymapper.js | 2 +- src/shared/utils/keys.js | 1 - 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/content/actions/operation.js b/src/content/actions/operation.js index b96c6b9..e83387d 100644 --- a/src/content/actions/operation.js +++ b/src/content/actions/operation.js @@ -10,7 +10,7 @@ import * as markActions from './mark'; import * as properties from 'shared/settings/properties'; // eslint-disable-next-line complexity, max-lines-per-function -const exec = (operation, repeat, settings, addonEnabled) => { +const exec = (operation, settings, addonEnabled) => { let smoothscroll = settings.properties.smoothscroll || properties.defaults.smoothscroll; switch (operation.type) { @@ -31,13 +31,13 @@ const exec = (operation, repeat, settings, addonEnabled) => { }), '*'); break; case operations.SCROLL_VERTICALLY: - scrolls.scrollVertically(operation.count, smoothscroll, repeat); + scrolls.scrollVertically(operation.count, smoothscroll); break; case operations.SCROLL_HORIZONALLY: - scrolls.scrollHorizonally(operation.count, smoothscroll, repeat); + scrolls.scrollHorizonally(operation.count, smoothscroll); break; case operations.SCROLL_PAGES: - scrolls.scrollPages(operation.count, smoothscroll, repeat); + scrolls.scrollPages(operation.count, smoothscroll); break; case operations.SCROLL_TOP: scrolls.scrollToTop(smoothscroll); diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index 4c294b4..ec0d093 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -49,7 +49,7 @@ export default class KeymapperComponent { } let operation = keymaps.get(matched[0]); let act = operationActions.exec( - operation, key.repeat, state.setting, state.addon.enabled + operation, state.setting, state.addon.enabled ); this.store.dispatch(act); this.store.dispatch(inputActions.clearKeys()); diff --git a/src/shared/utils/keys.js b/src/shared/utils/keys.js index 85779c0..4579fde 100644 --- a/src/shared/utils/keys.js +++ b/src/shared/utils/keys.js @@ -18,7 +18,6 @@ const fromKeyboardEvent = (e) => { return { key: modifiedKeyName(e.key), - repeat: e.repeat, shiftKey: shift, ctrlKey: e.ctrlKey, altKey: e.altKey, From 68668cfefa3d2e90564c381f9f55167df75e4a75 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 11 Feb 2019 20:07:46 +0900 Subject: [PATCH 4/4] Increase scroll delta --- src/content/scrolls.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/scrolls.js b/src/content/scrolls.js index ce297b3..a307aa7 100644 --- a/src/content/scrolls.js +++ b/src/content/scrolls.js @@ -1,7 +1,7 @@ import * as doms from 'shared/utils/dom'; -const SCROLL_DELTA_X = 48; -const SCROLL_DELTA_Y = 48; +const SCROLL_DELTA_X = 64; +const SCROLL_DELTA_Y = 64; // dirty way to store scrolling state on globally let scrolling = false;