0

Estoy trabajando en un menú a forma de lista, cada elemento de este menú tiene un icono del lado izquierdo y del lado derecho tiene un botón que permite al darle clic abrir una ventana para seleccionar varios iconos con el propósito de personalizar el icono que cada elemento tiene por default, aunque mi código actualmente al hacer esta selección cambia al mismo icono en todos los elementos de la lista y quería saber si existe alguna manera para poder modificar cada icono por separado. Este es el código con el que estoy trabajando https://jsfiddle.net/joelfa/c0o6sdLy/8/

// DROPDOWN
function toggleDropdown(button) {
  var dropdownContent = button.nextElementSibling;

  var allDropdowns = document.querySelectorAll('.dropdown-content');
  allDropdowns.forEach(function(otherDropdown) {
    if (otherDropdown !== dropdownContent && otherDropdown.classList.contains('show')) {
      otherDropdown.classList.remove('show');
    }
  });

  dropdownContent.classList.toggle("show");
}

var dropdownButtons = document.querySelectorAll('.dropbtn');
dropdownButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    toggleDropdown(this);
  });
});

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('.fa-ellipsis-vertical')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

// MODAL
document.addEventListener('DOMContentLoaded', function () {
  var openModalBtns = document.querySelectorAll('.openModalBtn');
  var closeModalBtn = document.getElementById('closeModalBtn');
  var modal = document.getElementById('myModal');

  function openModal() {
    modal.style.display = 'block';
  }

  openModalBtns.forEach(function (btn) {
    btn.addEventListener('click', openModal);
  });

  closeModalBtn.addEventListener('click', function () {
    modal.style.display = 'none';
  });

  window.addEventListener('click', function (event) {
    if (event.target === modal) {
      modal.style.display = 'none';
    }
  });
});

// ELIMINAR FAVORITO
document.addEventListener('DOMContentLoaded', function () {
  var eliminarButtons = document.querySelectorAll('.eliminarBtn');

  eliminarButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      var elementoLi = this.closest('.nav-item');
      elementoLi.parentNode.removeChild(elementoLi);
    });
  });
});

// SELECCIONA ICONO
document.querySelectorAll('.icons i').forEach(function(icono) {
  icono.addEventListener('click', function() {
    cambiarIcono(this);
  });
});

function cambiarIcono(iconoSeleccionado) {      
  var nuevaClase = iconoSeleccionado.className;

  document.querySelectorAll('.nav-item .nav-link .item-icon i').forEach(function(itemIcon) {
    itemIcon.className = nuevaClase;
  });

  document.getElementById('myModal').style.display = 'none';
}
body {
    font-family: Arial, sans-serif;
}


.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: transparent;
    color: #333;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: max-content;
}

.dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border: 0;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.dropdown-content button:hover {
    background-color: #ddd;
}

.show {
    display: block;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 300px;
}

.modal-content .icons {
  text-align: center;
}

.modal-content .icons i{
  cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<div id="modulosFavoritos" class="tab-content">
  <ul class="sidebar-nav">

    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="item-icon"><i class="fa-solid fa-screwdriver-wrench fa-lg"></i></span>
        <span class="item-name">Link 1</span>
      </a>
      <div class="dropdown">
        <button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
        <div class="dropdown-content">
          <button class="openModalBtn">Cambiar icono</button>
          <button class="eliminarBtn">Eliminar</button>
        </div>
      </div>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="item-icon"><i class="fa-solid fa-piggy-bank fa-lg"></i></span>
        <span class="item-name">Link 2</span>
      </a>
      <div class="dropdown">
        <button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
        <div class="dropdown-content">
          <button class="openModalBtn">Cambiar icono</button>
          <button class="eliminarBtn">Eliminar</button>
        </div>
      </div>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="item-icon"><i class="fa-solid fa-coins fa-lg"></i></span>
        <span class="item-name">Link 3</span>
      </a>
      <div class="dropdown">
        <button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
        <div class="dropdown-content">
          <button class="openModalBtn">Cambiar icono</button>
          <button class="eliminarBtn">Eliminar</button>
        </div>
      </div>
    </li>

  </ul>
</div>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn" class="close"></span>
    <div class="icons">
      <i class="fa-solid fa-folder-open fa-lg"></i>
      <i class="fa-solid fa-piggy-bank fa-lg"></i>
      <i class="fa-solid fa-coins fa-lg"></i>
      <i class="fa-solid fa-id-card fa-lg"></i>
      <i class="fa-solid fa-newspaper fa-lg"></i>
      <i class="fa-solid fa-screwdriver-wrench fa-lg"></i>
      <i class="fa-solid fa-question fa-lg"></i>
    </div>
  </div>
</div>

2
  • 1
    La pregunta debe ser autocontenida, esto significa que el código relevante debe ir en la pregunta, como texto, usando las herramientas que provee el sitio, y no enlaces externos o imágenes. Haz clic en editar y cambia lo que haga falta, de lo contrario tu pregunta terminará cerrada Commented el 18 ene. a las 10:37
  • Obs.: Así como en tu fiddle agregaste un recurso, en el snippet tenés la opción Añadir librería externa (a la izquierda). Tenlo presente para tus próximas ediciones.
    – padaleiana
    Commented el 18 ene. a las 16:45

1 respuesta 1

1

El problema es que tu código está demasiado desacoplado, se lanzan modales pero no existe alguien que escuche el resultado de eso, y si bien existen patrones de diseño para esto, lo más simple sería colocar una variable global para guardar el menú seleccionado, y luego en la función cambiarIcono usas esa variable cambiar su icono.

Otra forma, es usar promesas para retornar la acción de la ventana modal, para esto creas una función:

async function GetSelection(){
 return new Promise((resolve, reject) => {
  document.querySelectorAll('.icons i').forEach(function(icono) {
    icono.addEventListener('click', function() {
       resolve(this);
    },{once:true});
  });
  });
}

La función anterior reemplaza a cambiarIcono y a document.querySelectorAll('.icons i').forEach(function(icono). La cual agrega los eventos click y resuelve el resultado de la selección

Luego en openModalBtns.forEach(function (btn) { cambias el código por:


  openModalBtns.forEach(function (btn) {
  
    btn.addEventListener('click', async () =>{
      const icon = btn.closest(".nav-item").querySelector("i"); //obtenemos el icono
      openModal();
      const result = await GetSelection(); //obtenemos el icono seleccionado
      icon.className = result.className; //aplicamos el cambio
      document.getElementById('myModal').style.display = 'none'; //cerramos
    });
  });

Demo:

function toggleDropdown(button) {
  var dropdownContent = button.nextElementSibling;
    
  var allDropdowns = document.querySelectorAll('.dropdown-content');
  allDropdowns.forEach(function(otherDropdown) {
    if (otherDropdown !== dropdownContent && otherDropdown.classList.contains('show')) {
      otherDropdown.classList.remove('show');
    }
  });

  dropdownContent.classList.toggle("show");
}

var dropdownButtons = document.querySelectorAll('.dropbtn');
dropdownButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    toggleDropdown(this);
  });
});

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('.fa-ellipsis-vertical')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

