From 45cf182c73a6eb019bf7e61cafa3ca117b014ddb Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 13 Aug 2020 20:15:08 +0200
Subject: gallery vs carousel

---
 .../viewer/player/components.utility/index.js      |  5 +++
 .../player/components.utility/media.carousel.js    | 36 +++++++++++++++
 .../viewer/player/components.utility/media.css     | 51 +++++++++++++++++++---
 .../player/components.utility/media.gallery.js     | 35 ++++++---------
 4 files changed, 99 insertions(+), 28 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js

(limited to 'animism-align/frontend/app/views/viewer/player/components.utility')

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
index c3ef614..c4ac419 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/index.js
@@ -12,8 +12,13 @@ import {
   Gallery
 } from './media.gallery'
 
+import {
+  Carousel
+} from './media.carousel'
+
 export {
   MediaCitation,
   Vitrine,
   Gallery,
+  Carousel,
 }
\ 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
new file mode 100644
index 0000000..cfd1e48
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.carousel.js
@@ -0,0 +1,36 @@
+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.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
index 624e493..6ad5d0a 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -1,13 +1,9 @@
-/* gallery */
+/* carousel */
 
-.gallery {
-}
-.keen-slider {
-}
-.gallery-container {
+.carousel-container {
   padding: 1rem;
 }
-.gallery-item {
+.carousel-item {
   height: calc(100vh - 9rem);
   width: 50vw;
   background-size: contain;
@@ -15,6 +11,47 @@
   background-repeat: no-repeat;
 }
 
+/* gallery */
+
+.gallery-container {
+  overflow-x: scroll;
+  width: 100%;
+  padding: 1rem;
+}
+.gallery-scroll {
+  display: flex;
+  flex-direction: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.gallery-item {
+  height: 25rem;
+  max-height: 90vh;
+  padding-right: 1rem;
+}
+.gallery-item img {
+  height: 100%;
+}
+
+.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;
+}
+
+
 /* vitrine */
 
 .vitrine .heading {
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
index d92f360..0d08c11 100644
--- 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
@@ -1,36 +1,29 @@
 import React, { Component } from 'react'
-import { useKeenSlider } from "keen-slider/react"
-import "keen-slider/keen-slider.min.css"
 
 export const Gallery = ({ 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(display_lookup)
   // console.log(width)
   return (
-    <div ref={sliderRef} className='keen-slider gallery-items'>
-      {image_order.map(id => {
-        const image = display_lookup[id]
-        console.log(image)
-        return (
-          <GalleryItem key={id} image={image} />
-        )
-      })}
+    <div className='gallery-items'>
+      <div className='gallery-scroll'>
+        {image_order.map(id => {
+          const image = display_lookup[id]
+          // console.log(image)
+          return (
+            <GalleryItem key={id} image={image} />
+          )
+        })}
+      </div>
     </div>
   )
 }
 
 const GalleryItem = ({ image }) => {
   return (
-    <div className='keen-slider__slide gallery-item' style={{
-      backgroundImage: 'url(' + image.url + ')',
-    }} />
+    <div className='gallery-item'>
+      <img src={image.url} />
+    </div>
   )
 }
-- 
cgit v1.2.3-70-g09d2