diff options
Diffstat (limited to 'client/components/Scroller.js')
| -rw-r--r-- | client/components/Scroller.js | 72 |
1 files changed, 0 insertions, 72 deletions
diff --git a/client/components/Scroller.js b/client/components/Scroller.js deleted file mode 100644 index 9bbe7d4..0000000 --- a/client/components/Scroller.js +++ /dev/null @@ -1,72 +0,0 @@ -import { h, Component } from 'preact' -import { Lethargy } from 'lethargy' -import { Link } from 'react-router-dom' - -export default class Scroller extends Component { - constructor() { - super() - this.state = { - index: 0, - } - this.lastScroll = Date.now() - this.onScroll = this.onScroll.bind(this) - this.lethargy = new Lethargy(8, 100, 1.1, 1000) - document.body.addEventListener('wheel', this.onScroll) - document.body.addEventListener('DOMMouseScroll', this.onScroll) - } - onScroll(e) { - e.preventDefault() - e.stopPropagation() - const scrollDirection = this.lethargy.check(e) - const now = Date.now() - if (scrollDirection !== false && now - this.lastScroll > 600) { - this.lastScroll = now - const cellCount = this.props.data.painting.length + 1 - const index = (this.state.index + cellCount - scrollDirection) % cellCount - this.setState({ index }) - } - } - render() { - const paintings = this.props.data.painting.map( (painting, i) => { - return ( - <div class='cell' key={i}> - <div class='painting'> - <div class='image' style={'background-image: url(' + painting.image.uri + ')'} /> - </div> - <div class='about'> - <div> - {painting.title}<br/> - {painting.medium}<br/> - {painting.date}<br/> - {painting.image.caption}<br/> - <br/> - <Link to={'/painting/' + painting.id}> - More info > - </Link> - </div> - </div> - </div> - ) - }) - const about = this.props.data.page[0] - const body = (about.body || '').replace(/\n/g,'<br>') - const page = ( - <div class='cell'> - <div class='painting'> - <div class='image' style={'background-image: url(' + about.image.uri + ')'} /> - </div> - <div class='about' dangerouslySetInnerHTML={{ __html: body }}> - </div> - </div> - ) - const scrollPercentage = this.state.index * -100 - return ( - <div class='scroller' - style={'transform:translateY(' + scrollPercentage + 'vh)'} - > - {paintings} - {page} - </div> - ) - } -} |
