From 08e9e158f9e1b60cb2aefd0fcb88fc82c8b5ed5a Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 21 Jun 2017 14:02:42 +0200
Subject: refactor

---
 client/components/Scroller.js | 72 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 client/components/Scroller.js

(limited to 'client/components/Scroller.js')

diff --git a/client/components/Scroller.js b/client/components/Scroller.js
new file mode 100644
index 0000000..9bbe7d4
--- /dev/null
+++ b/client/components/Scroller.js
@@ -0,0 +1,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.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>
+    )
+  }
+}
-- 
cgit v1.2.3-70-g09d2