adding texts. start nav

1 files changed, 101 insertions, 0 deletions

diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
new file mode 100644
index 0000000..ebabf51
--- /dev/null
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -0,0 +1,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)