diff --git a/src/components/modals/main/marketplace/EmblaCarouselButtons.jsx b/src/components/modals/main/marketplace/EmblaCarouselButtons.jsx new file mode 100644 index 00000000..e78f90e2 --- /dev/null +++ b/src/components/modals/main/marketplace/EmblaCarouselButtons.jsx @@ -0,0 +1,25 @@ +import React from "react"; + +export const PrevButton = ({ enabled, onClick }) => ( + +); + +export const NextButton = ({ enabled, onClick }) => ( + +); diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx index 684b7f0c..2cc0aa45 100644 --- a/src/components/modals/main/marketplace/Item.jsx +++ b/src/components/modals/main/marketplace/Item.jsx @@ -163,9 +163,9 @@ export default class Item extends PureComponent { {getMessage('modals.main.marketplace.product.description')} + {/* {this.props.data.description.length > 100 ? (
this.toggleShowMore()}> {this.state.showMore === true ? ( @@ -180,7 +180,7 @@ export default class Item extends PureComponent { )}
- ) : null} + ) : null}*/}
diff --git a/src/components/modals/main/marketplace/imageCarousel.jsx b/src/components/modals/main/marketplace/imageCarousel.jsx index 38ffd5cd..d0480bd1 100644 --- a/src/components/modals/main/marketplace/imageCarousel.jsx +++ b/src/components/modals/main/marketplace/imageCarousel.jsx @@ -1,19 +1,66 @@ -import React, { useEffect } from 'react'; -import useEmblaCarousel from 'embla-carousel-react'; -import Autoplay from 'embla-carousel-autoplay'; +import React, { useState, useEffect, useCallback, useRef } from "react"; +import { PrevButton, NextButton } from "./EmblaCarouselButtons"; +import useEmblaCarousel from "embla-carousel-react"; +import Autoplay from "embla-carousel-autoplay"; +import { FaPhotoVideo } from "react-icons/fa"; -export default function EmbaleCarousel({ data }) { - const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]); +const EmblaCarousel = ({ data, options = { loop: false } }) => { + const autoplay = useRef( + Autoplay( + { delay: 3000, stopOnInteraction: false }, + (emblaRoot) => emblaRoot.parentElement + ) + ); + + const [emblaRef, emblaApi] = useEmblaCarousel(options, [autoplay.current]); + const [prevBtnEnabled, setPrevBtnEnabled] = useState(false); + const [nextBtnEnabled, setNextBtnEnabled] = useState(false); + + const scrollNext = useCallback(() => { + if (!emblaApi) return; + emblaApi.scrollNext(); + autoplay.current.reset(); + }, [emblaApi]); + + const scrollPrev = useCallback(() => { + if (!emblaApi) return; + emblaApi.scrollPrev(); + autoplay.current.reset(); + }, [emblaApi]); + + const onSelect = useCallback(() => { + if (!emblaApi) return; + setPrevBtnEnabled(emblaApi.canScrollPrev()); + setNextBtnEnabled(emblaApi.canScrollNext()); + }, [emblaApi]); + + useEffect(() => { + if (!emblaApi) return; + onSelect(); + emblaApi.on("select", onSelect); + }, [emblaApi, onSelect]); return ( -
-
- {data.map((photo, index) => ( -
- -
- ))} +
+
+
+ {data.map((photo, index) => ( +
+
+ A cool cat. +
+
+ ))} +
+ +
); -} +}; + +export default EmblaCarousel; diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 0fe7efdb..8dc46326 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/src/components/modals/main/scss/marketplace/_main.scss @@ -477,21 +477,91 @@ p.author { font-size: 30px; } } - .embla { - overflow: hidden; + position: relative; + width: 350px; + margin-left: 5px; } + +.embla__viewport { + overflow: hidden; + width: 100%; +} + +.embla__viewport.is-draggable { + cursor: move; + cursor: grab; +} + +.embla__viewport.is-dragging { + cursor: grabbing; +} + .embla__container { display: flex; + user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; + -webkit-tap-highlight-color: transparent; + margin-left: -10px; } + .embla__slide { - flex: 0 0 100%; - height: 350px; - width: 100px; - img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: 80% 100%; - } -} \ No newline at end of file + position: relative; + min-width: 100%; + padding-left: 10px; +} + +.embla__slide__inner { + position: relative; + overflow: hidden; + height: 190px; +} + +.embla__slide__img { + position: absolute; + display: block; + top: 50%; + left: 50%; + width: auto; + min-height: 100%; + min-width: 100%; + max-width: none; + transform: translate(-50%, -50%); +} + +.embla__button { + outline: 0; + cursor: pointer; + background-color: transparent; + touch-action: manipulation; + position: absolute; + z-index: 1; + top: 50%; + transform: translateY(-50%); + border: 0; + width: 30px; + height: 30px; + justify-content: center; + align-items: center; + fill: #1bcacd; + padding: 0; +} + +.embla__button:disabled { + cursor: default; + opacity: 0.3; +} + +.embla__button__svg { + width: 100%; + height: 100%; +} + +.embla__button--prev { + left: 27px; +} + +.embla__button--next { + right: 27px; +}