¿No vamos a hacer nada desde cero? (parte 2)

Bienvenidos a la segunda parte de nuestro “start from scratch” de un carrusel en React.

Ya he actualizado el repositorio con los cambios:
https://github.com/entorno5/carrousel-noplugin-react

“¿Segunda parte de qué?”. Si no sabes de dónde venimos, aquí te dejo la entrada anterior, donde empezamos a crear desde cero un carrusel de imágenes para React, sin plugins ni nada por el estilo, como si supiéramos programar:

Si leíste la entrada anterior, sabrás que dejé una pista de qué sería lo siguiente… esa imagen importada como CloseImage daba a entender que algo había que cerrar. ¿Y que solemos cerrar? Una modal.

Pero no solo eso, además, añadiremos unos botones inferiores para desplazarse por las imágenes además de mantener el swipe que ya creamos. Esos botones también estarán en la modal, pudiendo desplazarte también por las imágenes desde la modal. Por último, el movimiento estará sincronizado: es decir, si abrimos la modal y nos desplazamos a una foto, al cerrarla, el carrusel se colocará en esa misma foto.

Haremos como la otra vez: no entraremos en profundidad en el código, pero destacaremos alguna cosilla. Mira esta parte:

  const handleImageClick = (e, image, index) => {
    if (!isDragging) {
      e.stopPropagation();
      setSelectedImage(image.src);
      goToImage(index);
      setIsModalOpen(true);
      document.body.style.overflow = "hidden";
    }
  };

  const goToImage = (index) => {
    setSelectedButton(index);
    const ele = document.getElementById(`ic_${id}_${index}`);
    if (ele) {
      const containerWidth = document.getElementsByClassName(
        "wrapper-content-slider"
      )[0].offsetWidth;
      const imageWidth = ele.offsetWidth;
      let scrollLeft = ele.offsetLeft - (containerWidth - imageWidth) / 2;

      ele.parentNode.scrollTo({
        left: scrollLeft,
        behavior: "smooth",
      });
    }
  };

El handleImageClick, lanzado en el click de cada imagen, comprueba si no es está haciendo dragging para:

1. Guardar en un estado la imagen seleccionada.
2. Ir a la imagen.
3. Abrir la modal.
4. Ocultar el scroll del body.

El goToImage, llamado en el click de los botones que hemos creado en esta segunda parte (tanto en el carrusel como en la modal), hace cálculos con el tamaño del contenedor y las imágenes para mover (con un scrollTo) el carrusel al lugar que nos interesa cuando se hace click en una imagen. Observa que los botones, al igual que el drag del slider, solo aparecen si son necesarios (si el contenedor sobrepasa el tamaño de la ventana).

Te he dejado un fallito, que me acabo de dar cuenta: el icono de maximizar que debería pintarse en cada imagen para indicar que se puede ver la imagen en grande, no está bien maquetado: espero tu pull request 😉

Y lo demás… pues ya sabes, mira lo que hay, investiga… y PRUEBA. El objetivo de estas dos entradas es animarte a que piques y aprendas. No lo olvides.

¡Hasta la semana que viene!