3

Actualmente llevo hasta la parte de cerrar automáticamente, quiero que al usuario confirmar que no se ha retirado del PC o dispositivo este prolongue el tiempo unos segundos nada mas hasta que haya actividad nuevamente. El problema es que al usuario confirmar (pulsando el botón OK de la alerta) este detecta un movimiento en la app y coloca el tiempo de actividad que es 10 segundos, y yo quisiera que coloque solo 5 segundos (como tiempo para que el usuario se active nuevamente en funciones del sistema).

function confirmarCierre() {
    //le doy un tiempo a la funcion cerrar sesion para que el usuario tenga un tiempo para confirmar, sino lo hizo en el tiempo se cerrara la sesion automaticamente
    var cerrar = setTimeout(cerrarSesion,5000);//5 segs de prueba
    alertify.confirm(
        'Cierre de Sesión',
        'Su Sesión Expirara, presione OK para prolongar la Sesión 60 segundos', 
        function(){
            //si presiona OK
            clearTimeout(cerrar); //elimino el tiempo a la funcion cerrarSesion
            clearTimeout(temp); //elimino el tiempo a la funcion confirmarCierre
            temp = setTimeout(confirmarCierre, 5000); //y aca le doy un nuevo tiempo a la funcion confirmarCierre (5 segs)
            alertify.success('Su sesión ha sido prolongada 60 segundos');
        },
        function(){
            cerrarSesion(); //si presiono Cancel, pues ejecuta la funcion cerrarSesion y posteriormente la cierra.
        }
    );
}

function cerrarSesion() {
    //window.location = "/logout";
    alertify.error('SESION CERRADA'); //coloco una notificacion para observar el momento en el q se ejecuta
    //NOTA: esto no va solo es de demostracion
}

// se llamará a la función que confirmar Cierre después de 10 segundos
var temp = setTimeout(confirmarCierre, 10000);

