vitrine modal

18 files changed, 181 insertions, 8 deletions

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 6822d20..ae27685 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -27,6 +27,7 @@ export const audio = with_type('audio', [
 export const viewer = with_type('viewer', [
   'load_sections', 'toggle_component',
   'set_current_section', 'set_nav_style',
+  'open_vitrine_modal', 'close_vitrine_modal',
 ])
 
 export const site = with_type('site', [
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css
new file mode 100644
index 0000000..370e588
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -0,0 +1,66 @@
+/* vitrine modal */
+
+.vitrine-modal {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 20;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  background: white;
+}
+.vitrine-modal.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.vitrine-modal .vitrine-modal-content {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+}
+.vitrine-modal .vitrine-modal-content > div {
+  width: 50%;
+  height: 100%;
+}
+.vitrine-modal .vitrine-image {
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.vitrine-modal .vitrine-text {
+  background: white;
+  color: black;
+  font-family: "Freight Text", serif;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.vitrine-modal .vitrine-text > div {
+  max-width: 45vw;
+  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
+}
+.vitrine-modal .vitrine-text-content {
+  white-space: pre-wrap;
+}
+.vitrine-modal .vitrine-caption {
+  margin-bottom: 1.5rem;
+}
+.vitrine-modal .vitrine-close {
+  position: absolute;
+  top: 23px;
+  right: 32px;
+}
+.vitrine-modal .vitrine-close svg {
+  cursor: pointer;
+  width: 26px;
+  height: 20px;
+}
+.vitrine-modal .vitrine-close svg line {
+  stroke: #000;
+}
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)
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
index 58bcfaa..0549f09 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { MediaCitation, Vitrine } from '../components.utility'
+import { MediaCitation, Vitrine } from '../components.media'
 
 export const FullscreenVitrine = ({ element, media, transitionDuration }) => {
   const { color } = element
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 0086372..d2a460c 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.utility'
+import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.media'
 
 export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 0e2d205..176d661 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { MediaCitation } from '../components.utility'
+import { MediaCitation } from '../components.media'
 
 export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index e34bfa6..179c50d 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import VimeoPlayer from '@u-wave/react-vimeo'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { MediaCitation } from '../components.utility'
+import { MediaCitation } from '../components.media'
 
 export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/index.js b/animism-align/frontend/app/views/viewer/player/components.media/index.js
index 4fcf649..4fcf649 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/index.js
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
index cfd1e48..cfd1e48 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js b/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js
index 14c8c53..14c8c53 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.citation.js
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 62eb9af..62eb9af 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js
index da83c4f..da83c4f 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.gallery.js
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js b/animism-align/frontend/app/views/viewer/player/components.media/media.grid.js
index 93b8696..93b8696 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.grid.js
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
index b2c7944..2033465 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 
 import { ZoomPlus } from '../../nav/viewer.icons.js'
 
+import actions from 'app/actions'
+
 export const Vitrine = ({ media }) => {
   const { image_order, image_lookup, thumbnail_lookup } = media.settings
   const width = (Math.floor(100 / image_order.length * 2) - 2) + 'vw'
@@ -11,16 +13,22 @@ export const Vitrine = ({ media }) => {
       {image_order.map(id => {
         const thumbnail = thumbnail_lookup[id]
         return (
-          <VitrineItem key={id} image={thumbnail} width={width} />
+          <VitrineItem
+            key={id}
+            media={media}
+            id={id}
+            image={thumbnail}
+            width={width}
+          />
         )
       })}
     </div>
   )
 }
 
-const VitrineItem = ({ image, width }) => {
+const VitrineItem = ({ media, id, image, width }) => {
   return (
-    <div className='vitrine-item' style={{ width }}>
+    <div className='vitrine-item' style={{ width }} onClick={() => actions.viewer.openVitrineModal(media, id)}>
       <div className='vitrine-image'>
         <img src={image.url} />
       </div>
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 69abda2..d771424 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -168,7 +168,7 @@
   color: white;
   font-family: "Freight Text", serif;
   font-size: 12vh;
-  line-height: 1.3;
+  line-height: 1.25;
   text-align: center;
 }
 .site-intro .inner span {
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 6efe644..bc0a3a8 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -188,3 +188,12 @@ export const seekToMediaItem = mediaItem => dispatch => {
   actions.viewer.hideComponent('nav')
   actions.viewer.hideComponent('checklist')
 }
+
+export const openVitrineModal = (media, id) => dispatch => {
+  console.log(media)
+  const index = media.settings.image_order.indexOf(id)
+  dispatch({ type: types.viewer.open_vitrine_modal, media, index })
+}
+export const closeVitrineModal = (media, id) => dispatch => {
+  dispatch({ type: types.viewer.close_vitrine_modal })
+}
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index d59259f..b207f4a 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -10,6 +10,7 @@ import './nav/eflux.css'
 import './sections/sections.css'
 import './transcript/transcript.css'
 import './checklist/checklist.css'
+import './modals/modals.css'
 import './player/player.container.css'
 import './player/player.fullscreen.css'
 import './player/player.transcript.css'
@@ -25,6 +26,7 @@ import EfluxChrome from './nav/eflux.chrome'
 import Player from './player/player.container'
 import Transcript from './transcript/transcript.container'
 import Checklist from './checklist/checklist.container'
+import VitrineModal from './modals/modals.vitrine'
 
 class ViewerContainer extends Component {
   constructor(props) {
@@ -83,6 +85,7 @@ class ViewerContainer extends Component {
             <Checklist />
             <Route exact path='/viewer/:component/' component={ViewerRouter} />
           </div>
+          <VitrineModal />
         </div>
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 5ebe657..693c764 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -9,6 +9,11 @@ const initialState = {
   currentSection: null,
   nextSection: null,
   navStyle: 'white',
+  vitrineModal: {
+    open: false,
+    media: null,
+    index: null,
+  },
   options: {
   }
 }
@@ -42,6 +47,24 @@ export default function viewerReducer(state = initialState, action) {
         navStyle: action.color,
       }
 
+    case types.viewer.open_vitrine_modal:
+      return {
+        ...state,
+        vitrineModal: {
+          open: true,
+          media: action.media,
+          index: action.index,
+        }
+      }
+
+    case types.viewer.close_vitrine_modal:
+      return {
+        ...state,
+        vitrineModal: {
+          open: false,
+        }
+      }
+
     default:
       return state
   }