CODEWITHSUNDEEP
htmlcsseventsember.js
blueFast
blueFast

Reputation: 44401

Resetting a countdown timer whenever the user interacts with the SPA

I have an ember Single Page Application. The application has an auto-logout feature: whenever the timer expires, it will automatically logout. I would like to reset the timer every time that the user interacts with the page:

Is it possible to add any code to catch any mouse / keyboard event before it is sent to ember? After resetting the timer, the event should be passed to ember or the CSS pipeline for further processing.

I would like to consider a special case: whenever the user clicks in a non-active area (background, for example), I am not sure of whether it is better to reset the timer or not, so I would like to be able to catch that, in order to decide later what to do. I am not sure how to define non-active area: from the point of view of the user, is clicking anywhere where no CSS effects or any other kind of effect is triggered.

Upvotes: 0

Views: 592

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Here's what we're using, I most definitely stole it from someone else and worked it into Ember, but I'm not going to find out where. It really just tells you if they've interacted with the page in any way, not necessarily if any component etc has been clicked.

App.idleTime = 0;
$(document).ready(function () {
  //Increment the idle time counter every minute.
  var idleInterval = setInterval(function() {
    App.idleTime = App.idleTime + 1;
  }, 60000); // 1 minute

  //Zero the idle timer on mouse movement.
  $(this).mousemove(function (e) {
    App.idleTime = 0;
  });
  $(this).keypress(function (e) {
    App.idleTime = 0;
  });
});

And then I have a schedule task in my application route that watches the idle time and goes haywire with it when appropriate. The code below is made up, but should give you an idea.

App.ApplicationRoute = Em.Route.extend({
  idleMax: 10,
  setupBatman: function(){
    this.watchJoker();
  }.on('init'),
  watchJoker: function(){
    Ember.run.later(this, this.watchJoker, 1000);

    if (App.idleTime >= this.get('idleMax')) {
      console.log("You are looking idle, I'm gonna kick you.");
      // kick
    }
  }
});

Update: I felt guilt, it came from here: Detecting idle time in JavaScript elegantly

Upvotes: 1

Related Questions