Lazy Module Loading

En carouselItem.js agregar la clase carousel-item en e div

h(
    'div.carousel-item',
    h('img', { src: imageUrl, alt: '', loading: 'lazy' }),

Instalar la dependencia de lozad

npm install --save lozad

En el index.js que está en la carpeta src

import lozad from 'lozad'
...
...
...
!(async function(document) {
  const mountReference = document.querySelector('.main').lastElementChild

  if (!mountReference) {
    return 0
  }
...
...
...

// Add lazy loading
    const carouseImages = document.querySelectorAll('.carousel-item__img');
    const observer = lozad(carouseImages);
    observer.observe();

    const allYouTubeLinks = document.querySelectorAll('.js-video-link');
    // console.log(allYouTubeLinks);
    allYouTubeLinks.forEach((link) => {
      link.addEventListener('click', modalListener);
    });

})(document, window)

En el index.js del modal

export const modalListener = (event) => {
    event.preventDefault();
    const link = event.target;
    console.log(link);
}

https://javascript.info/bubbling-and-capturing bubble up

Lo que hicimos en la clase, bueno al menos yo(tuve que implemetar el lazy load como lo hizo el profesor por eso puede que haya código repetido):😅

1. instale dependencia:

npm install lozad -S

1. Creamos en la carpeta src del proyecto la carpeta modal y dentro de modal se creó el archivo index.js.
2. en src/modal/index.js se escribió:

export const modalListener = (event) => {
    event.preventDefault();
    const img = event.target
    const link = img.parentElement;
    console.log(link.href);
}

1. en src/index.js se agregó el siguiente código:

import lozad from 'lozad';
import { modalListener } from './modal';
...
...
    .insertAdjacentElement(
      'afterend',
      Carousel({
        itemsList: popular,
      })
    )

    /* ENTRE ESTA LINEA!! */

    // Add lazy loading
    const carouseImages = document.querySelectorAll('.carousel-item__img');
    const observer = lozad(carouseImages);
    observer.observe();
    
    const allYouTubeLinks = document.querySelectorAll('.js-video-link');
      // console.log(allYouTubeLinks);
      allYouTubeLinks.forEach((link) => {
        link.addEventListener('click', modalListener);
    });

    /* Y ENTRE ESTA LINEA */
})(document, window)

1. y por ultimo se agrego en el archivo CarouselItem.js:

• SE AGREGÓ EL ATRIBUTO CLASSNAME A LA ETIQUETA ‘a’, este código comienza como en la linea 8, al menos en mi editor.

const Controls = ({ slug, youtubeVideoId }) =>
  h(
    'div',
    h(
      'a', // esta 'a' ó 'a.js-video-link y QUITAMOS EL ATRIBUTO className'
      {
        className: 'js-video-link',
        href: `https://www.youtube.com/watch?v=${youtubeVideoId}`,
        title: 'Watch trailer',
        target: '_blank',
        rel: 'noreferrer',
      },

y ya! , me gustaria feedback, para saber donde me equivoque, gracias 😄

Me encanta la forma de usar devTools (elements, console, sources) para debugear.
Muy buena clase!!👌🤓

event.target vs event.currentTarget

Cuando se agrega un evento a un elemento del DOM, tienen un propiedad llamada bubble, que hace referencia a como las burbujas suben en el agua y lo que hace es que cuando se interactúa con un elemento que tiene un event listener, el elemento ejecutará todos los eventos de todos los elementos padres en orden ascendente (por eso se hace referencia a las burbujas). Suponiendo que tenemos la siguiente estructura:

<div class="parent" onclick="handleClick">
	<p>Children</p>
</div>

	const handleClick = (e) => {
		const elementoAlQueSeLeHizoClick = e.target // se refiere a la etiqueta <p>
		const elementoQuePoseeElManejadorDeEventos = e.currentTarget // se refiere al div
	}

si se le agrega un evento al div pero se da click en el párrafo, el elemento seleccionado será el párrafo y ese se convertirá en el target seleccionado. Debido al bubble, al seleccionar parráfo, éste dispararía el evento del párrafo (pero no tiene), asi que sigue y dispara el evento del padre.

En este ejemplo no hay una forma directa de solamente seleccionar el div ya que es exactamente del mismo tamaño del párrafo, asi que si queremos que el manejador de eventos pueda acceder al div cuando damos click al párrafo entonces se usaría currentTarget.

event.currentTarget hace referencia al elemento al cual tiene ligado la funcion que maneja el evento.

NodeList -a- Array:

NodeList NO trae elementos como map, filter, mientras que un array si los trae.

Una forma de++ pasar del nodelist hacia un array++ es++ hacer la configuración en babel en webpack para utilizar el spreed operator sobre un array++:
[…allYoutubeLinks].filter

forEach se encuentra disponible para arrays tanto como NodeList.

👌

Para el auto completado

export const modalLister = (event = new Event) => {}