shawnmclean / idle.js

Javascript activity library for the browser. (away, idle, etc)

Idle.Js

NuGet

Visual Studio users can install this directly into their web projects by executing the following command in the Package Manager Console

PM> Install-Package Idle.js

Web Component

Polymer wrapper is available here.

Description

Tiny javascript library to report activity of user in the browser (away, idle, not looking at webpage, etc). that is independent of any other javascript libraries such as jquery.

You can view the demo here.

Changelog

0.0.2 (19-11-14) - Bower Support

0.0.2 (7-03-12) - Added 2 events for the visibility API. Now detects when is a user changes tabs or returns.

0.0.1 - Initial activity monitoring.

idle.js's Issues

Still calling the function startAwayTimeout

Hi there, this library is nice. I tried to use it and i detected a problem. On Idle.prototype.onActive is still calling the function startAwayTimeout.

Thanks

test

test

Mousewheel should trigger onActive

Bower support

Could you add bower support?

Thanks.

Document API

Library looks pretty solid, but it really needs documentation on the behavior and interface.

Does not work in IE11 with embedded PDF.

tested in IE11 with PDF and it does not work.

onfocus = active?

First, thanks for sharing this, very useful.

I was wondering... have you ever thought about raising the "back" or "active" event when the browser comes back in focus?

I'm asking because right now, if you switch window using ctrl-tab for example, when you come back to your browser, I'd like to see the active event firing back again.

Just a thought, great plugin!

Patrice

Document Supported Browsers

This script looks/works good, and I'm sure the documentation will come when you release a beta.

But when you get to that point (or sooner) please document the browsers you have tested in.

Tested http://shawnmclean.github.io/Idle.js/

PASS::
Windows 7:
Firefox 20.0.1
Chrome Version 27.0.1453.73 beta-m
IE 10

FAIL::
Windows XP:
IE 8

SCRIPT438: Object doesn't support property or method 'addEventListener'
idle.js, line 43 character 7

I've committed to compatibility down to ie8. Unfortunately this fails in ie8. To get rid of the above error i added:

        if (document.addEventListener) {
            document.addEventListener("visibilitychange", (function () {
                return activity.handleVisibilityChange();
            }), false);
            document.addEventListener("webkitvisibilitychange", (function () {
                return activity.handleVisibilityChange();
            }), false);
            document.addEventListener("msvisibilitychange", (function () {
                return activity.handleVisibilityChange();
            }), false);
        } else {
            document.attachEvent("onvisibilitychange", (function () {
                return activity.handleVisibilityChange();
            }));
        }

This will then run, but it doesn't work. I will see if i can figure out some more fixes.

ES6 and NPM packages

Hi @shawnmclean Thanks for providing IdleJS.

I am trying to integrate Idle in our applications, but I encountered some problems. We are using ES6/Webpack.

I download a copy of idle.js, when import it , none of the following are working.

import './idle';
import Idle from './idle';
import * as Idle from './idle';

Can you provide some suggestion?

BTW, I can not find this lib in NPM, it is not published to NPM?

Page visibility API

I was curious what your thoughts are on triggering away events based on page visibility [1]

[1] http://www.nczonline.net/blog/2011/08/09/introduction-to-the-page-visibility-api/

Overriding of existing listeners

I think, it will be better to check if the window object already have a value in onclick, onmousemove etc. to not override them:
https://github.com/shawnmclean/Idle.js/blob/master/src/idle.coffee#L52

startAwayTimeout does not exist

When building idle.js there is a call to startAwayTimeout() but this function doesn't exist.

Using the idle.js version from the live demo it works fine.

Idle.js interprets page navigation in Firefox as being "away"

If you go to http://shawnmclean.github.io/Idle.js/ in Firefox and refresh the page, you'll briefly see idle.js report that "User is not looking at page" before the page repaints. This is also happening in a dashboard app that I have whenever a user clicks on any link that takes them away from the dashboard - the "background polling paused" message I have setup is displayed for a second while Firefox is busy loading the new page.

Add stop feature

Add a stop feature that pauses all timers.

broken links after renaming project

hey,

your project was featured on echo.js this weekend, but any and all links to it are broken since you renamed it to idle.js
just to let you know...

http://www.echojs.com

Sander

Is there a way to show a countdown on how long it still takes until an "onAway" event fires?

Reset away timer when use comes back to page via vis api

Touch events support

It appears this lib doesn't take into account touch events (am I wrong?).

It would be nice.

vendor-prefixed `visibilitychange` event listener is called the second time in newer browsers

In the code for Idle.js, There are several vendor-prefixed events setup on the same listener for the visibilitychange event. This makes it fire twice in (newer) browsers that support both the older vendor-prefixed events and the newer unprefixed events. I have corrected this in my personal build of Idle.js and would have made a pull request but i don't know how to write coffeescript (which is the source language of choice for Idle.js ). However, here's my code snippet to remedy this in plain JavaScript

        if(typeof document.addEventListener === 'function'){
          
            if('hidden' in document &&
              !('webkitHidden' in document
                  || 'oHidden' in document
                    || 'mozHidden' in document
                        || 'msHidden' in document)){
                         document.addEventListener("visibilitychange", this.listener, false);
            }else{
                        document.addEventListener("webkitvisibilitychange", this.listener, false);
                        document.addEventListener("msvisibilitychange", this.listener, false);
            }
        }
        .
        .
        .
        if(typeof document.removeEventListener === 'function'){
            if('hidden' in document &&
                  !('webkitHidden' in document
                      || 'oHidden' in document
                        || 'mozHidden' in document
                            || 'msHidden' in document)){
                        document.removeEventListener("visibilitychange", this.listener);
            }else{
                       document.removeEventListener("webkitvisibilitychange", this.listener);
                       document.removeEventListener("msvisibilitychange", this.listener);
           }
        }

Add tests for start and stop