vitrine modal

1 files changed, 22 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
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'>