1 files changed, 63 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
new file mode 100644
index 0000000..88b785c
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { EfluxClose } from '../nav/eflux.icons'
+
+class VitrineModal extends Component {
+  render() {
+    const { open, media, index } = this.props.vitrineModal
+    if (!media) {
+      return (
+        <div className='vitrine-modal'></div>
+      )
+    }
+    const className = open ? 'vitrine-modal open' : 'vitrine-modal'
+    const id = media.settings.image_order[index]
+    const image = (media.settings.display_lookup || media.settings.image_lookup)[id]
+    const caption = media.settings.caption_lookup[id]
+    return (
+      <div className={className}>
+        <div className='vitrine-modal-content'>
+          <div className='vitrine-image' style={{
+            backgroundImage: 'url(' + image.url + ')',
+          }} />
+          <div className='vitrine-text'>
+            <div>
+              {caption.title && <VitrineCaption caption={caption} />}
+              <div className='vitrine-text-content'>
+                {caption.long_caption || caption.caption}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
+          {EfluxClose}
+        </div>
+      </div>
+    )
+  }
+}
+
+const VitrineCaption = ({ caption }) => {
+  return (
+    <div className='vitrine-caption'>
+      {caption.author && (
+        <span>{caption.author}</span>
+      )}
+      {caption.title && (
+        <span><br /><i>{caption.title}</i></span>
+      )}
+      {caption.date && (
+        <span><br />{caption.date}</span>
+      )}
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+  vitrineModal: state.viewer.vitrineModal,
+})
+
+export default connect(mapStateToProps)(VitrineModal)