blob: fff06e0177a19f0150481b090c92cdc3b17b54b9 (
plain)
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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>
)
})
}
|
