jab2870
/
Vim-Vixen
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #536 from ueokande/make-smooth-scroll-smoother

Browse Source 
Make smooth-scroll smoother
jh-changes
Shin'ya Ueoka 6 years ago committed by GitHub
parent b5a85ad059 68668cfefa
commit 21788740c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/content/actions/operation.js
  2. 2
      src/content/components/common/keymapper.js
  3. 137
      src/content/scrolls.js
  4. 1
      src/shared/utils/keys.js

8
src/content/actions/operation.js
Unescape View File

@ -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);

2
src/content/components/common/keymapper.js
Unescape View File

@ -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());

137
src/content/scrolls.js
Unescape View File

@ -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 {

1
src/shared/utils/keys.js
Unescape View File

@ -18,7 +18,6 @@ const fromKeyboardEvent = (e) => {
return {
key: modifiedKeyName(e.key),
repeat: e.repeat,
shiftKey: shift,
ctrlKey: e.ctrlKey,
altKey: e.altKey,