blob: 070fafda17d3923737f5464bd11ecbfff363c43f (
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
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { mod } from 'app/utils'
import { EfluxClose } from '../nav/eflux.icons'
import { Arrow } from '../nav/viewer.icons'
class VitrineModal extends Component {
render() {
const { open, media, index } = this.props.vitrineModal
if (!media) {
return (
<div className='vitrine-modal'></div>
)
}
const className = open ? 'vitrine-modal open' : 'vitrine-modal'
const id = media.settings.image_order[index]
const image = (media.settings.display_lookup || media.settings.image_lookup)[id]
const caption = media.settings.caption_lookup[id]
return (
<div className={className}>
<div className='vitrine-modal-content'>
<div className='vitrine-image' style={{
backgroundImage: 'url(' + image.url + ')',
}} />
<div className='vitrine-text'>
<div>
{caption.title && <VitrineCaption caption={caption} />}
<div className='vitrine-text-content'>
{caption.long_caption || caption.caption}
</div>
</div>
</div>
</div>
<div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
{EfluxClose}
</div>
<VitrineNavigation media={media} index={index} direction={-1} />
<VitrineNavigation media={media} index={index} direction={+1} />
</div>
)
}
}
const VitrineNavigation = ({ media, index, direction }) => {
const isPrev = direction === -1
const className = isPrev ? 'vitrine-nav prev' : 'vitrine-nav next'
const targetIndex = mod(index + direction, media.settings.image_order.length)
const id = media.settings.image_order[targetIndex]
const thumbnail = media.settings.thumbnail_lookup[id]
return (
<div className={className} onClick={() => actions.viewer.setVitrineIndex(targetIndex)}>
<div className='vitrine-nav-content'>
{isPrev && <Arrow type='left'/>}
{isPrev ? 'Previous' : 'Next'}
{!isPrev && <Arrow type='right'/>}
</div>
<div className='vitrine-nav-thumbnail' style={{ backgroundImage: 'url(' + thumbnail.url + ')' }} />
</div>
)
}
const VitrineCaption = ({ caption }) => {
return (
<div className='vitrine-caption'>
{caption.author && (
<span>{caption.author}</span>
)}
{caption.title && (
<span><br /><i>{caption.title}</i></span>
)}
{caption.date && (
<span><br />{caption.date}</span>
)}
</div>
)
}
const mapStateToProps = state => ({
vitrineModal: state.viewer.vitrineModal,
})
export default connect(mapStateToProps)(VitrineModal)
|
