devopsandClaude Sonnet 5
9d4553f3a4
- El panel de zoom lateral ahora calcula tamaño/posición contra el viewport real (window.innerWidth/innerHeight) en cada mousemove, en vez de un breakpoint fijo (lg:block) con ancho fijo -- a resoluciones altas con poco espacio a la derecha de la imagen terminaba saliéndose de la pantalla. Si no entra un panel de al menos PANEL_MIN_SIZE, se cae automáticamente al overlay in-place (antes atado a "por debajo de lg", ahora a "no hay espacio real"). - La barra fija de "Añadir al carrito" en mobile quedaba fija desde el primer render, tapando permanentemente parte de la imagen del producto. Ahora el botón real (ProductPurchase) también se muestra en mobile, y la barra sticky solo aparece cuando ese botón sale del viewport (IntersectionObserver) -- mismo patrón que el "Buy Now" sticky de Amazon. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
201 lines
11 KiB
TypeScript
201 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Maximize2, Minus, Plus, RotateCcw, ZoomIn } from "lucide-react";
|
|
import { MouseEvent, PointerEvent, WheelEvent, useRef, useState } from "react";
|
|
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
|
|
|
interface Offset { x: number; y: number }
|
|
interface DragState { pointerId: number; startX: number; startY: number; originX: number; originY: number }
|
|
interface HoverZoomState {
|
|
lensLeft: number;
|
|
lensTop: number;
|
|
lensSize: number;
|
|
bgX: number;
|
|
bgY: number;
|
|
showPanel: boolean;
|
|
panelLeft: number;
|
|
panelTop: number;
|
|
panelSize: number;
|
|
}
|
|
|
|
// Zoom estilo "lupa" de Amazon: un recuadro semitransparente sobre la
|
|
// imagen (la lupa) marca la region que se esta mirando, y un panel
|
|
// aparte a la derecha muestra esa misma region ampliada -- sin recortar
|
|
// nada de la pantalla ni pedirle al usuario que haga scroll para verlo
|
|
// completo (a diferencia de un primer intento que escalaba la imagen
|
|
// in-place con transform, donde para ver el borde superior había que
|
|
// mover el cursor fuera del viewport visible). Solo mouse (mousemove no
|
|
// dispara de forma continua en touch); en mobile no aparece el efecto,
|
|
// sin romper nada. Independiente del zoom interactivo del modal (click
|
|
// -> Dialog con scale/drag), que sigue igual.
|
|
//
|
|
// El panel usa background-image con la foto completa (no la version ya
|
|
// recortada por object-cover) a proposito -- escalar la imagen recortada
|
|
// nunca iba a revelar las partes recortadas (ej. la cabeza de una figura
|
|
// de accion en una foto vertical). background-size en un solo valor
|
|
// (ancho%, alto en "auto") preserva el aspect ratio real de la foto
|
|
// completa.
|
|
//
|
|
// El tamaño/posicion del panel se calculan en cada mousemove contra el
|
|
// viewport real (window.innerWidth/innerHeight), no con un breakpoint
|
|
// fijo tipo "lg:block" -- a resoluciones altas con la ventana angosta
|
|
// (o el layout de la pagina dejando poco espacio a la derecha de la
|
|
// imagen) un tamaño fijo terminaba saliéndose de la pantalla. Si no
|
|
// entra un panel de al menos PANEL_MIN_SIZE, se cae automáticamente al
|
|
// overlay in-place (misma imagen completa como fondo, dentro de la
|
|
// propia caja) en vez de mostrar un panel cortado.
|
|
const HOVER_ZOOM_SCALE = 2.2;
|
|
const LENS_RATIO = 1 / HOVER_ZOOM_SCALE;
|
|
const PANEL_MARGIN = 16;
|
|
const PANEL_MAX_SIZE = 480;
|
|
const PANEL_MIN_SIZE = 220;
|
|
const VIEWPORT_EDGE_PADDING = 16;
|
|
|
|
export function ProductGallery({ images, name }: { images: string[]; name: string }) {
|
|
const [selected, setSelected] = useState(images[0] ?? "");
|
|
const [open, setOpen] = useState(false);
|
|
const [scale, setScale] = useState(1);
|
|
const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });
|
|
const [hoverZoom, setHoverZoom] = useState<HoverZoomState | null>(null);
|
|
const drag = useRef<DragState | null>(null);
|
|
|
|
const trackHoverZoom = (event: MouseEvent<HTMLButtonElement>) => {
|
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
const lensSize = rect.width * LENS_RATIO;
|
|
const cursorX = event.clientX - rect.left;
|
|
const cursorY = event.clientY - rect.top;
|
|
const lensLeft = Math.min(Math.max(cursorX - lensSize / 2, 0), rect.width - lensSize);
|
|
const lensTop = Math.min(Math.max(cursorY - lensSize / 2, 0), rect.height - lensSize);
|
|
|
|
const availableWidth = window.innerWidth - rect.right - PANEL_MARGIN - VIEWPORT_EDGE_PADDING;
|
|
const availableHeight = window.innerHeight - VIEWPORT_EDGE_PADDING * 2;
|
|
const panelSize = Math.min(PANEL_MAX_SIZE, availableWidth, availableHeight);
|
|
const panelTop = Math.min(Math.max(rect.top, VIEWPORT_EDGE_PADDING), window.innerHeight - panelSize - VIEWPORT_EDGE_PADDING);
|
|
|
|
setHoverZoom({
|
|
lensLeft,
|
|
lensTop,
|
|
lensSize,
|
|
bgX: (lensLeft / (rect.width - lensSize)) * 100,
|
|
bgY: (lensTop / (rect.height - lensSize)) * 100,
|
|
showPanel: panelSize >= PANEL_MIN_SIZE,
|
|
panelLeft: rect.right + PANEL_MARGIN,
|
|
panelTop,
|
|
panelSize,
|
|
});
|
|
};
|
|
|
|
const applyScale = (next: number) => {
|
|
const value = Math.min(3, Math.max(1, Number(next.toFixed(2))));
|
|
setScale(value);
|
|
if (value === 1) setOffset({ x: 0, y: 0 });
|
|
};
|
|
|
|
const reset = () => { setScale(1); setOffset({ x: 0, y: 0 }); };
|
|
const changeOpen = (value: boolean) => { setOpen(value); if (!value) reset(); };
|
|
const wheel = (event: WheelEvent<HTMLDivElement>) => { event.preventDefault(); applyScale(scale + (event.deltaY < 0 ? .2 : -.2)); };
|
|
const pointerDown = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (scale <= 1) return;
|
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
drag.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, originX: offset.x, originY: offset.y };
|
|
};
|
|
const pointerMove = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (!drag.current || drag.current.pointerId !== event.pointerId) return;
|
|
setOffset({ x: drag.current.originX + event.clientX - drag.current.startX, y: drag.current.originY + event.clientY - drag.current.startY });
|
|
};
|
|
const pointerEnd = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (drag.current?.pointerId === event.pointerId) drag.current = null;
|
|
};
|
|
|
|
return (
|
|
<div className="grid gap-4 lg:grid-cols-[86px_1fr]">
|
|
<div className="order-2 flex gap-3 overflow-x-auto lg:order-1 lg:flex-col">
|
|
{images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-cover" /></button>)}
|
|
</div>
|
|
<div className="relative order-1 lg:order-2">
|
|
<Dialog open={open} onOpenChange={changeOpen}>
|
|
<DialogTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="group relative aspect-square w-full cursor-zoom-in overflow-hidden rounded-[2rem] bg-slate-50"
|
|
onMouseMove={trackHoverZoom}
|
|
onMouseLeave={() => setHoverZoom(null)}
|
|
>
|
|
<Image
|
|
src={selected}
|
|
alt={name}
|
|
fill
|
|
priority
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
className="object-cover"
|
|
/>
|
|
{/* Lupa: recuadro que marca la region ampliada -- solo cuando
|
|
hay lugar real para el panel de al lado (showPanel,
|
|
calculado contra el viewport real, no un breakpoint
|
|
fijo). Sin espacio para el panel se usa el overlay
|
|
in-place como fallback, para cualquier resolucion. */}
|
|
{hoverZoom?.showPanel && (
|
|
<div
|
|
aria-hidden
|
|
data-testid="gallery-lens"
|
|
className="pointer-events-none absolute border-2 border-white bg-white/25 shadow-lg"
|
|
style={{ left: hoverZoom.lensLeft, top: hoverZoom.lensTop, width: hoverZoom.lensSize, height: hoverZoom.lensSize }}
|
|
/>
|
|
)}
|
|
<div
|
|
aria-hidden
|
|
data-testid="gallery-inplace-overlay"
|
|
className="pointer-events-none absolute inset-0 bg-slate-50 transition-opacity duration-150 ease-out"
|
|
style={{
|
|
opacity: hoverZoom && !hoverZoom.showPanel ? 1 : 0,
|
|
backgroundImage: `url(${selected})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
|
|
backgroundPosition: hoverZoom ? `${hoverZoom.bgX}% ${hoverZoom.bgY}%` : "center",
|
|
}}
|
|
/>
|
|
<span className="absolute bottom-5 right-5 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-black shadow-xl"><ZoomIn className="size-4" />Zoom interactivo</span>
|
|
</button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-6xl overflow-hidden bg-slate-950 p-0">
|
|
<div className="grid min-h-[70vh] grid-rows-[1fr_auto]">
|
|
<div className="relative overflow-hidden bg-slate-950" onWheel={wheel} onPointerDown={pointerDown} onPointerMove={pointerMove} onPointerUp={pointerEnd} onPointerCancel={pointerEnd} onDoubleClick={() => applyScale(scale > 1 ? 1 : 2)} style={{ touchAction: "none", cursor: scale > 1 ? "grab" : "zoom-in" }}>
|
|
<div className="absolute inset-6 transition-transform duration-100 will-change-transform" style={{ transform: `translate3d(${offset.x}px, ${offset.y}px, 0) scale(${scale})` }}>
|
|
<Image src={selected} alt={name} fill sizes="95vw" className="select-none object-contain" draggable={false} />
|
|
</div>
|
|
<div className="pointer-events-none absolute left-5 top-5 rounded-full bg-black/65 px-3 py-1.5 text-xs font-black text-white backdrop-blur">Rueda o botones para acercar · Arrastra para mover</div>
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-center gap-3 border-t border-white/10 bg-slate-900 p-4 text-white">
|
|
<button type="button" aria-label="Alejar" onClick={() => applyScale(scale - .25)} disabled={scale <= 1} className="grid size-11 place-items-center rounded-full bg-white/10 hover:bg-white/20 disabled:opacity-35"><Minus /></button>
|
|
<input aria-label="Nivel de zoom" type="range" min="1" max="3" step="0.1" value={scale} onChange={(event) => applyScale(Number(event.target.value))} className="w-44 accent-fuchsia-500 sm:w-64" />
|
|
<button type="button" aria-label="Acercar" onClick={() => applyScale(scale + .25)} disabled={scale >= 3} className="grid size-11 place-items-center rounded-full bg-white/10 hover:bg-white/20 disabled:opacity-35"><Plus /></button>
|
|
<button type="button" onClick={reset} className="inline-flex h-11 items-center gap-2 rounded-full bg-white/10 px-4 text-sm font-black hover:bg-white/20"><RotateCcw className="size-4" />Restablecer</button>
|
|
<span className="inline-flex h-11 items-center gap-2 rounded-full bg-fuchsia-500 px-4 text-sm font-black"><Maximize2 className="size-4" />{Math.round(scale * 100)}%</span>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{hoverZoom?.showPanel && (
|
|
<div
|
|
aria-hidden
|
|
data-testid="gallery-zoom-panel"
|
|
className="pointer-events-none fixed z-30 overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-2xl"
|
|
style={{
|
|
left: hoverZoom.panelLeft,
|
|
top: hoverZoom.panelTop,
|
|
width: hoverZoom.panelSize,
|
|
height: hoverZoom.panelSize,
|
|
backgroundImage: `url(${selected})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
|
|
backgroundPosition: `${hoverZoom.bgX}% ${hoverZoom.bgY}%`,
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|