From 2ca1b54faacb261e5a25331e030da13d07c09662 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 13 Jan 2018 15:31:39 +0900 Subject: add smoothscroll property --- src/content/components/common/keymapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/content/components/common/keymapper.js') diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index fb8fabe..fa8c33a 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -47,7 +47,7 @@ export default class KeymapperComponent { return true; } let operation = keymaps.get(matched[0]); - this.store.dispatch(operationActions.exec(operation)); + this.store.dispatch(operationActions.exec(operation, state.setting)); this.store.dispatch(inputActions.clearKeys()); return true; } -- cgit v1.2.3 From 335b9ca47458b1817ef7705f4d999c25f423fad9 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 13 Jan 2018 19:49:11 +0900 Subject: fix smooth scroll on key repeated --- src/content/actions/operation.js | 16 ++++---- src/content/components/common/keymapper.js | 3 +- src/content/scrolls.js | 63 +++++++++++++++++++++--------- src/shared/utils/keys.js | 1 + 4 files changed, 55 insertions(+), 28 deletions(-) (limited to 'src/content/components/common/keymapper.js') diff --git a/src/content/actions/operation.js b/src/content/actions/operation.js index d2e258c..1c0a5fb 100644 --- a/src/content/actions/operation.js +++ b/src/content/actions/operation.js @@ -8,7 +8,7 @@ import * as addonActions from './addon'; import * as properties from 'shared/settings/properties'; // eslint-disable-next-line complexity -const exec = (operation, settings) => { +const exec = (operation, repeat, settings) => { let smoothscroll = settings.properties.smoothscroll || properties.defaults.smoothscroll; switch (operation.type) { @@ -27,19 +27,19 @@ const exec = (operation, settings) => { type: messages.FIND_PREV, }), '*'); case operations.SCROLL_VERTICALLY: - return scrolls.scrollVertically(operation.count, smoothscroll); + return scrolls.scrollVertically(operation.count, smoothscroll, repeat); case operations.SCROLL_HORIZONALLY: - return scrolls.scrollHorizonally(operation.count, smoothscroll); + return scrolls.scrollHorizonally(operation.count, smoothscroll, repeat); case operations.SCROLL_PAGES: - return scrolls.scrollPages(operation.count, smoothscroll); + return scrolls.scrollPages(operation.count, smoothscroll, repeat); case operations.SCROLL_TOP: - return scrolls.scrollTop(smoothscroll); + return scrolls.scrollTop(smoothscroll, repeat); case operations.SCROLL_BOTTOM: - return scrolls.scrollBottom(smoothscroll); + return scrolls.scrollBottom(smoothscroll, repeat); case operations.SCROLL_HOME: - return scrolls.scrollHome(smoothscroll); + return scrolls.scrollHome(smoothscroll, repeat); case operations.SCROLL_END: - return scrolls.scrollEnd(smoothscroll); + return scrolls.scrollEnd(smoothscroll, repeat); case operations.FOLLOW_START: return window.top.postMessage(JSON.stringify({ type: messages.FOLLOW_START, diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index fa8c33a..d9d1b2f 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -47,7 +47,8 @@ export default class KeymapperComponent { return true; } let operation = keymaps.get(matched[0]); - this.store.dispatch(operationActions.exec(operation, state.setting)); + this.store.dispatch(operationActions.exec( + operation, key.repeat, state.setting)); this.store.dispatch(inputActions.clearKeys()); return true; } diff --git a/src/content/scrolls.js b/src/content/scrolls.js index 2fe06c0..e8e9642 100644 --- a/src/content/scrolls.js +++ b/src/content/scrolls.js @@ -2,6 +2,9 @@ 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]; + const isVisible = (element) => { let rect = element.getBoundingClientRect(); if (rect.width === 0 || rect.height === 0) { @@ -67,11 +70,23 @@ const scrollTarget = () => { }; class SmoothScroller { - constructor(element) { + constructor(element, repeat) { 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; @@ -99,17 +114,21 @@ class SmoothScroller { if (elapsed < SMOOTH_SCROLL_DURATION) { window.requestAnimationFrame(this.loop.bind(this)); } else { + scrolling[0] = false; this.element.scrollTo(this.targetX, this.targetY); } } - // in-out quad easing - easing(t) { + static inOutQuadEasing(t) { if (t < 1) { return t * t; } return -(t - 1) * (t - 1) + 1; } + + static linearEasing(t) { + return t; + } } class RoughtScroller { @@ -122,61 +141,67 @@ class RoughtScroller { } } -const scroller = (element, smooth) => { +const scroller = (element, smooth, repeat) => { if (smooth) { - return new SmoothScroller(element); + return new SmoothScroller(element, repeat); } return new RoughtScroller(element); }; -const scrollVertically = (count, smooth) => { +const scrollVertically = (count, smooth, repeat) => { let target = scrollTarget(); let x = target.scrollLeft; let y = target.scrollTop + SCROLL_DELTA_Y * count; - scroller(target, smooth).scroll(x, y); + if (repeat && smooth) { + y = target.scrollTop + SCROLL_DELTA_Y * count * 4; + } + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollHorizonally = (count, smooth) => { +const scrollHorizonally = (count, smooth, repeat) => { let target = scrollTarget(); let x = target.scrollLeft + SCROLL_DELTA_X * count; let y = target.scrollTop; - scroller(target, smooth).scroll(x, y); + if (repeat && smooth) { + y = target.scrollTop + SCROLL_DELTA_Y * count * 4; + } + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollPages = (count, smooth) => { +const scrollPages = (count, smooth, repeat) => { let target = scrollTarget(); let height = target.clientHeight; let x = target.scrollLeft; let y = target.scrollTop + height * count; - scroller(target, smooth).scroll(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollTop = (smooth) => { +const scrollTop = (smooth, repeat) => { let target = scrollTarget(); let x = target.scrollLeft; let y = 0; - scroller(target, smooth).scroll(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollBottom = (smooth) => { +const scrollBottom = (smooth, repeat) => { let target = scrollTarget(); let x = target.scrollLeft; let y = target.scrollHeight; - scroller(target, smooth).scroll(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollHome = (smooth) => { +const scrollHome = (smooth, repeat) => { let target = scrollTarget(); let x = 0; let y = target.scrollTop; - scroller(target, smooth).scroll(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; -const scrollEnd = (smooth) => { +const scrollEnd = (smooth, repeat) => { let target = scrollTarget(); let x = target.scrollWidth; let y = target.scrollTop; - scroller(target, smooth).scroll(x, y); + scroller(target, smooth, repeat).scroll(x, y); }; export { diff --git a/src/shared/utils/keys.js b/src/shared/utils/keys.js index fba8ce3..8a86dfb 100644 --- a/src/shared/utils/keys.js +++ b/src/shared/utils/keys.js @@ -18,6 +18,7 @@ const fromKeyboardEvent = (e) => { return { key: modifierdKeyName(e.key), + repeat: e.repeat, shiftKey: shift, ctrlKey: e.ctrlKey, altKey: e.altKey, -- cgit v1.2.3