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
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { EfluxClose } from '../nav/eflux.icons'
import { Arrow } from '../nav/viewer.icons'
import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
class VitrineModal extends Component {
render() {
const { open, media, color, index } = this.props.vitrineModal
if (!media) {
return (
<div className='vitrine-modal'></div>
)
}
// console.log(color)
const className = open ? 'vitrine-modal open' : 'vitrine-modal'
const id = media.settings.image_order[index]
const image = media.settings.display_lookup[id] || 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 + ')',
backgroundColor: color.backgroundColor,
}} />
<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} color={color} direction={-1} />
<VitrineNavigation media={media} index={index} color={CURTAIN_COLOR_LOOKUP.white} direction={+1} />
</div>
)
}
}
const VitrineNavigation = ({ media, color, index, direction }) => {
let id, thumbnail
const isPrev = direction === -1
let className = (isPrev ? 'vitrine-nav prev ' : 'vitrine-nav next ') + color.label
// const targetIndex = mod(index + direction, media.settings.image_order.length)
const targetIndex = index + direction
const shouldClose = (targetIndex < 0) || (targetIndex === media.settings.image_order.length)
if (shouldClose) {
className += ' nav-close'
} else {
id = media.settings.image_order[targetIndex]
thumbnail = media.settings.thumbnail_lookup[id]
}
return (
<div className={className} onClick={() => {
actions.viewer.vitrineGo(direction)
}}>
<div className='vitrine-nav-content'>
{isPrev && <Arrow type='left'/>}
{shouldClose ? 'Close' : isPrev ? 'Previous' : 'Next'}
{!isPrev && <Arrow type='right'/>}
</div>
{!shouldClose && (
<div
className={'vitrine-nav-thumbnail ' + color.label}
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)
|
