diff options
Diffstat (limited to 'client/components/Scroller.jsx')
| -rw-r--r-- | client/components/Scroller.jsx | 75 |
1 files changed, 0 insertions, 75 deletions
diff --git a/client/components/Scroller.jsx b/client/components/Scroller.jsx deleted file mode 100644 index 8958481..0000000 --- a/client/components/Scroller.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import { h, Component } from 'preact' -import { Lethargy } from 'lethargy' -import { Link } from 'react-router-dom' -import util from '../util' - -export default class Scroller extends Component { - constructor() { - super() - this.state = { - index: 0, - } - this.lastScroll = Date.now() - this.onWheel = this.onWheel.bind(this) - this.lethargy = new Lethargy(8, 100, 1.1, 1000) - document.body.addEventListener('wheel', this.onWheel) - document.body.addEventListener('DOMMouseScroll', this.onWheel) - } - onWheel(e) { - return - if (util.isMobile) return; - 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> - <div>{painting.title}</div> - <div>{painting.medium}</div> - <div>{painting.date}</div> - <div>{painting.image.caption}</div> - <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> - ) - } -} |
