vitrine modal

5 files changed, 99 insertions, 1 deletions

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index ae27685..ab1e6e9 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -27,7 +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',
+  'open_vitrine_modal', 'close_vitrine_modal', 'set_vitrine_index',
 ])
 
 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
index 370e588..be32184 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.css
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -31,6 +31,7 @@
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
+  background-color: #eee;
 }
 .vitrine-modal .vitrine-text {
   background: white;
@@ -64,3 +65,65 @@
 .vitrine-modal .vitrine-close svg line {
   stroke: #000;
 }
+
+/* vitrine prev/next buttons */
+
+.vitrine-nav {
+  position: absolute;
+  bottom: 0;
+  transition: 0.1s transform;
+  transform: translateZ(0) translateY(9rem);
+  cursor: pointer;
+  color: #000;
+  font-size: 18px;
+}
+.vitrine-nav:hover {
+  transform: translateZ(0) translateY(0);
+}
+.vitrine-nav.prev {
+  left: 0;
+}
+.vitrine-nav.next {
+  right: 0;
+}
+.vitrine-nav .vitrine-nav-content {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+  height: 3rem;
+}
+.vitrine-nav.prev .vitrine-nav-content {
+  align-items: center;
+  justify-content: flex-start;
+}
+.vitrine-nav.next .vitrine-nav-content {
+  align-items: center;
+  justify-content: flex-end;
+}
+.vitrine-nav .vitrine-nav-thumbnail {
+  width: 12rem;
+  height: 8rem;
+  margin: 0.5rem;
+  border-radius: 1rem;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: #eee;
+}
+.vitrine-nav .arrow {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.vitrine-nav .arrow.left,
+.vitrine-nav .arrow.right {
+  width: 1.25rem;
+}
+.vitrine-nav .arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
index 88b785c..070fafd 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -3,7 +3,9 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
+import { mod } from 'app/utils'
 import { EfluxClose } from '../nav/eflux.icons'
+import { Arrow } from '../nav/viewer.icons'
 
 class VitrineModal extends Component {
   render() {
@@ -35,11 +37,31 @@ class VitrineModal extends Component {
         <div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
           {EfluxClose}
         </div>
+        <VitrineNavigation media={media} index={index} direction={-1} />
+        <VitrineNavigation media={media} index={index} direction={+1} />
       </div>
     )
   }
 }
 
+const VitrineNavigation = ({ media, index, direction }) => {
+  const isPrev = direction === -1
+  const className = isPrev ? 'vitrine-nav prev' : 'vitrine-nav next'
+  const targetIndex = mod(index + direction, media.settings.image_order.length)
+  const id = media.settings.image_order[targetIndex]
+  const thumbnail = media.settings.thumbnail_lookup[id]
+  return (
+    <div className={className} onClick={() => actions.viewer.setVitrineIndex(targetIndex)}>
+      <div className='vitrine-nav-content'>
+        {isPrev && <Arrow type='left'/>}
+        {isPrev ? 'Previous' : 'Next'}
+        {!isPrev && <Arrow type='right'/>}
+      </div>
+      <div className='vitrine-nav-thumbnail' style={{ backgroundImage: 'url(' + thumbnail.url + ')' }} />
+    </div>
+  )
+}
+
 const VitrineCaption = ({ caption }) => {
   return (
     <div className='vitrine-caption'>
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index bc0a3a8..3a25519 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -197,3 +197,6 @@ export const openVitrineModal = (media, id) => dispatch => {
 export const closeVitrineModal = (media, id) => dispatch => {
   dispatch({ type: types.viewer.close_vitrine_modal })
 }
+export const setVitrineIndex = (index) => dispatch => {
+  dispatch({ type: types.viewer.set_vitrine_index, index })
+}
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 693c764..daf9bba 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -61,10 +61,20 @@ export default function viewerReducer(state = initialState, action) {
       return {
         ...state,
         vitrineModal: {
+          ...state.vitrineModal,
           open: false,
         }
       }
 
+    case types.viewer.set_vitrine_index:
+      return {
+        ...state,
+        vitrineModal: {
+          ...state.vitrineModal,
+          index: action.index,        
+        }
+      }
+
     default:
       return state
   }