words fade in component

1 files changed, 57 insertions, 0 deletions

diff --git a/frontend/site/projects/museum/views/petros.text.js b/frontend/site/projects/museum/views/petros.text.js
new file mode 100644
index 0000000..96f5565
--- /dev/null
+++ b/frontend/site/projects/museum/views/petros.text.js
@@ -0,0 +1,57 @@
+/**
+ * Text special effect for Petros where each word fades in
+ */
+
+import React, { Component } from 'react'
+
+export class PetrosText extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { index: 0, words: [] }
+    this.next = this.next.bind(this)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.ready && !prevProps.ready) {
+      this.start()      
+    } else {
+      clearTimeout(this.timeout)
+    }
+  }
+
+  componentDidUnmount() {
+    clearTimeout(this.timeout)
+  }
+
+  start() {
+    const { perWord, text } = this.props
+    this.setState({
+      words: this.props.text.trim().split(" "),
+      index: -1
+    })
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(this.next, perWord)
+  }
+  
+  next() {
+    const { timePerWord, onComplete } = this.props
+    const { index, words } = this.state
+    if (index < words.length) {
+      this.timeout = setTimeout(this.next, timePerWord)
+      this.setState({ index: index + 1 })
+    } else {
+      onComplete()
+    }
+  }
+
+  render() {
+    const { index, words } = this.state
+    return (
+      <div className="fade-words">
+        {words.map((word, i) => (
+          <span key={i} className={i <= index ? "visible" : ""}>{word}</span>
+        ))}
+      </div>
+    )
+  }
+}