From 3558b6f575363a960be6d76e2731e3be88775270 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 24 Sep 2026 15:42:44 -0300 Subject: [PATCH] feat(carousel): add size probe for responsive layout and optimize item width calculation --- .../carousel/carousel.component.html | 6 + .../carousel/carousel.component.scss | 9 ++ .../carousel/carousel.component.spec.ts | 129 ++++++++++++++++-- .../components/carousel/carousel.component.ts | 86 +++++++++--- .../product-list/product-list.component.html | 3 + 5 files changed, 201 insertions(+), 32 deletions(-) diff --git a/src/app/shared/components/carousel/carousel.component.html b/src/app/shared/components/carousel/carousel.component.html index a908b81..4c01b1f 100644 --- a/src/app/shared/components/carousel/carousel.component.html +++ b/src/app/shared/components/carousel/carousel.component.html @@ -1,4 +1,10 @@
+
([ { id: 1, label: 'Primero' }, { id: 2, label: 'Segundo' }, { id: 3, label: 'Tercero' }, - ]; + ]); readonly carousel = viewChild.required(CarouselComponent); readonly itemTemplate = @@ -41,8 +41,47 @@ class TestHostComponent { describe('CarouselComponent', () => { let fixture: ComponentFixture; + let frames: Map; + let resize: () => void; + let disconnect: ReturnType; + const flushLayout = () => { + const pending = [...frames.values()]; + frames.clear(); + pending.forEach((callback) => callback(0)); + fixture.detectChanges(); + }; + const setDimensions = (width: number, basis: number) => { + const host = fixture.nativeElement.querySelector('app-carousel'); + Object.defineProperty(host, 'clientWidth', { configurable: true, value: width }); + const probe = fixture.nativeElement.querySelector('.carousel__size-probe'); + probe.getBoundingClientRect = () => ({ width: basis }) as DOMRect; + }; beforeEach(async () => { + frames = new Map(); + let frameId = 0; + vi.stubGlobal( + 'requestAnimationFrame', + vi.fn((callback: FrameRequestCallback) => { + frames.set(++frameId, callback); + return frameId; + }), + ); + vi.stubGlobal( + 'cancelAnimationFrame', + vi.fn((id: number) => frames.delete(id)), + ); + disconnect = vi.fn(); + vi.stubGlobal( + 'ResizeObserver', + class { + constructor(callback: () => void) { + resize = callback; + } + observe() {} + disconnect = disconnect; + }, + ); await TestBed.configureTestingModule({ imports: [TestHostComponent], }).compileComponents(); @@ -51,6 +90,75 @@ describe('CarouselComponent', () => { fixture.detectChanges(); }); + afterEach(() => { + fixture.destroy(); + vi.unstubAllGlobals(); + }); + + it('agrupa las mediciones y no se realimenta al renderizar o navegar', async () => { + fixture.componentInstance.circular.set(true); + setDimensions(650, 200); + fixture.detectChanges(); + resize(); + resize(); + expect(frames.size).toBe(1); + flushLayout(); + await Promise.resolve(); + expect(frames.size).toBe(0); + const carousel = fixture.componentInstance.carousel(); + expect(carousel['itemsPerPage']()).toBe(2); + carousel.next(); + fixture.detectChanges(); + const track = fixture.nativeElement.querySelector('.carousel__track'); + track.dispatchEvent(new TransitionEvent('transitionend', { propertyName: 'transform' })); + fixture.detectChanges(); + await Promise.resolve(); + resize(); // Same width, even if the new cards have a different height. + expect(frames.size).toBe(0); + expect(carousel['currentPage']()).toBe(1); + expect(carousel['itemWidth']()).toBe(269); + }); + + it('recalcula al cambiar el ancho y la base responsive de las tarjetas', () => { + setDimensions(650, 200); + resize(); + flushLayout(); + setDimensions(350, 200); + resize(); + flushLayout(); + expect(fixture.componentInstance.carousel()['itemsPerPage']()).toBe(1); + setDimensions(350, 100); + resize(); + flushLayout(); + expect(fixture.componentInstance.carousel()['itemsPerPage']()).toBe(2); + expect(frames.size).toBe(0); + }); + + it('actualiza productos y admite una lista vacía sin anchos inválidos', () => { + setDimensions(650, 200); + flushLayout(); + fixture.componentInstance.items.set([]); + fixture.detectChanges(); + expect(frames.size).toBe(1); + flushLayout(); + const carousel = fixture.componentInstance.carousel(); + expect(carousel['itemWidth']()).toBeNull(); + expect(carousel['hasOverflow']()).toBe(false); + fixture.componentInstance.items.set([{ id: 4, label: 'Nuevo' }]); + fixture.detectChanges(); + flushLayout(); + expect(carousel['itemWidth']()).toBe(650); + expect(fixture.nativeElement.querySelectorAll('article')).toHaveLength(1); + expect(frames.size).toBe(0); + }); + + it('cancela mediciones pendientes y desconecta el observador al destruirse', () => { + expect(frames.size).toBe(1); + fixture.destroy(); + expect(frames.size).toBe(0); + expect(disconnect).toHaveBeenCalledOnce(); + }); + it('renderiza el template provisto para cada elemento', () => { const articles = fixture.nativeElement.querySelectorAll('article'); @@ -65,8 +173,9 @@ describe('CarouselComponent', () => { carousel['itemsPerPage'].set(Number.MAX_SAFE_INTEGER); expect(carousel['circularPages']()).toEqual([]); - expect(carousel['createPage']('current', 0).items.map((entry) => entry.item.id)) - .toEqual([1, 2, 3]); + expect(carousel['createPage']('current', 0).items.map((entry) => entry.item.id)).toEqual([ + 1, 2, 3, + ]); }); it('expone una región accesible y controles con etiquetas', () => { @@ -109,7 +218,7 @@ describe('CarouselComponent', () => { it('usa todo el ancho y distribuye el espacio sobrante entre elementos completos', () => { const host = fixture.nativeElement.querySelector('app-carousel') as HTMLElement; - const firstItem = fixture.nativeElement.querySelector('.carousel__item') as HTMLElement; + const firstItem = fixture.nativeElement.querySelector('.carousel__size-probe') as HTMLElement; Object.defineProperty(host, 'clientWidth', { configurable: true, @@ -122,7 +231,7 @@ describe('CarouselComponent', () => { }) as DOMRect, ); - fixture.componentInstance.carousel().ngAfterViewInit(); + flushLayout(); fixture.detectChanges(); const frame = fixture.nativeElement.querySelector('.carousel__frame') as HTMLElement; @@ -138,7 +247,7 @@ describe('CarouselComponent', () => { fixture.detectChanges(); const host = fixture.nativeElement.querySelector('app-carousel') as HTMLElement; - const firstItem = fixture.nativeElement.querySelector('.carousel__item') as HTMLElement; + const firstItem = fixture.nativeElement.querySelector('.carousel__size-probe') as HTMLElement; Object.defineProperty(host, 'clientWidth', { configurable: true, @@ -151,7 +260,7 @@ describe('CarouselComponent', () => { }) as DOMRect, ); - fixture.componentInstance.carousel().ngAfterViewInit(); + flushLayout(); fixture.detectChanges(); const pages = fixture.nativeElement.querySelectorAll('.carousel__page'); diff --git a/src/app/shared/components/carousel/carousel.component.ts b/src/app/shared/components/carousel/carousel.component.ts index 2769ebe..518edc1 100644 --- a/src/app/shared/components/carousel/carousel.component.ts +++ b/src/app/shared/components/carousel/carousel.component.ts @@ -1,5 +1,6 @@ import { AfterViewInit, + afterRenderEffect, ChangeDetectionStrategy, Component, DestroyRef, @@ -10,6 +11,7 @@ import { inject, input, signal, + untracked, viewChild, } from '@angular/core'; import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common'; @@ -45,12 +47,15 @@ export class CarouselComponent implements AfterViewInit { private readonly platformId = inject(PLATFORM_ID); private readonly host = inject>(ElementRef); private readonly viewport = viewChild.required>('viewport'); + private readonly sizeProbe = viewChild.required>('sizeProbe'); + private layoutFrame: number | null = null; readonly items = input.required(); readonly itemTemplate = input.required>>(); readonly trackBy = input>((index) => index); readonly scrollStep = input(null); readonly gap = input(0); + readonly itemBasis = input('16rem'); readonly circular = input(false); readonly ariaLabel = input('Carrusel'); readonly previousLabel = input('Mostrar elementos anteriores'); @@ -90,27 +95,51 @@ export class CarouselComponent implements AfterViewInit { () => !this.hasOverflow() || (!this.circular() && !this.canScrollNext()), ); + constructor() { + afterRenderEffect(() => { + this.items(); + this.gap(); + this.circular(); + this.itemBasis(); + this.itemTemplate(); + // Layout outputs must never become dependencies of this effect. + untracked(() => this.scheduleLayout()); + }); + } + + private scheduleLayout(): void { + if (this.destroyRef.destroyed || this.layoutFrame !== null) return; + this.layoutFrame = requestAnimationFrame(() => { + this.layoutFrame = null; + this.refreshLayout(); + }); + } + ngAfterViewInit(): void { if (!isPlatformBrowser(this.platformId)) { return; } - const viewport = this.viewport().nativeElement; - this.refreshLayout(); - + let previousWidth = -1; + let previousBasis = -1; const resizeObserver = - typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => this.refreshLayout()); - resizeObserver?.observe(this.host.nativeElement); - - const mutationObserver = - typeof MutationObserver === 'undefined' + typeof ResizeObserver === 'undefined' ? null - : new MutationObserver(() => this.refreshLayout()); - mutationObserver?.observe(viewport, { childList: true, subtree: true }); + : new ResizeObserver(() => { + const width = this.host.nativeElement.clientWidth; + const basis = this.sizeProbe().nativeElement.getBoundingClientRect().width; + // Image loads and page rotation can change height, but not the layout inputs. + if (width === previousWidth && basis === previousBasis) return; + previousWidth = width; + previousBasis = basis; + this.scheduleLayout(); + }); + resizeObserver?.observe(this.host.nativeElement); + resizeObserver?.observe(this.sizeProbe().nativeElement); this.destroyRef.onDestroy(() => { resizeObserver?.disconnect(); - mutationObserver?.disconnect(); + if (this.layoutFrame !== null) cancelAnimationFrame(this.layoutFrame); }); } @@ -222,24 +251,32 @@ export class CarouselComponent implements AfterViewInit { } private refreshLayout(): void { - const viewport = this.viewport().nativeElement; - const firstItem = viewport.querySelector('.carousel__item'); + const itemCount = this.items().length; const availableWidth = this.host.nativeElement.clientWidth; const availableViewportWidth = Math.max( availableWidth - (this.hasMultipleItems() ? CarouselComponent.CONTROL_SLOT_WIDTH * 2 : 0), 0, ); - if (!firstItem || availableViewportWidth <= 0) { + if (itemCount === 0) { + this.itemsPerPage.set(1); + this.currentPage.set(0); + this.transitionDirection.set(0); + this.itemWidth.set(null); + this.hasOverflow.set(false); + this.canScrollPrevious.set(false); + this.canScrollNext.set(false); + return; + } + + if (availableViewportWidth <= 0) { this.itemWidth.set(null); this.refreshNavigation(); return; } - const assignedWidth = firstItem.style.width; - firstItem.style.width = ''; - const naturalItemWidth = firstItem.getBoundingClientRect().width; - firstItem.style.width = assignedWidth; + // Measure a stable CSS basis, never a card whose content/width we just changed. + const naturalItemWidth = this.sizeProbe().nativeElement.getBoundingClientRect().width; if (naturalItemWidth <= 0) { this.itemWidth.set(null); @@ -248,9 +285,9 @@ export class CarouselComponent implements AfterViewInit { } const gap = this.resolvedGap(); - const fittingItems = Math.max( - 1, - Math.floor((availableViewportWidth + gap) / (naturalItemWidth + gap)), + const fittingItems = Math.min( + itemCount, + Math.max(1, Math.floor((availableViewportWidth + gap) / (naturalItemWidth + gap))), ); const visibleItems = Math.min(fittingItems, this.items().length); const distributedItemWidth = @@ -262,7 +299,12 @@ export class CarouselComponent implements AfterViewInit { this.transitionDirection.set(0); } - this.itemWidth.set(distributedItemWidth); + if (this.itemWidth() !== distributedItemWidth) this.itemWidth.set(distributedItemWidth); + const normalizedPage = this.normalizePage(this.currentPage(), this.pageCount()); + if (normalizedPage !== this.currentPage()) { + this.currentPage.set(normalizedPage); + this.transitionDirection.set(0); + } if (this.circular()) { const hasOverflow = this.items().length > fittingItems; this.hasOverflow.set(hasOverflow); diff --git a/src/app/shared/components/product-list/product-list.component.html b/src/app/shared/components/product-list/product-list.component.html index 14d4c52..eef1be6 100644 --- a/src/app/shared/components/product-list/product-list.component.html +++ b/src/app/shared/components/product-list/product-list.component.html @@ -67,6 +67,9 @@ [itemTemplate]="productItem" [trackBy]="trackProduct" [gap]="24" + [itemBasis]=" + effectiveLayout() === 'row' ? 'clamp(18rem, 70vw, 32rem)' : 'clamp(15rem, 30vw, 18rem)' + " [circular]="true" ariaLabel="Productos destacados" />