From 8a6b1cc6a1d20a9d3a3170ba12b86adbb48cb2eb Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 21 Jun 2017 12:36:12 +0200
Subject: scrolling

---
 client/components/App.jsx | 55 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 10 deletions(-)

(limited to 'client/components/App.jsx')

diff --git a/client/components/App.jsx b/client/components/App.jsx
index e478ea0..ae030c7 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -1,13 +1,37 @@
 import { h, Component } from 'preact'
+import { isMobile } from '../util'
 import db from '../db'
+import { Lethargy } from 'lethargy'
 
 export default class App extends Component {
   constructor() {
     super()
     this.state = {
+      index: 0,
       data: db.backupDB,
     }
-    db.fetch( data => this.setState({ data }) )
+    this.lastScroll = Date.now()
+    this.onScroll = this.onScroll.bind(this)
+    this.lethargy = new Lethargy(8, 100, 1.1, 1000)
+    db.fetch( data => {
+      document.body.parentNode.classList.remove('loading')
+      this.setState({ data }) 
+    })
+//     document.body.addEventListener('mousewheel', this.onScroll)
+//     document.body.addEventListener('DOMMouseScroll', this.onScroll)
+    document.body.addEventListener('wheel', this.onScroll)
+  }
+  onScroll(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    const scrollDirection = this.lethargy.check(e)
+    const now = Date.now()
+    if (scrollDirection !== false && now - this.lastScroll > 500) {
+      this.lastScroll = now
+      const cellCount = this.state.data.painting.length
+      const index = (this.state.index + cellCount - scrollDirection) % cellCount
+      this.setState({ index })
+    }
   }
   render() {
     const paintings = this.state.data.painting.map( (painting, i) => {
@@ -17,23 +41,34 @@ export default class App extends Component {
             <div class='image' style={'background-image: url(' + painting.image.uri + ')'} />
           </div>
           <div class='about'>
-            <div class='medium'>
-              <div class='title'>
-                {painting.title}
-              </div>
-              {painting.medium}<br/>
-              {painting.date}<br/>
-              {painting.image.caption}<br/>
-            </div>
+            {painting.title}<br/>
+            {painting.medium}<br/>
+            {painting.date}<br/>
+            {painting.image.caption}<br/>
           </div>
         </div>
       )
     })
+    const about = this.state.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>
         <div class='header'>Procedural Paintings by Pepper</div>
-        <div class='scroller'>
+        <div class='scroller'
+             style={'transform:translateY(' + scrollPercentage + 'vh)'}
+        >
           {paintings}
+          {page}
         </div>
       </div>
     )
-- 
cgit v1.2.3-70-g09d2