This commit is contained in:
Lachlan Kermode
2019-02-04 10:06:26 +00:00
parent 3ea3de84b2
commit a0dc3ed61d
2 changed files with 24 additions and 26 deletions

View File

@@ -177,5 +177,4 @@ class Card extends React.Component {
}
// The ref to each card will be used in CardStack for programmatic scrolling
export default React.forwardRef((props, ref) => <Card innerRef={ref} {...props}/>);
export default React.forwardRef((props, ref) => <Card innerRef={ref} {...props} />)

View File

@@ -6,15 +6,14 @@ import Card from './Card.jsx'
import copy from '../js/data/copy.json'
class CardStack extends React.Component {
constructor() {
constructor () {
super()
this.refs = {}
this.refCardStack = React.createRef()
this.refCardStackContent = React.createRef()
}
componentDidUpdate() {
componentDidUpdate () {
const isNarrative = !!this.props.narrative
if (isNarrative) {
@@ -22,34 +21,34 @@ class CardStack extends React.Component {
}
}
scrollToCard() {
scrollToCard () {
const duration = 500
const element = this.refCardStack.current
const cardScroll = this.refs[this.props.narrative.current].current.offsetTop - 20
let start = element.scrollTop;
let change = cardScroll - start;
let currentTime = 0;
const increment = 20;
let start = element.scrollTop
let change = cardScroll - start
let currentTime = 0
const increment = 20
//t = current time
//b = start value
//c = change in value
//d = duration
// t = current time
// b = start value
// c = change in value
// d = duration
Math.easeInOutQuad = function (t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return - c / 2 * (t * (t - 2) - 1) + b;
};
t /= d / 2
if (t < 1) return c / 2 * t * t + b
t -= 1
return -c / 2 * (t * (t - 2) - 1) + b
}
const animateScroll = function() {
currentTime += increment;
const val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if (currentTime < duration) setTimeout(animateScroll, increment);
};
animateScroll();
const animateScroll = function () {
currentTime += increment
const val = Math.easeInOutQuad(currentTime, start, change, duration)
element.scrollTop = val
if (currentTime < duration) setTimeout(animateScroll, increment)
}
animateScroll()
}
renderCards (events, selections) {