Jump To …

jquery.idle-timer.js

apps/jukebox/web/

jQuery idleTimer plugin
version 0.9.100511
by Paul Irish.
http://github.com/paulirish/yui-misc/tree/
MIT license

adapted from YUI idle timer by nzakas

http://github.com/nzakas/yui-misc/

Copyright (c) 2009 Nicholas C. Zakas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

updated to fix Chrome setTimeout issue by Zaid Zawaideh


API available in <= v0.8



// idleTimer() takes an optional argument that defines the idle timeout
 // timeout is in milliseconds; defaults to 30000
 $.idleTimer(10000);



$(document).bind("idle.idleTimer", function(){
    // function you want to fire when the user goes idle
 });



$(document).bind("active.idleTimer", function(){
  // function you want to fire when the user becomes active again
 });



// pass the string 'destroy' to stop the timer
 $.idleTimer('destroy');



// you can query if the user is idle or not with data()
 $.data(document,'idleTimer');  // 'idle'  or 'active'



// you can get time elapsed since user when idle/active
 $.idleTimer('getElapsedTime'); // time since state change in ms





API available in >= v0.9



// bind to specific elements, allows for multiple timer instances
 $(elem).idleTimer(timeout|'destroy'|'getElapsedTime');
 $.data(elem,'idleTimer');  // 'idle'  or 'active'



// if you're using the old $.idleTimer api, you should not do $(document).idleTimer(...)



// element bound timers will only watch for events inside of them.
 // you may just want page-level activity, in which case you may set up
 //   your timers on document, document.documentElement, and document.body



// You can optionally provide a second argument to override certain options.
 // Here are the defaults, so you can omit any or all of them.
 $(elem).idleTimer(timeout, {
   startImmediately: true, //starts a timeout as soon as the timer is set up; otherwise it waits for the first event.
   idle:    false,         //indicates if the user is idle
   enabled: true,          //indicates if the idle timer is enabled
   events:  'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove' // activity is one of these events
 });





(function($){

$.idleTimer = function(newTimeout, elem, opts){
defaults that are to be stored as instance props on the elem


  opts = $.extend({
    startImmediately: true, //starts a timeout as soon as the timer is set up
    idle:    false,         //indicates if the user is idle
    enabled: true,          //indicates if the idle timer is enabled
    timeout: 30000,         //the amount of time (ms) before the user is considered idle
    events:  'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove' // activity is one of these events
  }, opts);


    elem = elem || document;
(intentionally not documented)
Toggles the idle state and fires an appropriate event.
Returns
void


    var toggleIdleState = function(myelem){
curse you, mozilla setTimeout lateness bug!


        if (typeof myelem === 'number'){
            myelem = undefined;
        }

        var obj = $.data(myelem || elem,'idleTimerObj');
toggle the state


        obj.idle = !obj.idle;
reset timeout 


        var elapsed = (+new Date()) - obj.olddate;
        obj.olddate = +new Date();
handle Chrome always triggering idle after js alert or comfirm popup


        if (obj.idle && (elapsed < opts.timeout)) {
                obj.idle = false;
                clearTimeout($.idleTimer.tId);
                if (opts.enabled)
                  $.idleTimer.tId = setTimeout(toggleIdleState, opts.timeout);
                return;
        }
        
fire appropriate event


create a custom event, but first, store the new state on the element
and then append that string to a namespace


        var event = jQuery.Event( $.data(elem,'idleTimer', obj.idle ? "idle" : "active" )  + '.idleTimer'   );
we do want this to bubble, at least as a temporary fix for jQuery 1.7
event.stopPropagation();


        $(elem).trigger(event);
    },
Stops the idle timer. This removes appropriate event handlers
and cancels any pending timeouts.
Returns
void


    stop = function(elem){

        var obj = $.data(elem,'idleTimerObj') || {};
set to disabled


        obj.enabled = false;
clear any pending timeouts


        clearTimeout(obj.tId);
detach the event handlers


        $(elem).off('.idleTimer');
    },
(intentionally not documented)
Handles a user event indicating that the user isn't idle.
Params
event Event- A DOM2-normalized event object.
Returns
void


    handleUserEvent = function(){

        var obj = $.data(this,'idleTimerObj');
clear any existing timeout


        clearTimeout(obj.tId);
if the idle timer is enabled


        if (obj.enabled){
if it's idle, that means the user is no longer idle


            if (obj.idle){
                toggleIdleState(this);
            }
set a new timeout


            obj.tId = setTimeout(toggleIdleState, obj.timeout);

        }
     };
Starts the idle timer. This adds appropriate event handlers
and starts the first timeout.
Params
newTimeout int- (Optional) A new value for the timeout period in ms.
Returns
void


    var obj = $.data(elem,'idleTimerObj') || {};

    obj.olddate = obj.olddate || +new Date();
assign a new timeout if necessary


    if (typeof newTimeout === "number"){
        opts.timeout = newTimeout;
    } else if (newTimeout === 'destroy') {
        stop(elem);
        return this;
    } else if (newTimeout === 'getElapsedTime'){
        return (+new Date()) - obj.olddate;
    }
assign appropriate event handlers


    $(elem).on($.trim((opts.events+' ').split(' ').join('.idleTimer ')),handleUserEvent);


    obj.idle    = opts.idle;
    obj.enabled = opts.enabled;
    obj.timeout = opts.timeout;
set a timeout to toggle state. May wish to omit this in some situations


  if (opts.startImmediately) {
      obj.tId = setTimeout(toggleIdleState, obj.timeout);
  }
assume the user is active for the first x seconds.


    $.data(elem,'idleTimer',"active");
store our instance on the object


    $.data(elem,'idleTimerObj',obj);



}; // end of $.idleTimer()
v0.9 API for defining multiple timers.


$.fn.idleTimer = function(newTimeout,opts){
Allow omission of opts for backward compatibility


  if (!opts) {
    opts = {};
  }

    if(this[0]){
        $.idleTimer(newTimeout,this[0],opts);
    }

    return this;
};


})(jQuery);


JukeboxJS