about summary refs log tree commit diff
diff options
context:
space:
mode:
authorAkihiko Odaki <akihiko.odaki.4i@stu.hosei.ac.jp>2017-08-05 01:57:46 +0900
committerEugen Rochko <eugen@zeonfederated.com>2017-08-04 18:57:46 +0200
commit9d1f8b9d6af1d384a4dd68bc6353a2fde5735b33 (patch)
treea6271cec3f53aa94a44dbd1d13e696bd587ba70d
parent400616813e6012780b97c5a297797ee50fd2072a (diff)
Scroll columns area to right when children property is changed (#4517)
The feature to pin column could hide the rightmost column, which is
specified with children property of ColumnsArea.

The user is likely to see the column when the property changed, so scroll
the area in such cases.
-rw-r--r--app/javascript/mastodon/components/column.js2
-rw-r--r--app/javascript/mastodon/features/ui/components/column.js2
-rw-r--r--app/javascript/mastodon/features/ui/components/columns_area.js14
-rw-r--r--app/javascript/mastodon/scroll.js11
4 files changed, 20 insertions, 9 deletions
diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js
index 93f1d6260..05a7c1436 100644
--- a/app/javascript/mastodon/components/column.js
+++ b/app/javascript/mastodon/components/column.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import detectPassiveEvents from 'detect-passive-events';
-import scrollTop from '../scroll';
+import { scrollTop } from '../scroll';
 
 export default class Column extends React.PureComponent {
 
diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js
index aea102aac..9031c16fc 100644
--- a/app/javascript/mastodon/features/ui/components/column.js
+++ b/app/javascript/mastodon/features/ui/components/column.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ColumnHeader from './column_header';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
-import scrollTop from '../../../scroll';
+import { scrollTop } from '../../../scroll';
 import { isMobile } from '../../../is_mobile';
 
 export default class Column extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index 63bd1b021..7652d67a0 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -12,6 +12,8 @@ import ColumnLoading from './column_loading';
 import BundleColumnError from './bundle_column_error';
 import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, FavouritedStatuses } from '../../ui/util/async-components';
 
+import { scrollRight } from '../../../scroll';
+
 const componentMap = {
   'COMPOSE': Compose,
   'HOME': HomeTimeline,
@@ -49,9 +51,13 @@ export default class ColumnsArea extends ImmutablePureComponent {
     this.setState({ shouldAnimate: true });
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     this.lastIndex = getIndex(this.context.router.history.location.pathname);
     this.setState({ shouldAnimate: true });
+
+    if (this.props.children !== prevProps.children) {
+      scrollRight(this.node);
+    }
   }
 
   handleSwipe = (index) => {
@@ -74,6 +80,10 @@ export default class ColumnsArea extends ImmutablePureComponent {
     }
   }
 
+  setRef = (node) => {
+    this.node = node;
+  }
+
   renderView = (link, index) => {
     const columnIndex = getIndex(this.context.router.history.location.pathname);
     const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] });
@@ -114,7 +124,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     }
 
     return (
-      <div className='columns-area'>
+      <div className='columns-area' ref={this.setRef}>
         {columns.map(column => {
           const params = column.get('params', null) === null ? null : column.get('params').toJS();
 
diff --git a/app/javascript/mastodon/scroll.js b/app/javascript/mastodon/scroll.js
index c089d37db..44f95b17f 100644
--- a/app/javascript/mastodon/scroll.js
+++ b/app/javascript/mastodon/scroll.js
@@ -1,9 +1,9 @@
 const easingOutQuint = (x, t, b, c, d) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
 
-const scrollTop = (node) => {
+const scroll = (node, key, target) => {
   const startTime = Date.now();
-  const offset    = node.scrollTop;
-  const targetY   = -offset;
+  const offset    = node[key];
+  const gap       = target - offset;
   const duration  = 1000;
   let interrupt   = false;
 
@@ -15,7 +15,7 @@ const scrollTop = (node) => {
       return;
     }
 
-    node.scrollTop = easingOutQuint(0, elapsed, offset, targetY, duration);
+    node[key] = easingOutQuint(0, elapsed, offset, gap, duration);
     requestAnimationFrame(step);
   };
 
@@ -26,4 +26,5 @@ const scrollTop = (node) => {
   };
 };
 
-export default scrollTop;
+export const scrollRight = (node) => scroll(node, 'scrollLeft', node.scrollWidth);
+export const scrollTop = (node) => scroll(node, 'scrollTop', 0);