aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/content/actions/operation.js8
-rw-r--r--src/content/components/common/keymapper.js2
-rw-r--r--src/content/scrolls.js137
-rw-r--r--src/shared/utils/keys.js1
4 files changed, 62 insertions, 86 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/content/scrolls.js b/src/content/scrolls.js
index b9a4bc3..a307aa7 100644
--- a/src/content/scrolls.js
+++ b/src/content/scrolls.js
@@ -1,11 +1,11 @@
import * as doms from 'shared/utils/dom';
-const SCROLL_DELTA_X = 48;
-const SCROLL_DELTA_Y = 48;
-const SMOOTH_SCROLL_DURATION = 150;
+const SCROLL_DELTA_X = 64;
+const SCROLL_DELTA_Y = 64;
// 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,49 @@ const scrollTarget = () => {
return window.document.documentElement;
};
-class SmoothScroller {
- constructor(element, repeat) {
+const resetScrolling = () => {
+ scrolling = false;
+};
+
+class Scroller {
+ constructor(element, smooth) {
this.element = element;
- this.repeat = repeat;
- this.scrolling = scrolling;
- if (repeat) {
- this.easing = SmoothScroller.linearEasing;
- } else {
- this.easing = SmoothScroller.inOutQuadEasing;
- }
+ this.smooth = smooth;
}
- scroll(x, y) {
- if (this.scrolling[0]) {
+ scrollTo(x, y) {
+ let behavior = this.smooth ? 'smooth' : 'auto';
+ window.scrollTo({
+ left: x,
+ top: y,
+ behavior: behavior,
+ });
+ if (!this.smooth) {
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));
+ this.prepareReset();
}
- loop(time) {
- if (!this.timeStart) {
- this.timeStart = time;
- }
-
- 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);
+ scrollBy(x, y) {
+ let behavior = this.smooth ? 'smooth' : 'auto';
+ window.scrollBy({
+ left: x,
+ top: y,
+ behavior: behavior,
+ });
+ if (!this.smooth) {
+ return;
}
+ this.prepareReset();
}
- static inOutQuadEasing(t) {
- if (t < 1) {
- return t * t;
+ prepareReset() {
+ scrolling = true;
+ if (lastTimeoutId) {
+ clearTimeout(lastTimeoutId);
+ lastTimeoutId = null;
}
- return -(t - 1) * (t - 1) + 1;
- }
-
- static linearEasing(t) {
- return t;
+ lastTimeoutId = setTimeout(resetScrolling, 100);
}
}
@@ -123,77 +107,70 @@ class RoughtScroller {
}
}
-const scroller = (element, smooth, repeat) => {
- if (smooth) {
- return new SmoothScroller(element, repeat);
- }
- return new RoughtScroller(element);
-};
-
const getScroll = () => {
let target = scrollTarget();
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) {
- y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
+ let delta = SCROLL_DELTA_Y * count;
+ if (scrolling) {
+ delta = SCROLL_DELTA_Y * count * 4;
}
- scroller(target, smooth, repeat).scroll(x, y);
+ new Scroller(target, smooth).scrollBy(0, delta);
};
-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) {
- y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
+ let delta = SCROLL_DELTA_X * count;
+ if (scrolling) {
+ delta = SCROLL_DELTA_X * count * 4;
}
- scroller(target, smooth, repeat).scroll(x, y);
+ new Scroller(target, smooth).scrollBy(delta, 0);
};
-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);
+ let delta = height * count;
+ if (scrolling) {
+ delta = height * count;
+ }
+ 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 {
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,