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

Merge pull request #307 from ueokande/smooth-scroll

Browse Source 
Smooth scroll
jh-changes
Shin'ya Ueoka 7 years ago committed by GitHub
parent 4d4a959162 335b9ca474
commit 2302a1d8b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 142 additions and 46 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. 19
      src/content/actions/operation.js
  2. 3
      src/content/components/common/keymapper.js
  3. 163
      src/content/scrolls.js
  4. 2
      src/shared/settings/properties.js
  5. 1
      src/shared/utils/keys.js

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

@ -5,9 +5,12 @@ import * as navigates from 'content/navigates';
import * as urls from 'content/urls';
import * as consoleFrames from 'content/console-frames';
import * as addonActions from './addon';
import * as properties from 'shared/settings/properties';
// eslint-disable-next-line complexity
const exec = (operation) => {
const exec = (operation, repeat, settings) => {
let smoothscroll = settings.properties.smoothscroll ||
properties.defaults.smoothscroll;
switch (operation.type) {
case operations.ADDON_ENABLE:
return addonActions.enable();
@ -24,19 +27,19 @@ const exec = (operation) => {
type: messages.FIND_PREV,
}), '*');
case operations.SCROLL_VERTICALLY:
return scrolls.scrollVertically(window, operation.count);
return scrolls.scrollVertically(operation.count, smoothscroll, repeat);
case operations.SCROLL_HORIZONALLY:
return scrolls.scrollHorizonally(window, operation.count);
return scrolls.scrollHorizonally(operation.count, smoothscroll, repeat);
case operations.SCROLL_PAGES:
return scrolls.scrollPages(window, operation.count);
return scrolls.scrollPages(operation.count, smoothscroll, repeat);
case operations.SCROLL_TOP:
return scrolls.scrollTop(window);
return scrolls.scrollTop(smoothscroll, repeat);
case operations.SCROLL_BOTTOM:
return scrolls.scrollBottom(window);
return scrolls.scrollBottom(smoothscroll, repeat);
case operations.SCROLL_HOME:
return scrolls.scrollHome(window);
return scrolls.scrollHome(smoothscroll, repeat);
case operations.SCROLL_END:
return scrolls.scrollEnd(window);
return scrolls.scrollEnd(smoothscroll, repeat);
case operations.FOLLOW_START:
return window.top.postMessage(JSON.stringify({
type: messages.FOLLOW_START,

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

@ -47,7 +47,8 @@ export default class KeymapperComponent {
return true;
}
let operation = keymaps.get(matched[0]);
this.store.dispatch(operationActions.exec(operation));
this.store.dispatch(operationActions.exec(
operation, key.repeat, state.setting));
this.store.dispatch(inputActions.clearKeys());
return true;
}

163
src/content/scrolls.js
Unescape View File

@ -1,7 +1,11 @@
const SCROLL_DELTA_X = 48;
const SCROLL_DELTA_Y = 48;
const SMOOTH_SCROLL_DURATION = 150;
const isVisible = (win, element) => {
// 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) {
return false;
@ -9,19 +13,19 @@ const isVisible = (win, element) => {
if (rect.right < 0 && rect.bottom < 0) {
return false;
}
if (win.innerWidth < rect.left && win.innerHeight < rect.top) {
if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
return false;
}
let { display, visibility } = win.getComputedStyle(element);
let { display, visibility } = window.getComputedStyle(element);
if (display === 'none' || visibility === 'hidden') {
return false;
}
return true;
};
const isScrollableStyle = (win, element) => {
let { overflowX, overflowY } = win.getComputedStyle(element);
const isScrollableStyle = (element) => {
let { overflowX, overflowY } = window.getComputedStyle(element);
return !(overflowX !== 'scroll' && overflowX !== 'auto' &&
overflowY !== 'scroll' && overflowY !== 'auto');
};
@ -35,15 +39,15 @@ const isOverflowed = (element) => {
// 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
// most pages, the window is root element i,e, documentElement.
const findScrollable = (win, element) => {
if (isScrollableStyle(win, element) && isOverflowed(element)) {
const findScrollable = (element) => {
if (isScrollableStyle(element) && isOverflowed(element)) {
return element;
}
let children = Array.prototype
.filter.call(element.children, e => isVisible(win, e));
.filter.call(element.children, e => isVisible(e));
for (let child of children) {
let scrollable = findScrollable(win, child);
let scrollable = findScrollable(child);
if (scrollable) {
return scrollable;
}
@ -51,68 +55,153 @@ const findScrollable = (win, element) => {
return null;
};
const scrollTarget = (win) => {
if (isOverflowed(win.document.documentElement)) {
return win.document.documentElement;
const scrollTarget = () => {
if (isOverflowed(window.document.documentElement)) {
return window.document.documentElement;
}
if (isOverflowed(win.document.body)) {
return win.document.body;
if (isOverflowed(window.document.body)) {
return window.document.body;
}
let target = findScrollable(win, win.document.documentElement);
let target = findScrollable(window.document.documentElement);
if (target) {
return target;
}
return win.document.documentElement;
return window.document.documentElement;
};
const scrollVertically = (win, count) => {
let target = scrollTarget(win);
class SmoothScroller {
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;
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;
}
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;
}
}
class RoughtScroller {
constructor(element) {
this.element = element;
}
scroll(x, y) {
this.element.scrollTo(x, y);
}
}
const scroller = (element, smooth, repeat) => {
if (smooth) {
return new SmoothScroller(element, repeat);
}
return new RoughtScroller(element);
};
const scrollVertically = (count, smooth, repeat) => {
let target = scrollTarget();
let x = target.scrollLeft;
let y = target.scrollTop + SCROLL_DELTA_Y * count;
target.scrollTo(x, y);
if (repeat && smooth) {
y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
}
scroller(target, smooth, repeat).scroll(x, y);
};
const scrollHorizonally = (win, count) => {
let target = scrollTarget(win);
const scrollHorizonally = (count, smooth, repeat) => {
let target = scrollTarget();
let x = target.scrollLeft + SCROLL_DELTA_X * count;
let y = target.scrollTop;
target.scrollTo(x, y);
if (repeat && smooth) {
y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
}
scroller(target, smooth, repeat).scroll(x, y);
};
const scrollPages = (win, count) => {
let target = scrollTarget(win);
const scrollPages = (count, smooth, repeat) => {
let target = scrollTarget();
let height = target.clientHeight;
let x = target.scrollLeft;
let y = target.scrollTop + height * count;
target.scrollTo(x, y);
scroller(target, smooth, repeat).scroll(x, y);
};
const scrollTop = (win) => {
let target = scrollTarget(win);
const scrollTop = (smooth, repeat) => {
let target = scrollTarget();
let x = target.scrollLeft;
let y = 0;
target.scrollTo(x, y);
scroller(target, smooth, repeat).scroll(x, y);
};
const scrollBottom = (win) => {
let target = scrollTarget(win);
const scrollBottom = (smooth, repeat) => {
let target = scrollTarget();
let x = target.scrollLeft;
let y = target.scrollHeight;
target.scrollTo(x, y);
scroller(target, smooth, repeat).scroll(x, y);
};
const scrollHome = (win) => {
let target = scrollTarget(win);
const scrollHome = (smooth, repeat) => {
let target = scrollTarget();
let x = 0;
let y = target.scrollTop;
target.scrollTo(x, y);
scroller(target, smooth, repeat).scroll(x, y);
};
const scrollEnd = (win) => {
let target = scrollTarget(win);
const scrollEnd = (smooth, repeat) => {
let target = scrollTarget();
let x = target.scrollWidth;
let y = target.scrollTop;
target.scrollTo(x, y);
scroller(target, smooth, repeat).scroll(x, y);
};
export {

2
src/shared/settings/properties.js
Unescape View File

@ -4,11 +4,13 @@
// mybool: 'boolean',
const types = {
hintchars: 'string',
smoothscroll: 'boolean',
};
// describe default values of a property
const defaults = {
hintchars: 'abcdefghijklmnopqrstuvwxyz',
smoothscroll: false,
};
export { types, defaults };

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

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