// MODAL
document.addEventListener('DOMContentLoaded', function () {
  var openModalBtns = document.querySelectorAll('.openModalBtn');
  var closeModalBtn = document.getElementById('closeModalBtn');
  var modal = document.getElementById('myModal');
  
  function openModal() {
    modal.style.display = 'block';
  }
  
  openModalBtns.forEach(function (btn) {
  
    btn.addEventListener('click', async () =>{
      const icon = btn.closest(".nav-item").querySelector("i");
      openModal();
      const result = await GetSelection();
      icon.className = result.className;
      document.getElementById('myModal').style.display = 'none';
    });
  });
  
  closeModalBtn.addEventListener('click', function () {
    modal.style.display = 'none';
  });
  
  window.addEventListener('click', function (event) {
    if (event.target === modal) {
      modal.style.display = 'none';
    }
  });
});

// ELIMINAR FAVORITO
document.addEventListener('DOMContentLoaded', function () {
  var eliminarButtons = document.querySelectorAll('.eliminarBtn');

  eliminarButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      var elementoLi = this.closest('.nav-item');
      elementoLi.parentNode.removeChild(elementoLi);
    });
  });
});

async function GetSelection(){
 return new Promise((resolve, reject) => {
  document.querySelectorAll('.icons i').forEach(function(icono) {
    icono.addEventListener('click', function() {
       resolve(this);
    },{once:true});
  });
  });
}
body {
    font-family: Arial, sans-serif;
}


.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: transparent;
    color: #333;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: max-content;
}

.dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border: 0;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.dropdown-content button:hover {
    background-color: #ddd;
}

.show {
    display: block;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 300px;
}

.modal-content .icons {
  text-align: center;
}

.modal-content .icons i{
  cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="modulosFavoritos" class="tab-content">
  <ul class="sidebar-nav">
  
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="item-icon"><i class="fa-solid fa-screwdriver-wrench fa-lg"></i></span>
        <span class="item-name">Link 1</span>
      </a>
      <div class="dropdown">
        <button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
        <div class="dropdown-content">
          <button class="openModalBtn">Cambiar icono</button>
          <button class="eliminarBtn">Eliminar</button>
        </div>
      </div>
    </li>
    
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="item-icon"><i class="fa-solid fa-piggy-bank fa-lg"></i></span>
        <span class="item-name">Link 2</span>
      </a>
      <div class="dropdown">
        <button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
        <div class="dropdown-content">
          <button class="openModalBtn">Cambiar icono</button>
          <button class="eliminarBtn">Eliminar</button>
        </div>
      </div>
    </li>
    
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="item-icon"><i class="fa-solid fa-coins fa-lg"></i></span>
        <span class="item-name">Link 3</span>
      </a>
      <div class="dropdown">
        <button class="dropbtn"><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></button>
        <div class="dropdown-content">
          <button class="openModalBtn">Cambiar icono</button>
          <button class="eliminarBtn">Eliminar</button>
        </div>
      </div>
    </li>
    
  </ul>
</div>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn" class="close"></span>
    <div class="icons">
      <i class="fa-solid fa-folder-open fa-lg"></i>
      <i class="fa-solid fa-piggy-bank fa-lg"></i>
      <i class="fa-solid fa-coins fa-lg"></i>
      <i class="fa-solid fa-id-card fa-lg"></i>
      <i class="fa-solid fa-newspaper fa-lg"></i>
      <i class="fa-solid fa-screwdriver-wrench fa-lg"></i>
      <i class="fa-solid fa-question fa-lg"></i>
    </div>
  </div>
</div>

Tu Respuesta

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

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