Resetting a countdown timer whenever the user interacts with the SPA

Question

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:

• whenever keyboard input is entered
• whenever any component of the page is clicked, including for example dropdown-opening, which is not triggering any ember action

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.

Answer 1

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