Merge pull request #307 from ueokande/smooth-scroll

Smooth scroll

src/content/actions/operation.js

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

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));
+    this.store.dispatch(operationActions.exec(
+      operation, key.repeat, state.setting));
     this.store.dispatch(inputActions.clearKeys());
     return true;
   }

src/content/scrolls.js

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

src/shared/settings/properties.js

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

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,