diff options
Diffstat (limited to 'client/components/Details.jsx')
| -rw-r--r-- | client/components/Details.jsx | 98 |
1 files changed, 98 insertions, 0 deletions
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="/">< 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 |