blob: ebabf514eac411b9928629e767fe2a694c69c022 (
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
99
100
101
|
/**
* Navigation for Petros Moris "Oracle"
*/
import React, { Component } from 'react'
import { connect } from 'react-redux'
import './petros.nav.css'
import { history } from "site/store"
import { preloadImage } from 'app/utils'
const RESET_STATE = {
}
const LOADING_TIMEOUT = 15000
const ADVANCE_TIMEOUT = 40000
class PetrosNav extends Component {
state = {
...RESET_STATE
}
constructor(props) {
super(props)
this.handleEnter = this.handleEnter.bind(this)
this.handleLeave = this.handleLeave.bind(this)
}
componentDidMount() {
if (this.props.interactive) {
this.load()
}
}
componentDidUpdate(prevProps) {
if (
(this.props.interactive && this.props.interactive !== prevProps.interactive)
|| this.props.location.pathname !== prevProps.location.pathname
) {
this.load(prevProps.match && prevProps.match.params)
}
}
load(lastParams) {
const { page_name } = this.props.match.params
const page_partz = page_name.split("-")
const isPetros = page_partz[0] === 'petros'
const index = parseInt(page_partz[1])
if (!isPetros) {
clearTimeout(this.autoadvanceTimeout)
clearTimeout(this.timeout)
this.setState({
...RESET_STATE,
})
return
}
preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`)
preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`)
preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/NavBW${index}.png`)
preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/NavB${index}.png`)
this.setState({
...RESET_STATE,
index
})
}
handleEnter(event) {
const side = event.target.className.split('-')
this.setState({ hovering: side })
}
handleLeave(event) {
this.setState({ hovering: side })
}
handleClickText() {
}
navigate() {
// history.push(`/thelastmuseum/nilthamrong-${this.state.lateralLink}`)
}
render() {
const { index } = this.state
if (!this.props.interactive || (!index)) return null
return (
<div>
<img className="petros-text" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.handleClickText} />
<img className="petros-left" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} />
<img className="petros-right" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} />
</div>
)
}
}
const mapStateToProps = state => ({
interactive: state.site.interactive,
popups: state.site.popups,
})
export default connect(mapStateToProps)(PetrosNav)
|
