client/components/Scroller.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

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.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) {
    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>
    )
  }
}