diff options
Diffstat (limited to 'frontend/site/projects/museum/views')
| -rw-r--r-- | frontend/site/projects/museum/views/petros.nav.css | 2 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/petros.nav.js | 56 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/petros.text.js | 10 |
3 files changed, 42 insertions, 26 deletions
diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css index 6720f5f..802e26e 100644 --- a/frontend/site/projects/museum/views/petros.nav.css +++ b/frontend/site/projects/museum/views/petros.nav.css @@ -51,7 +51,7 @@ .fade-words span { opacity: 0; - transition: opacity 0.2s; + transition: opacity 0.25s; } .fade-words span:after { content: ' '; diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js index fda1bb8..d7236ac 100644 --- a/frontend/site/projects/museum/views/petros.nav.js +++ b/frontend/site/projects/museum/views/petros.nav.js @@ -52,10 +52,10 @@ const INITIAL_VIEW = { const FASTFORWARD = 0.1 const LOOP_TIMEOUT = 6000 * FASTFORWARD -const MOVEMENT_TIMEOUT = 40000 * FASTFORWARD +const MOVEMENT_TIMEOUT = 40500 * FASTFORWARD const TEXT_LOAD_TIMEOUT = 15000 * FASTFORWARD -const TEXT_SHOW_TIMEOUT = 20 -const TEXT_HIDE_TIMEOUT = 15000 *FASTFORWARD +const SHOW_NAV_TIMEOUT = 10000 * FASTFORWARD +const TEXT_HIDE_TIMEOUT = 20000 * FASTFORWARD const SUBTITLE_COUNT = 12 @@ -72,7 +72,7 @@ class PetrosNav extends Component { this.handleEnter = this.handleEnter.bind(this) this.handleLeave = this.handleLeave.bind(this) this.handleClickText = this.handleClickText.bind(this) - this.textComplete = this.textComplete.bind(this) + this.handleTextComplete = this.handleTextComplete.bind(this) this.navigate = this.navigate.bind(this) } @@ -157,6 +157,7 @@ class PetrosNav extends Component { if (this.state.textActive || this.state.text) return this.setState({ textActive: true, + textDone: false, hovering: false, textOpacity: 0.0, text: null @@ -180,28 +181,40 @@ class PetrosNav extends Component { .then(text => this.setState({ text: text.trim() })) this.textTimeout = setTimeout(() => { - this.setState({ - textActive: false, - textDone: true, - textOpacity: 0.0, - }) - // Turn off the glyph actions.site.setPopups({ ...this.props.popups, glyph: false, }) - this.textTimeout = setTimeout(() => { - this.setState({ textOpacity: 1.0, iconFade: true }) - this.textTimeout = setTimeout(() => { - this.setState({ textOpacity: 0.0 }) - }, TEXT_HIDE_TIMEOUT) - }, TEXT_SHOW_TIMEOUT) + // Prep the text component + this.setState({ + textActive: false, + textDone: true, + }) + // Start displaying the words after a brief delay + this.textTimeout = setTimeout(() => { + this.setState({ + textActive: false, + textOpacity: 1.0, + }) + }, 200) }, TEXT_LOAD_TIMEOUT) } + /** Called once the text is done displaying */ + handleTextComplete() { + this.textTimeout = setTimeout(() => { + // After a delay, show the nav buttons + this.setState({ iconFade: true }) + // After a longer delay, hide the text + this.textTimeout = setTimeout(() => { + this.setState({ textOpacity: 0.0 }) + }, TEXT_HIDE_TIMEOUT) + }, SHOW_NAV_TIMEOUT) + } + /** Navigate using the links at the bottom */ navigate() { const { index, textActive } = this.state @@ -222,7 +235,11 @@ class PetrosNav extends Component { ...this.props.popups, movement: true, }) - this.setState({ ready: false, iconFade: false, textOpacity: 0 }) + this.setState({ + ready: false, + iconFade: false, + textOpacity: 0.0, + }) clearTimeout(this.textTimeout) } else { // otherwise, just advance immediately. @@ -258,7 +275,7 @@ class PetrosNav extends Component { {ready && ( <img className={(textDone && iconFade) ? "petros-left visible" : "petros-left"} - src={(hovering === "left" || textActive || index === leftIndex) + src={(hovering === "left" || textActive || index === 1) ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png` : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png` } @@ -281,7 +298,7 @@ class PetrosNav extends Component { )} {!textActive && text && ( <div className="petros-subtitle" style={{ opacity: textOpacity }}> - <PetrosText ready={textOpacity} text={text} timePerWord={TIME_PER_WORD} onComplete={this.textComplete} /> + <PetrosText ready={!!textOpacity} text={text} timePerWord={TIME_PER_WORD} onComplete={this.handleTextComplete} /> </div> )} </div> @@ -289,7 +306,6 @@ class PetrosNav extends Component { } } - const randint = n => Math.floor(Math.random() * n) const mapStateToProps = state => ({ diff --git a/frontend/site/projects/museum/views/petros.text.js b/frontend/site/projects/museum/views/petros.text.js index 96f5565..e28eb7a 100644 --- a/frontend/site/projects/museum/views/petros.text.js +++ b/frontend/site/projects/museum/views/petros.text.js @@ -4,17 +4,17 @@ import React, { Component } from 'react' -export class PetrosText extends Component { +export default class PetrosText extends Component { constructor(props) { super(props) - this.state = { index: 0, words: [] } + this.state = { index: -1, words: [] } this.next = this.next.bind(this) } componentDidUpdate(prevProps) { if (this.props.ready && !prevProps.ready) { this.start() - } else { + } else if (!this.props.ready) { clearTimeout(this.timeout) } } @@ -24,13 +24,13 @@ export class PetrosText extends Component { } start() { - const { perWord, text } = this.props + const { timePerWord, text } = this.props this.setState({ words: this.props.text.trim().split(" "), index: -1 }) clearTimeout(this.timeout) - this.timeout = setTimeout(this.next, perWord) + this.timeout = setTimeout(this.next, timePerWord) } next() { |