3

Tengo el siguiente código:

// Utilizo esta variable para eliminar el evento porque .removeEventListener() no me funcionó. 
let eliminarEvento = true; 
let body = document.getElementsByTagName('body');
body[0].addEventListener('click', mover);

function mover(evento){
  let canva = document.getElementsByClassName('upper-canvas ');
  canva[0].id = 'canvas';
  let scrollArea = document.getElementsByClassName('fpd-scroll-area');
  scrollArea[19].id = 'scrollArea';
  if(evento.target.id == "canvas"){
    if (eliminarEvento){
      jQuery('#scrollArea').animate({scrollLeft: '500' }, 1000);
      jQuery('#scrollArea').animate({scrollLeft: '0' }, 1000);
    }
    eliminarEvento = false; 
  }
}

Basicamente lo que hace es capturar un evento click sobre un canvas, que despliega un panel de opciones que se desborda de la pantalla en dispositivos móviles, el cual se mueve a la derecha para que el usuario sepa que hay más opciones.

Hasta ahora funciona, pero la intención es que se ejecute solo la primera vez que el usuario entre a la página desde el mismo navegador. Hasta el momento, lo que puedo hacer es que se ejecuta una sola vez pero cuando el usuario refresque la página o vaya a editar otro porducto y vuelva a aparecer el panel, verá de nuevo el efecto.

He intentado hacerlo con LocalStorage pero no funciona solo con la función mover.

Un plus que me gustaría saber, si esta a su alcance, sería cómo hacer el movimiento suavizado del scroll horizontal del panel pero con JS puro.

Gracias de antemano.

3
  • 1
    ¿Exactamente qué intentaste con LocalStorage? Esa parecería ser la solución. Commented el 25 abr. 2022 a las 16:11
  • @Fedex7501 Intenté crear el elemento para guardarlo, pero no funcionó guardando la función, ya que realmente no recibo ningún dato: localStorage.setItem("nombre-funcion", "nombre-guardado"); No sé si sea importante, pero el elemento que selecciono para mover es un panel que se genera de forma dinámica. Commented el 25 abr. 2022 a las 16:17
  • 3
    Creo que sería mejor intentar con sessionStorage.
    – Triby
    Commented el 25 abr. 2022 a las 17:26

3 respuestas 3

1

no puedo comentar por falta de reputación pero me parece que con sessionStorage quedaria; tal y como lo menciona @Triby;

Primero tendrías que validar que el valor de session no este presente, esto lo prodrias hacer con un:

window.addEventListener('load', () => {
 //obtenemos el valor de la session...
        let visita = sessionStorage.getItem('visita');
}

una vez validada u obtenida haces una condición

if(!visita){
/*tambieén podrias manejar un
if(visita === 'si')
*/
  /*logica a mostrar o función*/
}else{
  /*logica de igual manera*/
}

Es importante que según tu lógica agregues un let/var vis = SessionStorage.setItem('visita', 'si');, para que setees la variable de session y asi se quede guarda en el navegador, y que tu código a implementar si encuentra esa variable al cargar el navegador no se ejecute.

Saludos

0

Al final, me ayudó la orientación de @Artes. Este es el código final.

if (localStorage.getItem('visita') == null){
  localStorage.setItem('visita', 1);
}

let valorStorage = localStorage.getItem('visita');
let body = document.getElementsByTagName('body');
body[0].addEventListener('click', mover);

function mover(evento){
  let canva = document.getElementsByClassName('upper-canvas ');
  canva[0].id = 'canvas';
  let scrollArea = document.getElementsByClassName('fpd-scroll-area');
  scrollArea[19].id = 'scrollArea';
  if(evento.target.id == "canvas"){
    if (valorStorage == 1){
      jQuery('#scrollArea').animate({scrollLeft: '500' }, 1000);
      jQuery('#scrollArea').animate({scrollLeft: '0' }, 1000);
    }
    localStorage.setItem('visita', 2);
    valorStorage = localStorage.getItem('visita');
  }
}

Probablemente exista una forma más optima de hacerlo, pero para mi funciona.

Gracias a todos.

0

Cuando traté de buscar la solución de este problema, vi que con el localStorage es posible, solo es cuestión de lógica y pensar con calma la solución.
Mi solución fue:
Mi proyecto está con php y JS así que en donde necesitaba mi función coloqué lo siguiente:

var alertado = localStorage.getItem('alertado') || '';
if (alertado != 'sí') {
    window.addEventListener('load', function() {
        myfuncion();
    });
    localStorage.setItem('alertado', 'sí');
}

Pero debemos eliminar el localStorage apenas cerremos la sesión, así que en el botón que tengo para salir o cerrar sesión, coloqué el siguiente código.

localStorage.removeItem("alertado");

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.