1 files changed, 79 insertions, 0 deletions
diff --git a/frontend/site/projects/museum/views/text.overlay.js b/frontend/site/projects/museum/views/text.overlay.js
new file mode 100644
index 0000000..65fc3b2
--- /dev/null
+++ b/frontend/site/projects/museum/views/text.overlay.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { TEXT_OVERLAYS, DEFAULT_ICON } from '../text-overlays.js'
+
+import './overlay.css'
+
+class TextOverlay extends Component {
+  state = {
+    open: false,
+    content: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.toggle = this.toggle.bind(this)
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname)
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { page_name } = this.props.match.params
+    if (TEXT_OVERLAYS[page_name]) {
+      this.setState({
+        content: TEXT_OVERLAYS[page_name],
+        open: false,
+      })
+    } else {
+      this.setState({
+        content: null,
+        open: false,
+      })
+    }
+  }
+
+  toggle() {
+    this.setState({ open: !this.state.open })
+  }
+
+  render() {
+    const { open, content } = this.state
+    if (!this.props.interactive || !content) return null
+    if (!open) {
+      return (
+        <div
+          className="text-overlay-icon"
+          style={content.style}
+          onClick={this.toggle}
+        >
+          <img src={content.icon || DEFAULT_ICON} />
+        </div>
+      )
+    }
+
+    return (
+      <div
+        className="text-overlay"
+        style={content.style}
+        onClick={this.toggle}
+        dangerouslySetInnerHTML={{ __html: content.text }}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  interactive: state.site.interactive,
+})
+
+export default connect(mapStateToProps)(TextOverlay)