vitrine modal

7 files changed, 0 insertions, 374 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/index.js b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
deleted file mode 100644
index 4fcf649..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import {
-  MediaCitation
-} from './media.citation'
-
-import {
-  Vitrine
-} from './media.vitrine'
-
-import {
-  Gallery
-} from './media.gallery'
-
-import {
-  Carousel
-} from './media.carousel'
-
-import {
-  Grid
-} from './media.grid'
-
-export {
-  MediaCitation,
-  Vitrine,
-  Gallery,
-  Carousel,
-  Grid,
-}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
deleted file mode 100644
index cfd1e48..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import { useKeenSlider } from "keen-slider/react"
-import "keen-slider/keen-slider.min.css"
-
-export const Carousel = ({ media }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
-
-  const [sliderRef] = useKeenSlider({
-    slidesPerView: 2,
-    mode: "free-snap",
-    spacing: 15,
-    centered: true,
-    loop: false
-  });
-  // console.log(display_lookup)
-  // console.log(width)
-  return (
-    <div ref={sliderRef} className='keen-slider carousel-items'>
-      {image_order.map(id => {
-        const image = display_lookup[id]
-        console.log(image)
-        return (
-          <CarouselItem key={id} image={image} />
-        )
-      })}
-    </div>
-  )
-}
-
-const CarouselItem = ({ image }) => {
-  return (
-    <div className='keen-slider__slide carousel-item' style={{
-      backgroundImage: 'url(' + image.url + ')',
-    }} />
-  )
-}
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
deleted file mode 100644
index 14c8c53..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.citation.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-
-export const MediaCitation = ({ media }) => {
-  if (media.settings.bibliography) {
-    return (
-      <div className='citation' dangerouslySetInnerHTML={{ __html: media.settings.bibliography }} />
-    )
-  }
-  return (
-    <div className='citation'>
-      {media.author}
-      {', '}
-      {media.pre_title && (
-        media.pre_title + ' '
-      )}
-      <i>{media.title}</i>
-      {media.post_title && (
-        ' ' + media.post_title
-      )}
-      {'. '}
-      {media.date && (
-        ' ' + media.date + '.'
-      )}
-      {media.medium && (
-        ' ' + media.medium + '.'
-      )}
-      {media.source && (
-        ' ' + media.source.trim()
-      )}
-    </div>
-  )
-}
-
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
deleted file mode 100644
index 62eb9af..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ /dev/null
@@ -1,157 +0,0 @@
-/* carousel */
-
-.carousel-container {
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-}
-.carousel-item {
-  height: calc(100vh - 9rem);
-  width: 50vw;
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat;
-}
-
-/* gallery */
-
-.gallery-container {
-  overflow-x: scroll;
-  width: 100%;
-  padding: 1rem 1rem 0.5rem 1rem;
-  margin-bottom: 1.5rem;
-}
-.gallery-scroll {
-  display: flex;
-  flex-direction: row nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.gallery-item {
-  padding-right: 1rem;
-}
-.gallery-image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 25rem;
-}
-.gallery-image img {
-  display: block;
-  max-height: 25rem;
-}
-.gallery-caption {
-  margin-top: 0.5rem;
-  color: #888;
-}
-
-.gallery-container::-webkit-scrollbar {
-  cursor: pointer;
-  user-select: none;
-  height: 4px
-}
-.gallery-container::-webkit-scrollbar-button {
-  display: block;
-  width: 0;
-  height: 0;
-}
-.gallery-container::-webkit-scrollbar-track-piece {
-  background:rgba(211,211,211,0.8);
-}
-.gallery-container::-webkit-scrollbar-thumb {
-  display: block;
-  background: #000;
-}
-
-/* grid */
-
-.grid-container {
-  margin: 0 auto 1.5rem auto;
-  width: 45rem;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.grid-item {
-  width: 22rem;
-  margin-bottom: 0.5rem;
-}
-.grid-item:nth-child(odd) {
-  margin-right: 1rem;
-}
-.grid-item img {
-  display: block;
-  width: 22rem;
-}
-.grid-caption {
-  margin-top: 0.5rem;
-  color: #888;
-}
-
-/* vitrine */
-
-.vitrine .heading {
-  font-family: "Freight Text", serif;
-  font-size: 3rem;
-  line-height: 1.28;
-  width: 80%;
-  margin: 0 auto;
-  padding-bottom: 2rem;
-  text-align: center;
-}
-.vitrine .citation {
-  width: 45rem;
-  margin: 0 auto;
-  padding: 1rem 0;
-  font-family: "Neue Haas Unica";
-  color: #888;
-}
-.vitrine-items {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 1rem;
-}
-.vitrine-items .vitrine-item {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: space-between;
-  height: calc(45vh - 6rem);
-}
-.vitrine-items .vitrine-item .vitrine-image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 80%;
-  cursor: pointer;
-}
-.vitrine-items .vitrine-item .vitrine-image img {
-  max-width: 100%;
-  max-height: 100%;
-  pointer-events: none;
-}
-.vitrine-items .vitrine-item .zoomPlus {
-  cursor: pointer;  
-}
-.vitrine-items .vitrine-item:hover .zoomPlus .cross {
-  stroke: #000;
-  stroke-width: 0.5;
-}
-.vitrine-items .vitrine-item:hover .zoomPlus .ring {
-  fill: #fff;
-}
-.vitrine-items .vitrine-item .zoomPlus .ring-inner {
-  stroke: transparent;
-  fill: transparent;
-}
-.vitrine-items .vitrine-item:hover .zoomPlus .ring-inner {
-  fill: #fff;
-  stroke: #fff;
-}
-.inline-element.vitrine .heading {
-  padding-top: 8rem;
-}
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
deleted file mode 100644
index da83c4f..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react'
-
-import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-
-export const Gallery = ({ media, annotation }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
-  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-  const style = {
-    backgroundColor: color.backgroundColor,
-    // color: color.textColor,
-  }
-
-  // console.log(display_lookup)
-  // console.log(width)
-  return (
-    <div style={style} className='gallery-container'>
-      <div className='gallery-items'>
-        <div className='gallery-scroll'>
-          {image_order.map(id => {
-            const image = display_lookup[id]
-            const caption = (caption_lookup && caption_lookup[id]) || {}
-            // console.log(image)
-            return (
-              <GalleryItem key={id} image={image} caption={caption} />
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const GalleryItem = ({ image, caption }) => {
-  // console.log(image)
-  return (
-    <div className='gallery-item'>
-      <div className='gallery-image'>
-        <img src={image.url} />
-      </div>
-      {caption.caption && (
-        <div className='gallery-caption'>
-          {caption.caption}
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
deleted file mode 100644
index 93b8696..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.grid.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { Component } from 'react'
-
-import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-
-export const Grid = ({ media, annotation }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
-  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-  const style = {
-    // backgroundColor: color.backgroundColor,
-    // color: color.textColor,
-  }
-  // console.log(display_lookup)
-  // console.log(width)
-  return (
-    <div style={style} className='grid-container'>
-      {image_order.map(id => {
-        const image = display_lookup[id]
-        const caption = (caption_lookup && caption_lookup[id]) || {}
-        // console.log(image)
-        return (
-          <GridItem key={id} image={image} caption={caption} />
-        )
-      })}
-    </div>
-  )
-}
-
-const GridItem = ({ image, caption }) => {
-  // console.log(image)
-  return (
-    <div className='grid-item'>
-      <div className='grid-image'>
-        <img src={image.url} />
-      </div>
-      {caption.caption && (
-        <div className='grid-caption'>
-          {caption.caption}
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
deleted file mode 100644
index b2c7944..0000000
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.vitrine.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { Component } from 'react'
-
-import { ZoomPlus } from '../../nav/viewer.icons.js'
-
-export const Vitrine = ({ media }) => {
-  const { image_order, image_lookup, thumbnail_lookup } = media.settings
-  const width = (Math.floor(100 / image_order.length * 2) - 2) + 'vw'
-  // console.log(width)
-  return (
-    <div className='vitrine-items'>
-      {image_order.map(id => {
-        const thumbnail = thumbnail_lookup[id]
-        return (
-          <VitrineItem key={id} image={thumbnail} width={width} />
-        )
-      })}
-    </div>
-  )
-}
-
-const VitrineItem = ({ image, width }) => {
-  return (
-    <div className='vitrine-item' style={{ width }}>
-      <div className='vitrine-image'>
-        <img src={image.url} />
-      </div>
-      {ZoomPlus}
-    </div>
-  )
-}