-
Notifications
You must be signed in to change notification settings - Fork 3
/
artwork-preview.js
105 lines (93 loc) · 3.49 KB
/
artwork-preview.js
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
99
100
101
102
103
104
105
var React = require('react')
var Router = require('react-router')
var { Link } = Router
var ArtworkImage = require('./artwork-image')
var Markdown = require('./markdown')
var Peek = require('./peek')
var Artwork = require('./_artwork')
var highlighter = require('./highlighter')
var ArtworkDetails = require('./artwork-details')
var ArtworkPreview = React.createClass({
getDefaultProps() {
return {
showLink: true,
}
},
render() {
var {art, style, showLink, highlights} = this.props
var id = art.id.replace('http://api.artsmia.org/objects/', '')
var highlight = highlighter.bind(null, art, highlights)
var showHighlights = highlights && <div className='artwork-detail' style={{marginTop: '1em'}}>
<hr />
<ArtworkDetails
art={art}
highlights={highlights}
skipFields={!this.props.showDuplicateDetails && "title style artist medium credit accession_number gallery text tags"}
{...this.props}
/>
</div>
var details = showLink ? <Link to="artwork" params={{id: art.id}}>
<div className="objects-page-link"><div className="objects-page-icon"></div>details</div>
</Link> : ''
return (
<Artwork.Figure art={art} className='objects-focus' style={style} link={showLink}>
<div className="art-details preview-header">
{art.deaccessioned == 'true' && <DeaccessionedBanner art={art} />}
{art.accession_number.match(/^L/i) && <LoanBanner art={art} />}
<Artwork.Title art={art} link={showLink} {...this.props} />
<Artwork.Creator art={art} {...this.props} />
<Artwork.Tombstone art={art} {...this.props} highlightAccessionNumber={true} />
<h6><Peek showPeeks={this.props.showPeeks} facet="room" highlightedValue={highlight('room')}>{art.room}</Peek></h6>
{this.props.children || <div>
<div className="description" itemProp="description">
<Markdown>{highlight('text')}</Markdown>
</div>
<Artwork.LinkBar art={art} link={showLink} />
{showHighlights}
</div>}
</div>
</Artwork.Figure>
)
},
displayBio() {
var {art} = this.props
var {nationality, life_date} = art
var lifeDateWithoutNationality = life_date && life_date.replace(nationality+', ', '');
var nationAndDates = <span>
{nationality && (<span><Peek facet="nationality" tag="span" showIcon={false}>{nationality}</Peek>, </span>)}
{lifeDateWithoutNationality && <Peek facet="life_date" tag="span" showIcon={false}>{lifeDateWithoutNationality}</Peek>}
</span>
if(!nationality && !life_date) return <span/>
return <div className='display-bio'>
{nationAndDates}<br/>
{art.role}
</div>
},
})
module.exports = ArtworkPreview
var DeaccessionedBanner = React.createClass({
render() {
var {art} = this.props
var date = art.deaccessionedDate.split('-')[0]
var reason = art.deaccessionedReason
return <div>
<strong>DEACCESSIONED</strong>
<p>
This artwork was <Link to="/info/deaccessions">deaccessioned</Link>{reason && ` (${reason})`}
{date && <span>in {date}.</span>}
</p>
</div>
},
})
var LoanBanner = React.createClass({
render() {
var {art} = this.props
var date = art.deaccessionedDate
return <div>
<strong>LOAN</strong>
<p>
This artwork was "loaned" to the museum by the owner. It was never owned by Mia. Loans are a common way to share art between museums.
</p>
</div>
},
})