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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import actions from 'site/actions'
import "./artists.css"
import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
import { history } from "site/store"
class Artists extends Component {
state = {
currentIndex: 0,
detail: false,
}
constructor(props) {
super(props)
this.ref = React.createRef()
this.showArtist = this.showArtist.bind(this)
this.previousArtist = this.previousArtist.bind(this)
this.nextArtist = this.nextArtist.bind(this)
this.goHome = this.goHome.bind(this)
this.changeLanguage = this.changeLanguage.bind(this)
}
componentDidMount() {
actions.site.interact()
}
showArtist(currentIndex) {
this.setState({ detail: true, currentIndex })
this.scrollToTop()
}
previousArtist() {
this.go(-1)
}
nextArtist() {
this.go(1)
}
go(step) {
const currentIndex = (this.state.currentIndex + step + ARTIST_ORDER.length) % ARTIST_ORDER.length
this.setState({ currentIndex })
this.scrollToTop()
}
goHome() {
history.push(`/last-museum/home/`)
}
changeLanguage() {
actions.site.changeLanguage(this.props.language === "de" ? "en" : "de")
}
scrollToTop() {
setTimeout(() => {
if (!this.ref.current) return
Array.from(this.ref.current.querySelectorAll(".artist-content")).forEach(el => {
el.scrollTo(0, 0)
})
}, 0)
}
render() {
const { language } = this.props
const { currentIndex, detail } = this.state
return (
<div className="page page-artists">
<div className="artist-list">
<div className="artists-heading">ARTISTS</div>
{ARTIST_ORDER.map((key, index) => {
const artist = ARTISTS[key]
return (
<div key={key} className="artist-big-name" onClick={() => this.showArtist(index)}>
{artist.name}
</div>
)
})}
</div>
<div className={detail ? "artist-gallery visible" : "artist-gallery"}>
{ARTIST_ORDER.map((key, index) => (
<ArtistDetail
artist={ARTISTS[key]}
key={key}
index={index}
isCurrent={detail && currentIndex === index}
language={language}
onClose={() => this.setState({ detail: false })}
/>
))}
<div className="nav-arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
<div className="nav-arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
</div>
<div className={detail ? "home-link" : "home-link"} onClick={this.goHome}>
Home
</div>
<div className={detail ? "home-link language-link" : "home-link language-link"} onClick={this.changeLanguage}>
{language === "de" ? (
<span><b>de</b> / en</span>
) : (
<span>de / <b>en</b></span>
)}
</div>
</div>
)
}
}
const mapStateToProps = state => ({
interactive: state.site.interactive,
language: state.site.language,
})
export default connect(mapStateToProps)(Artists)
const ArtistDetail = ({ artist, index, isCurrent, language, onClose }) => {
return (
<div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
<div className="artist-right" style={{ backgroundImage: `url(${artist.image})`}} />
<div className="artist-content">
<div className="artist-left">
<span dangerouslySetInnerHTML={{ __html: artist.bio[language] }} />
</div>
<Link to={`/last-museum/${artist.start}`} className="artist-right-inner" />
</div>
<div className="artist-detail-name" onClick={onClose}>
{artist.name}
</div>
<div className="artist-location">{artist.location[language]}</div>
</div>
)
}
|
