0

Buen dia. Sucede que he querido aprender a crear modales usando solo HTML, CSS y JavaScript sin el uso de ningún framework o librería. He visto algunos métodos, pero me gustó mucho este, es bastante útil y adaptable. El punto es que he estado leyendo este código y hay una parte que no entiendo(código Js) y es la parte de los if en la función createCustomElement(la segunda función), el código esta comentado con la zona de las dudas y cuales son. Les agradecería enormemente si me regalan una explicación clara de esa parte. Fuente: https://www.youtube.com/watch?v=86f4Qf0gxjo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>probando el modal de Edteam</title>

  <style>
    .ed-modal-container {
      background: rgba(0, 0, 0, 0.8);
      position: fixed;
      top: 10px;
      width: 100%;
      margin-left: -0.5rem;
      height: 100vh;
      display: flex;
    }
    
    .ed-modal-container::before {
      position: absolute;
      content: "X";
      color: #ffffff;
      top: 1rem;
      right: 1rem;
      font-size: 2rem;
    }
    
    .ed-modal-content {
      background: #ffffff;
      width: 90%;
      max-width: 1000px;
      margin: auto;
      text-align: center;
    }
  </style>
</head>
<!--Codigo HTML-->

<body>
  <h1 id="show-modal">Presione aca para mostrar el modal</h1>
</body>

<script>
  //Añadir un objetivo de atributos a un elemento
  const addAttributes = (element, attrObj) => {
    for (let attr in attrObj) {
      if (attrObj.hasOwnProperty(attr)) element.setAttribute(attr, attrObj[attr])
    }
  };
  //Crear elemento con atributos e hijos (inician las dudas)
  const createCustomElement = (element, attributes, children) => { //no me queda muy claro el manejo del parametro "children"
    let customElement = document.createElement(element);
    if (children !== undefined) children.forEach(el => { //"children !== undefined" quiere decir, si existe un hijo?
      if (el.nodeType) { //no me queda claro 
        if (el.nodeType === 1 || el.nodeType === 11) //y mi mayor duda es esta parte
          customElement.appendChild(el); //aca algo de duda tengo
      } else {
        customElement.innerHTML += el;
      }
    });
    addAttributes(customElement, attributes);
    return customElement;
  }
  //imprimir modal
  const printModal = (content) => {
    //crear contenedor interno
    const modalContentEl = createCustomElement("div", {
      id: "ed-modal-content",
      class: "ed-modal-content"
    }, [content])
    //crear contenedor principal
    const modalContainerEl = createCustomElement("div", {
      id: "ed-modal-container",
      class: "ed-modal-container"
    }, [modalContentEl]);

    //imprimir modal
    document.body.appendChild(modalContainerEl)

    //Remover el modal
    const removeModal = () =>
      document.body.removeChild(modalContainerEl);

    modalContainerEl.addEventListener("click", e => {
      console.log(e);
      if (e.target === modalContainerEl) removeModal();
    })
  }[introducir la descripción del enlace aquí][1]

  let showModal = document.getElementById("show-modal");
  showModal.addEventListener("click", () => {
    printModal(`<h1>aprendiendo a crear modales con js</h1>`)
  })
</script>

</html>

3
  • ¿Qué exactamente no entiendes?
    – BetaM
    el 18 oct. 2020 a las 19:54
  • el codigo js esta comentado a la derecha con las dudas. Las dudas son sobre la funcion createCustomElement. el 18 oct. 2020 a las 20:02
  • 1
    Parece ser un problema que no se puede reproducir. el 18 oct. 2020 a las 20:38

1 respuesta 1

4

Tal y como menciona el video en el minuto 4:30, la función createCustomElement sirve para evitar la tarea repetitiva de crear elementos, asignarles atributos e insertarles contenido.

Básicamente, es una abstracción para que esto:

var content = 'Hola!';

var nuevoDiv = document.createElement("div"); 

var idElemento = document.createAttribute("id");
idElemento.value = 'ed-modal-content';
nodo.setAttributeNode(a);

var claseElemento = document.createAttribute("class");
claseElemento.value = 'ed-modal-content';
nodo.setAttributeNode(a);

var elementoContenido = document.createTextNode(content); 
nuevoDiv.appendChild(newContent);

Se convierta en esto:

var content = 'Hola!';
const modalContentEl = createCustomElement("div", {
    id: "ed-modal-content", 
    class: "ed-modal-content"
}, [content])

En cuanto al mecanismo interno de la función:

    const createCustomElement = (element, attributes, children) => {
    // Función para crear un nuevo elemento, el cual se almacenará en la variable "customElement".
    // El parámetro attributes contiene un arreglo asociativo que se agregarán como atributos al elemento que estamos creando.
    // El parámetro children es un arreglo que contiene cadenas de texto, u otros tipos de nodo HTML.
    // En la siguiente URL puedes consultar los distintos tipos de nodos que existen
    // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constants

        let customElement = document.createElement(element);

        if (children !== undefined) children.forEach(el => {
            // La condición (children !== undefined) actúa como una validación, para asegurarnos de que hemos recibido el parámetro y que contiene algo
            if( el.nodeType ) {
                // En esta validación comprobamos si el parámetro que recibimos es un nodo HTML. Bien podría ser un número o simplemente una cadena de texto, los cuales no tendrían la propiedad propiedad "nodeType".
                if(el.nodeType === 1 || el.nodeType === 11)
                customElement.appendChild(el);
                // En esta parte, comprueba que el tipo de nodo sea uno u once, antes de anexarlo al elemento padre (La variable customElement).
                // Como nota adicional, puesto que sólo se ejecuta una instrucción no es necesario poner llaves {} después de la sentencia if, como se acostumbra.
            }else{
                // Si el elemento no es un nodo HTML, sencillamente lo concatenamos al contenido del elemento que estamos creando.
                customElement.innerHTML += el;
            }
        });
        // Esta siguiente línea es para agregar los atributos que recibe la función como segundo parámetro.
        addAttributes(customElement, attributes);
        // Esta siguiente línea retorna el elemento creado, con el contenido agregado y los atributos asignados.
        return customElement;
    }
1
  • 1
    Muchísimas gracias, explicas muy bien. Creo que mejor explicado no pudo haber quedado. el 18 oct. 2020 a las 23:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.