useWindowsResize

Este composable gestiona el ajuste dinámico del número de elementos visibles en un carrusel (sliderPerView) basado en el tamaño de la ventana del navegador. Se utilizan diferentes márgenes de padding para dispositivos móviles y de escritorio.

Implementación del Composable:

import { MOBILE_RESOLUTION } from "@/constants/resolutions";

const PADDING_MOBILE = 32;
const PADDING_DESKTOP = 256;

export function useWindowsResize() {
  const sliderPerView = shallowRef(0);

  /**
   * Actualiza el número de slides visibles basados en el tamaño de la ventana.
   * Ajusta el padding dependiendo de si es una pantalla móvil o de escritorio.
   */
  const updateWindowsResize = () => {
    let padding = 0;
    padding =
      window.innerWidth < MOBILE_RESOLUTION ? PADDING_MOBILE : PADDING_DESKTOP;
    // Calcula el número de slides visibles basado en el ancho disponible
    sliderPerView.value = (window.innerWidth - padding) / 4 / 100;
  };

  // Añade el listener de evento 'resize' al montar el componente y lo remueve al desmontarlo
  onMounted(() => {
    updateWindowsResize();
    window.addEventListener("resize", updateWindowsResize);
  });

  onUnmounted(() => {
    window.removeEventListener("resize", updateWindowsResize);
  });

  return { sliderPerView };
}

Descripción de las Funciones:

1. sliderPerView: Es un shallowRef que contiene el número de slides visibles en el carrusel, calculado en base al tamaño de la ventana y al padding aplicado.

2. updateWindowsResize:

   • Calcula el padding según si la resolución de la ventana es móvil o de escritorio.
   • Ajusta el valor de sliderPerView para reflejar el número de slides visibles, basándose en el tamaño de la ventana.
   • Utiliza la fórmula (window.innerWidth - padding) / 4 / 100 para calcular cuántos slides pueden mostrarse al mismo tiempo.

3. onMounted:

   • Ejecuta updateWindowsResize al montar el componente para inicializar el número de slides visibles.
   • Añade un listener de eventos resize para actualizar el número de slides cuando la ventana cambie de tamaño.

4. onUnmounted:

   • Elimina el listener de eventos resize al desmontar el componente para evitar fugas de memoria.

---

Uso en el Componente Vue

Este componente utiliza useWindowsResize para ajustar dinámicamente el número de elementos visibles en un carrusel de testimonios. El carrusel es gestionado por CarouselBuilder, que toma como parámetro el número de slides visibles (sliderPerView).

Implementación del Setup:

const { sliderPerView } = useWindowsResize();

• sliderPerView: Controla cuántos slides son visibles en el carrusel dependiendo del tamaño de la ventana.

Template del Componente:

<template>
  <!-- CarouselBuilder recibe el número de slides visibles dinámicamente desde `sliderPerView` -->
  <CarouselBuilder :slides-per-view="sliderPerView">
    <swiper-slide v-for="{ video, image, id } in testimonies" :key="id">
      <TestimonialsCard
        :alternative-text="image.alternativeText"
        :url="image.url"
        @click="toogleModal(video.url)"
      />
    </swiper-slide>
  </CarouselBuilder>
</template>

Descripción del Template:

1. CarouselBuilder:

   • El componente CarouselBuilder recibe la prop slides-per-view, que determina cuántos elementos (slides) son visibles en el carrusel.
   • sliderPerView se actualiza dinámicamente según el tamaño de la ventana del navegador.

2. swiper-slide:

   • Representa un slide individual en el carrusel.
   • Itera sobre los testimonios (testimonies) y muestra una tarjeta (TestimonialsCard) con una imagen y un video asociado.

3. TestimonialsCard:

   • Es el componente que muestra la imagen y permite hacer clic para abrir el video asociado en un modal.

---

Estilos y Ajustes del Carrusel

Es importante mencionar que el valor de sliderPerView determina cuántos slides serán visibles a la vez en el carrusel. Este número se ajusta de manera dinámica dependiendo del tamaño de la ventana, aplicando un padding diferente para móviles y escritorios.

Resumen:

• El composable useWindowsResize calcula el número de slides visibles en el carrusel basado en el tamaño de la ventana y ajusta ese valor cuando la ventana cambia de tamaño.
• El componente CarouselBuilder recibe sliderPerView para determinar cuántos slides mostrar, lo cual ofrece una experiencia de usuario adaptable tanto en dispositivos móviles como de escritorio.
• El componente mantiene una buena gestión de recursos al añadir y eliminar el listener de resize durante el ciclo de vida del componente.