mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-13 05:48:36 +03:00
lint
This commit is contained in:
@@ -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} />)
|
||||||
|
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user