diff options
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 } |