From 32858022edf1142d2b05e98290d8cca9b6a8c87a Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 21 Jun 2017 20:59:00 +0200
Subject: details page

---
 client/components/App.jsx      | 39 ++++++++++++++---
 client/components/Details.jsx  | 98 ++++++++++++++++++++++++++++++++++++++++++
 client/components/Modal.jsx    | 14 ++++++
 client/components/Scroller.js  | 72 -------------------------------
 client/components/Scroller.jsx | 72 +++++++++++++++++++++++++++++++
 5 files changed, 216 insertions(+), 79 deletions(-)
 create mode 100644 client/components/Details.jsx
 create mode 100644 client/components/Modal.jsx
 delete mode 100644 client/components/Scroller.js
 create mode 100644 client/components/Scroller.jsx

(limited to 'client/components')

diff --git a/client/components/App.jsx b/client/components/App.jsx
index 841712b..5ab98cb 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -1,31 +1,56 @@
 import { h, Component } from 'preact'
 import { isMobile } from '../util'
 import db from '../db'
-import { Lethargy } from 'lethargy'
-import { Link } from 'react-router-dom'
+import { Link, withRouter } from 'react-router-dom'
 
-import Scroller from './Scroller'
+import Scroller from './Scroller.jsx'
+import Details from './Details.jsx'
+import Modal from './Modal.jsx'
 
-export default class App extends Component {
-  constructor() {
+class App extends Component {
+  constructor(props) {
     super()
     this.state = {
       data: db.backupDB,
+      painting: null,
     }
     db.fetch( data => {
       document.body.parentNode.classList.remove('loading')
       this.setState({ data }) 
     })
   }
+  setIdFromLocation(props){
+    const id = props.location.pathname.split('/')[2]
+    if (id) {
+      this.setState({ painting: id })
+    }
+  }
+  componentWillMount(){
+    this.setIdFromLocation(this.props)
+  }
+  componentWillReceiveProps(props){
+    this.setIdFromLocation(props)
+  }
   render() {
+    let painting;
+    this.state.data.painting.some( (el) => {
+      if (el.id == this.state.painting) {
+        painting = el
+        return true
+      }
+      return false
+    })
     return (
       <div>
         <div class='header'>Procedural Paintings by Pepper</div>
         <Scroller data={this.state.data} />
+        <Modal visible={this.props.location.pathname !== '/'}>
+          <Details painting={painting} />
+        </Modal>
       </div>
     )
   }
 }
 
-//         <Modal visible={this.props.location !== '/'}>
-//         </Modal>
+
+export default withRouter(App)
\ No newline at end of file
diff --git a/client/components/Details.jsx b/client/components/Details.jsx
new file mode 100644
index 0000000..fff06e0
--- /dev/null
+++ b/client/components/Details.jsx
@@ -0,0 +1,98 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+export default class Details extends Component {
+  constructor(){
+    super()
+  }
+  onWheel(e){
+    e.stopPropagation()
+  }
+  render() {
+    const painting = this.props.painting
+    if (! painting) return
+    const source_images = findImages(painting.parameters)
+    const parameters = breakUpJSON(painting.parameters)
+    return (
+      <div class='details' onWheel={this.onWheel}>
+        <Link to="/">&lt; Go back</Link>
+        <h1>{painting.title}</h1>
+        <div class='stats'>
+          {painting.medium}<br/>
+          {painting.date}<br/>
+          {painting.image.caption}
+        </div>
+        <img src={painting.image.uri} />
+        {painting.originalImage &&
+          <div>
+            <h2>Original Image</h2>
+            <img src={painting.originalImage.uri} />
+          </div>
+        }
+        {painting.parameters &&
+          <div>
+            <h2>Creation Parameters</h2>
+            <div class='parameters'>
+              {parameters}
+            </div>
+            <h2>Source Images</h2>
+            {source_images}
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+class PossiblyBadImage extends Component {
+  constructor(){
+    super()
+    this.state = { error: false }
+    this.onError = this.onError.bind(this)
+  }
+  onError(){
+    this.setState({ error: true })
+  }
+  render(){
+    if (this.state.error) return
+    return (
+      <img src={this.props.source} onError={this.onError} />
+    )
+  }
+}
+
+function findImages(s) {
+  s = s || ""
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  let match = urlRegex.exec(s);
+  let urls = []
+  let url;
+  let seen = {};
+  while (match != null) {
+    url = match[0].replace(/",?/,"")
+    if (url && ! seen[url]) {
+      seen[url] = true
+      urls.push(
+        <a href={url} key={url}>
+          <PossiblyBadImage
+            source={url}
+          />
+        </a>
+      )
+    }
+    match = urlRegex.exec(s);
+  }
+  return urls
+}
+
+function breakUpJSON(ss){
+  return (ss || '').split("} {").map( (s) => {
+    return (
+      <div>
+        {s}
+        <br/>
+        <br/>
+      </div>
+    )
+  })
+}
\ No newline at end of file
diff --git a/client/components/Modal.jsx b/client/components/Modal.jsx
new file mode 100644
index 0000000..6e7e574
--- /dev/null
+++ b/client/components/Modal.jsx
@@ -0,0 +1,14 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+export default class Modal extends Component {
+  render() {
+    const className = this.props.visible ? 'modal visible' : 'modal'
+    return (
+      <div class={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
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>
-    )
-  }
-}
diff --git a/client/components/Scroller.jsx b/client/components/Scroller.jsx
new file mode 100644
index 0000000..2c67a9a
--- /dev/null
+++ b/client/components/Scroller.jsx
@@ -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.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>
+    )
+  }
+}
-- 
cgit v1.2.3-70-g09d2