413 lines
14 KiB
TypeScript
413 lines
14 KiB
TypeScript
"use client";
|
|
import "photoswipe/style.css";
|
|
|
|
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { badgeVariants } from "@/components/ui/badge";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import type { CarouselApi } from "@/components/ui/carousel";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { useMediaQuery } from "@/hooks/useMediaQuery";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ProductImages = {
|
|
srcset: string;
|
|
src: string;
|
|
alt: string;
|
|
width: number;
|
|
height: number;
|
|
sizes: string;
|
|
thumbnail: string;
|
|
}[];
|
|
|
|
interface ProductGallery4Props {
|
|
images: ProductImages;
|
|
galleryID: string;
|
|
className?: string;
|
|
}
|
|
|
|
const PRODUCT_IMAGES = [
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 427w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/pexels-429124762-20851442-3.jpg",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
|
|
alt: "",
|
|
width: 800,
|
|
height: 1200,
|
|
sizes: "(min-width: 800px) 800px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png 427w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-2.png",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Elegant-Professional-Look-1.png",
|
|
alt: "",
|
|
width: 800,
|
|
height: 1200,
|
|
sizes: "(min-width: 800px) 800px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png 427w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-2.png",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-1-with-Tote-1.png",
|
|
alt: "",
|
|
width: 800,
|
|
height: 1200,
|
|
sizes: "(min-width: 800px) 800px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png 427w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-2.png",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Fashion-Look-1.png",
|
|
alt: "",
|
|
width: 800,
|
|
height: 1200,
|
|
sizes: "(min-width: 800px) 800px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png 800w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-2.png",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Leather-Tote-1.png",
|
|
alt: "",
|
|
width: 800,
|
|
height: 1200,
|
|
sizes: "(min-width: 800px) 800px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png 800w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-2.png",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Woman-with-Tote-Bag-1.png",
|
|
alt: "",
|
|
width: 800,
|
|
height: 1200,
|
|
sizes: "(min-width: 800px) 800px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png 800w, /block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png 800w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-2.png",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Stylish-Woman-in-Interior-1.png",
|
|
alt: "",
|
|
width: 800,
|
|
height: 1200,
|
|
sizes: "(min-width: 800px) 800px, 100vw",
|
|
},
|
|
];
|
|
|
|
const ProductGallery4 = ({
|
|
images = PRODUCT_IMAGES,
|
|
galleryID = "ProductGallery4",
|
|
className,
|
|
}: ProductGallery4Props) => {
|
|
const [api, setApi] = useState<CarouselApi>();
|
|
const [current, setCurrent] = useState(0);
|
|
const ignoreScroll = useRef(false);
|
|
const isDesktop = useMediaQuery("(width >= 1024px)");
|
|
const slideHeightRef = useRef<number | null>(null);
|
|
|
|
const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
|
|
useEffect(() => {
|
|
const lightbox = new PhotoSwipeLightbox({
|
|
gallery: "#" + galleryID,
|
|
children: "a",
|
|
bgOpacity: 1,
|
|
wheelToZoom: true,
|
|
arrowPrev: false,
|
|
arrowNext: false,
|
|
close: false,
|
|
zoom: false,
|
|
counter: false,
|
|
mainClass: "[&>div:first-child]:!bg-background",
|
|
pswpModule: () => import("photoswipe"),
|
|
});
|
|
lightbox.init();
|
|
lightboxRef.current = lightbox;
|
|
const buttonClassName = cn(
|
|
buttonVariants({
|
|
variant: "outline",
|
|
size: "icon",
|
|
className: "rounded-full",
|
|
}),
|
|
);
|
|
const indicatorClassName = cn(badgeVariants({ variant: "secondary" }));
|
|
|
|
lightbox.on("uiRegister", () => {
|
|
if (lightbox?.pswp?.ui) {
|
|
lightbox.pswp.ui.registerElement({
|
|
name: "custom-close-btn",
|
|
order: 10,
|
|
isButton: false,
|
|
appendTo: "root",
|
|
className: "absolute top-5 right-5",
|
|
html: `
|
|
<button type="button" id="pswp-close" class="${buttonClassName}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
|
|
</button>
|
|
`,
|
|
onInit: (el, pswp) => {
|
|
el.querySelector("#pswp-close")?.addEventListener("click", () =>
|
|
pswp.close(),
|
|
);
|
|
},
|
|
});
|
|
}
|
|
|
|
if (lightbox?.pswp?.ui) {
|
|
lightbox.pswp.ui.registerElement({
|
|
name: "custom-indicator-btn",
|
|
order: 10,
|
|
isButton: false,
|
|
appendTo: "root",
|
|
className: "absolute top-5 left-5",
|
|
html: `
|
|
<div id="pswp-indicator" class="${indicatorClassName} h-8.5 px-4 !rounded-full">
|
|
</div>
|
|
`,
|
|
onInit: (el, pswp) => {
|
|
const indicatorElem = el.querySelector("#pswp-indicator");
|
|
let prevIndex = -1;
|
|
|
|
pswp.on("change", () => {
|
|
prevIndex = pswp.currIndex;
|
|
if (indicatorElem) {
|
|
indicatorElem.innerHTML = `${prevIndex + 1} / ${pswp.getNumItems()}`;
|
|
}
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
if (lightbox?.pswp?.ui) {
|
|
lightbox.pswp.ui.registerElement({
|
|
name: "custom-next-prev-btns",
|
|
order: 10,
|
|
isButton: false,
|
|
appendTo: "root",
|
|
className: "absolute top-1/2 inset-x-0 -translate-y-1/2",
|
|
html: `
|
|
<div class="flex items-center justify-between px-4">
|
|
<button id="pswp-prev" class="${buttonClassName}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
|
</button>
|
|
<button id="pswp-next" class="${buttonClassName}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
`,
|
|
onInit: (el, pswp) => {
|
|
el.querySelector("#pswp-prev")?.addEventListener("click", () =>
|
|
pswp.prev(),
|
|
);
|
|
el.querySelector("#pswp-next")?.addEventListener("click", () =>
|
|
pswp.next(),
|
|
);
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
return () => lightbox.destroy();
|
|
}, [galleryID]);
|
|
|
|
const onSelect = useCallback((api: CarouselApi) => {
|
|
if (!api) return;
|
|
setCurrent(api.selectedScrollSnap() + 1);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!api) return;
|
|
api.on("reInit", onSelect);
|
|
api.on("select", onSelect);
|
|
|
|
return () => {
|
|
api?.off("select", onSelect);
|
|
};
|
|
}, [api, onSelect]);
|
|
|
|
useEffect(() => {
|
|
if (lightboxRef.current && api) {
|
|
lightboxRef.current.on("change", () => {
|
|
api?.scrollTo(lightboxRef.current?.pswp?.currIndex || 0);
|
|
});
|
|
}
|
|
}, [api, current]);
|
|
|
|
useEffect(() => {
|
|
if (!api || !isDesktop) return;
|
|
|
|
const slides = api.slideNodes();
|
|
if (slides.length === 0) return;
|
|
|
|
slideHeightRef.current = slides[0].offsetHeight;
|
|
|
|
let lastIndex = -1;
|
|
let ticking = false;
|
|
|
|
const updateCurrentIndex = () => {
|
|
if (!slideHeightRef.current) return;
|
|
const scrollTop = window.scrollY;
|
|
const slideHeight = slideHeightRef.current;
|
|
const index = Math.round(scrollTop / slideHeight);
|
|
|
|
if (index !== lastIndex) {
|
|
lastIndex = index;
|
|
setCurrent(index);
|
|
}
|
|
};
|
|
|
|
const onScroll = () => {
|
|
if (ignoreScroll.current || ticking) return;
|
|
|
|
ticking = true;
|
|
requestAnimationFrame(() => {
|
|
updateCurrentIndex();
|
|
ticking = false;
|
|
});
|
|
};
|
|
|
|
const onResize = () => {
|
|
const newHeight = slides[0].offsetHeight;
|
|
slideHeightRef.current = newHeight;
|
|
updateCurrentIndex();
|
|
};
|
|
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
window.addEventListener("resize", onResize);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", onScroll);
|
|
window.removeEventListener("resize", onResize);
|
|
};
|
|
}, [api, isDesktop, setCurrent]);
|
|
|
|
const handleThumbnailClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
const target = e.currentTarget;
|
|
const index = Number(target.getAttribute("data-index"));
|
|
|
|
const slides = api?.slideNodes();
|
|
|
|
if (slides && index >= 0 && index < slides.length) {
|
|
const offsetTop =
|
|
slides[index].getBoundingClientRect().top + window.scrollY;
|
|
const headerOffset = 80;
|
|
ignoreScroll.current = true;
|
|
window.scrollTo({
|
|
top: offsetTop - headerOffset,
|
|
behavior: "smooth",
|
|
});
|
|
setCurrent(index);
|
|
|
|
setTimeout(() => {
|
|
ignoreScroll.current = false;
|
|
}, 500);
|
|
}
|
|
};
|
|
|
|
if (!images) return;
|
|
|
|
return (
|
|
<section className={cn("mx-auto w-full max-w-190", className)}>
|
|
<div id={galleryID} className="relative flex justify-center gap-20">
|
|
<div className="sticky top-5 hidden self-start lg:block">
|
|
<ol className="flex max-h-[calc(100dvh-2.5rem)] w-fit flex-col gap-4 overflow-y-auto p-px [-ms-overflow-style:none] [scrollbar-width:none] [::-webkit-scrollbar]:hidden">
|
|
{images.map((img, index) => (
|
|
<li
|
|
className="w-14 shrink-0 grow-0"
|
|
key={`product-gallery-4-image-thumbnail-${index}`}
|
|
>
|
|
<button
|
|
data-state={index === current ? "active" : "inactive"}
|
|
data-index={index}
|
|
type="button"
|
|
onClick={handleThumbnailClick}
|
|
className="block aspect-square w-14 overflow-hidden ring-foreground transition-shadow duration-200 data-[state=active]:ring"
|
|
>
|
|
<img
|
|
src={img.thumbnail}
|
|
alt={img.alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
<Carousel
|
|
setApi={setApi}
|
|
opts={{
|
|
breakpoints: {
|
|
"(min-width: 1024px)": {
|
|
active: false,
|
|
},
|
|
},
|
|
}}
|
|
className="w-full"
|
|
>
|
|
<CarouselContent className="-ml-5 md:-ml-6 lg:ml-0 lg:flex-col">
|
|
{images.map((img, index) => (
|
|
<CarouselItem
|
|
className="pl-5 md:pl-6 lg:pl-0"
|
|
key={`product-gallery-4-image-${index}`}
|
|
>
|
|
<AspectRatio ratio={1} className="size-full overflow-hidden">
|
|
<a
|
|
href={img.src}
|
|
data-pswp-width={img.width}
|
|
data-pswp-height={img.height}
|
|
data-pswp-srcset={img.srcset}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
data-cropped="true"
|
|
>
|
|
<img
|
|
srcSet={img.srcset}
|
|
alt={img.alt}
|
|
sizes={img.sizes}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</a>
|
|
</AspectRatio>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<div className="lg:hidden">
|
|
<ol className="mt-4 flex items-center justify-center">
|
|
{images.map((_, index) => (
|
|
<button
|
|
onClick={() => api?.scrollTo(index)}
|
|
data-current={index + 1 === current}
|
|
key={`product-gallery-4-image-indicator-${index}`}
|
|
className="flex size-5.5 data-[current=true]:[&>span]:bg-primary"
|
|
>
|
|
<span className="m-auto block size-1.5 rounded-full bg-primary/50"></span>
|
|
</button>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</Carousel>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { ProductGallery4 };
|