summaryrefslogtreecommitdiff
path: root/client/components/Scroller.js
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/Scroller.js')
-rw-r--r--client/components/Scroller.js72
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 &gt;
- </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>
- )
- }
-}