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