From 4f490f77a615b1c816cbeb8b42bbfee2345a8d11 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 9 Sep 2021 16:29:25 +0200 Subject: adding a little fade i guess --- frontend/site/projects/museum/views/petros.nav.css | 2 +- frontend/site/projects/museum/views/petros.nav.js | 56 ++++++++++++++-------- frontend/site/projects/museum/views/petros.text.js | 10 ++-- frontend/site/viewer/viewer.container.js | 4 +- 4 files changed, 44 insertions(+), 28 deletions(-) (limited to 'frontend/site') 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 && ( - + )} @@ -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() { diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js index a3c8085..dd59302 100644 --- a/frontend/site/viewer/viewer.container.js +++ b/frontend/site/viewer/viewer.container.js @@ -77,8 +77,8 @@ class ViewerContainer extends Component { } const page = pages[page_path] document.querySelector("title").innerText = page.title - console.log(page) - console.log("show page", page.id) + // console.log(page) + // console.log("show page", page.id) // page !== pages[home_page] && if (!this.props.interactive && hasAutoplay(page)) { this.setState({ page, hidden: {}, roadblock: true, unloaded: false }) -- cgit v1.2.3-70-g09d2