// cuando se detecte actividad en cualquier parte de la app
$( document ).on('click keyup keypress keydown blur change', function(e) {
    // borrar el temporizador de la funcion confirmarCierre
    clearTimeout(temp);
    // y volver a iniciarlo con 10segs
    temp = setTimeout(confirmarCierre,10000);
    console.log('actividad detectada');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/> 
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/bootstrap.min.css"/> 
<script src="//cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>

NOTA: los tiempos que coloco de prueba son solo de prueba, realmente quiero que desloguee a los 30mins y el tiempo que prolongue sea de 60segs. Pero esto es solo cuestión de cambiar los tiempos.

Este codigo lo obtuve gracias a este enlace. Del usuario @AlvaroMontoro

5
  • creo que debes hacer unbind de los eventos del document en confirmarCierre ¿no? así podrás jugar solo con los tiempos declarados en esta función. Te pongo un ejemplo en respuesta Commented el 11 abr. 2017 a las 13:22
  • No termino de comprender qué es lo que quieres, ¿que se prolongue la sesión 5 segundos en lugar de 10 cuando se pulse en el botón?
    – Alvaro Montoro
    Commented el 11 abr. 2017 a las 13:29
  • 1
    @AlvaroMontoro Lo que le pasa es que se le pisan dos funcionalidades , mientras que usa el ratón para la alerta se vuelve a llamar a el callback del bind del document. Commented el 11 abr. 2017 a las 13:33
  • 1
    Se puede eliminar todos los handlers como sugiere @AngelFragaParodi o simplemente usar una bandera para saber si la alerta de cierre de sesión se ha llevado a cabo: let shouldCloseSession = false;. Cuando se ejecute la función confirmarCierre se cambia la bandera a true y en el bind del document se pone una condición para que reinicialice el timeout siempre y cuando la bandera sea false.
    – gugadev
    Commented el 11 abr. 2017 a las 13:46
  • La bandera sería una buena opción.
    – Alvaro Montoro
    Commented el 11 abr. 2017 a las 13:57

3 respuestas 3

4

Una cosa que podrías hacer es evitar que se propaguen los eventos que surgen de los botones del pop-up del confirm de Alertify. De este modo se ejecutará la acción del botón (que extiende la sesión por 5 segundos) pero no la de los ancestros (que extiende la sesión por 10 segundos).

El código sería algo así con control de eventos delegados:

$("body").on("click", ".ajs-button", function(e) {
  e.stopPropagation();
});

Y aquí puedes ver una demo con tu código:

function confirmarCierre() {
    //le doy un tiempo a la funcion cerrar sesion para que el usuario tenga un tiempo para confirmar, sino lo hizo en el tiempo se cerrara la sesion automaticamente
    var cerrar = setTimeout(cerrarSesion,5000);//5 segs de prueba
    alertify.confirm(
        'Cierre de Sesión',
        'Su Sesión Expirara, presione OK para prolongar la Sesión 60 segundos', 
        function(){
            //si presiona OK
            clearTimeout(cerrar); //elimino el tiempo a la funcion cerrarSesion
            clearTimeout(temp); //elimino el tiempo a la funcion confirmarCierre
            temp = setTimeout(confirmarCierre, 5000); //y aca le doy un nuevo tiempo a la funcion confirmarCierre (5 segs)
            alertify.success('Su sesión ha sido prolongada 60 segundos');
        },
        function(){
            
            cerrarSesion(); //si presiono Cancel, pues ejecuta la funcion cerrarSesion y posteriormente la cierra.
        }
    );
}

function cerrarSesion() {
    //window.location = "/logout";
    alertify.error('SESION CERRADA'); //coloco una notificacion para observar el momento en el q se ejecuta
    //NOTA: esto no va solo es de demostracion
}

// se llamará a la función que confirmar Cierre después de 10 segundos
var temp = setTimeout(confirmarCierre, 10000);

// hacemos que al pulsar en los botones de Alertify no se propaguen los eventos
$("body").on("click", ".ajs-button", function(e) {
  e.stopPropagation();
});

// cuando se detecte actividad en cualquier parte de la app
$( document ).on('click keyup keypress keydown blur change', function(e) {
    // borrar el temporizador de la funcion confirmarCierre
    clearTimeout(temp);
    // y volver a iniciarlo con 10segs
    temp = setTimeout(confirmarCierre,10000);
    console.log('actividad detectada');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/> 
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/bootstrap.min.css"/> 
<script src="//cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>

4
  • 1
    +1 , me parece mejor esta idea que comentas , siempre y cuando no se equivoque en el click y no de a otra parte de la alerta. ¿Y si localizamos el stopPropagation en todo el padre de la alerta ? creo que sería un pelín más eficaz , aún así me pareció buena :) Commented el 11 abr. 2017 a las 13:52
  • Lo unico que cambie fue la clase a la cual se le coloca el e.stopPropagation a .ajs-modal.
    – bypabloc_
    Commented el 11 abr. 2017 a las 18:04
  • ah y al $("body").on("click", ".ajs-button", le agregue los eventos click keyup keypress keydown blur change
    – bypabloc_
    Commented el 11 abr. 2017 a las 18:08
  • ¿se puede imitar el evento que tiene el alert() de javascript? que coloca el navegador y pestaña al frente.
    – bypabloc_
    Commented el 11 abr. 2017 a las 18:14
3

Creo que la clave está en eliminar el bind de los eventos cada vez que se llame a la funcion de confirmar. Luego si se desea prolongar la sesión volver a hacerles el bind. Para ello usamos el método unbind. Así dentro de confirmar puedes darle el tiempo que quieras con otro timeout.

function confirmarCierre() {
//aquí hacemos unbind de todos para que no se vuelvan a ejecutar
      $(document).unbind();
    //le doy un tiempo a la funcion cerrar sesion para que el usuario tenga un tiempo para confirmar, sino lo hizo en el tiempo se cerrara la sesion automaticamente
    var cerrar = setTimeout(cerrarSesion,5000);//5 segs de prueba
    alertify.confirm(
        'Cierre de Sesión',
        'Su Sesión Expirara, presione OK para prolongar la Sesión 60 segundos', 
        function(){
            //si presiona OK
            clearTimeout(cerrar); //elimino el tiempo a la funcion cerrarSesion
            clearTimeout(temp); //elimino el tiempo a la funcion confirmarCierre 
            alertify.success('Su sesión ha sido prolongada 60 segundos');
           //damos los eventos de nuevo
           bindEvents(5000);
        },
        function(){
            cerrarSesion(); //si presiono Cancel, pues ejecuta la funcion cerrarSesion y posteriormente la cierra.
        }
    );
}

function cerrarSesion() {
    //window.location = "/logout";
    alertify.error('SESION CERRADA'); //coloco una notificacion para observar el momento en el q se ejecuta
    //NOTA: esto no va solo es de demostracion
}
 
var temp = null;

function bindEvents(milisegundos){
  temp = setTimeout(confirmarCierre, milisegundos);
  // cuando se detecte actividad en cualquier parte de la app
  $( document ).on('click keyup keypress keydown blur change', function(e) {
      
      // borrar el temporizador de la funcion confirmarCierre
      clearTimeout(temp);
      // y volver a iniciarlo con 10segs
      temp = setTimeout(confirmarCierre,milisegundos);
      console.log('actividad detectada');
  });
}
//primera llamada
 bindEvents(10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/> 
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/bootstrap.min.css"/> 
<script src="//cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>

3
  • Parece que el cierre de sesión se sigue disparando después de 10 segundos en lugar de 5
    – Alvaro Montoro
    Commented el 11 abr. 2017 a las 13:56
  • @AlvaroMontoro Si así es , la llamada a bindear de nuevo los eventos provoca dar 10 segundo de nuevo. Se soluciona pasandole un parametro :D Commented el 11 abr. 2017 a las 14:01
  • me parece genial tu propuesta pero me confundí a la hora de colocar el tiempo a 10 segs nuevamente. +1
    – bypabloc_
    Commented el 11 abr. 2017 a las 18:03
2

En realidad, te basta con evitar que ciertos elementos no se tomen en cuenta como actividad. Uno de estos elementos, alertify. Esto lo puedes lograr evitando la propagación del evento mediante stopPropagation como ya lo hizo @AlvaroMontoro. Sin embargo, no basta con hacerlo en el botón simplemente, porque si se hace click en cualquier otro lugar del diálogo, se tomará en cuenta como actividad.

Alertify devuelve una instancia cuando usas uno de sus métodos principales (confirm, prompt, etc.) y a partir de ésta instancia puedes obtener los elementos del DOM que la componen. Uno de los elementos es root que representa el padre en la jerarquía y que ocupa las dimensiones del viewport, por ende, si paras la progagación del evento sobre este elemento, cuando se muestre el diálogo y hagas click en cualquier lugar de él, incluído el overlay, no se tomará como actividad, como es obvio.

El siguiente ejemplo no toma como base tu código con el objetivo de enfocar la lógica a seguir.

const confirm = alertify.confirm(
  'Cierre de Sesión',
  'Su Sesión Expirara, presione OK para prolongar la Sesión 60 segundos',
  function() {
    alertify.success('Su sesión ha sido prolongada 60 segundos');
    console.log('OK');
  },
  function() {
    console.log('NO');
  }
);

confirm.elements.root.addEventListener('click', function(e) {
  e.stopPropagation();
});

document.addEventListener('click', function(e) {
  console.log('Actividad detectada');
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.9.0/css/alertify.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.9.0/css/themes/default.min.css" />
  <title>JS Bin</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/alertifyjs/1.9.0/alertify.min.js"></script>
</body>

</html>

1
  • me parece bien esta manera, peor no logre implementarlo a mi modo. +1
    – bypabloc_
    Commented el 11 abr. 2017 a las 18:07

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.