npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-idletimer

v1.0.0

Published

Package reupload by rezky from thorst (github) forked from nzakas/yui-misc

Downloads

571

Readme

jQuery Idle Timer Plugin

Build Status Dependency Status devDependency Status Coverage Status

Demo

https://thorst.github.io/jquery-idletimer/index.html

Download

Purpose

Fires a custom event when the user is "idle". Idle is defined by not...

  • moving the mouse
  • scrolling the mouse wheel
  • using the keyboard

Usage

There are two ways to instantiate. Either statically, or on an element. 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. Instantiate returns jQuery for chaining.

$(function() {
    // binds to document - shorthand
    $.idleTimer();

    // binds to document - explicit
    $( document ).idleTimer();

    // bind to different element
    $( "#myTextArea" ).idleTimer();
});

Options

You can configure the settings several ways

$(function() {
    // idleTimer() with all defaults
    $( document ).idleTimer( );

    // idleTimer() takes an optional numeric argument that defines just the idle timeout
    // timeout is in milliseconds
    $( document ).idleTimer( 10000 );

    // idleTimer() takes an optional object argument that defines any/all setting
    $( document ).idleTimer( {
        timeout:10000, 
        idle:true
    });

    /*
    *   Here are the possible settings
    *   you can omit any or all of them
    */

    // indicates if the user is idle
    idle [default:false] 

    // the timeout period
    timeout [default:30000] 

    // activity is any one of these events
    events [default:'mousemove keydown wheel DOMMouseScroll mousewheel mousedown touchstart touchmove MSPointerDown MSPointerMove']

    // If set, the use a localStorage key to sync activity across browser tabs/windows
    timerSyncId [default:null]
});

Events

When a users state changes a custom events get triggered. There are several parameters passed to your handler for you to use.

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

    $( document ).on( "active.idleTimer", function(event, elem, obj, triggerevent){
        // function you want to fire when the user becomes active again
    });

    /*
    *   Here are the arguments
    */
    // event
    // will be either idle.idleTimer or active.idleTimer
    // use event.stopPropagation(); to stop element from bubbling up to document

    // elem
    // is the element that the event was triggered on

    // obj
    // is a copy of the internal data used by idleTimer

    // triggerevent
    // is the initial event that triggered the element to become active
    // obviously for idle state this will be undefined
});

Methods

There are several methods to invoke

$(function() {
    // stop the timer, removes data, removes event bindings
    // to come back from this you will need to instantiate again
    // returns: jQuery
    $( document ).idleTimer("destroy");

    // save remaining time, and stops the timer
    // returns: jQuery
    $( document ).idleTimer("pause");

    // starts timer with remaining time
    // returns: jQuery
    $( document ).idleTimer("resume");

    // restore initial idle state, and restart the timer
    // returns: jQuery
    $( document ).idleTimer("reset");

    // get time left until idle, if idle return 0
    // returns: number
    $( document ).idleTimer("getRemainingTime");

    // get time elapsed (in ms) since the user went idle/active
    // if idle, how have you been idle, if active, how long have you been active
    // returns: number
    $( document ).idleTimer("getElapsedTime");

    // get time last active event fired
    // returns: number
    $( document ).idleTimer("getLastActiveTime");

    // you can also query if it's "idle" or "active"
    // returns: bool
    $( document ).idleTimer("isIdle");
});

Using multiple idle monitors

When using multiple idle monitors on the same element, a unique id needs be used for each one.

####Options

$(function() {
    // idleTimer() takes an optional string argument that allows using multiple timers on the same element
    $( document ).idleTimer( 10000, "someUniqueId" );
    // equivalent
    $.idleTimer(10000, document, "someUniqueId");
});

####Methods

$(function() {
    var uniqueId = "someUniqueString";
    $( document ).idleTimer("pause", uniqueId); // same for other methods like destroy, reset, ...
});

####Events

$(function() {
    var uniqueId = "someUniqueString";
    $( document ).on( "idle.idleTimer" + uniqueId, function(event, elem, obj){ // same for the active event
        // function you want to fire for the idle timer with matching unique id on that element
    });
});

Pre-Req

jQuery 1.7 (tested with 1.11.0)

Intended Browser Support

####Desktop

  • =IE8

  • Firefox n-1
  • Chrome n-1
  • Safari n

####Mobile

  • iOS n-1
  • Android (version?)
  • Windows Phone IEMobile/10.0

Links

Playground

Version History

| Version | Author | Released | Links | | --------------------------------------- |-----------------| ---------- | ----------------------------- | | 1.0.0 | Todd Horst | 03/10/2014 | Change Log - Breaking Changes | | 0.9.3 | Mike Sherov | 08/04/2013 |

Author History

Bug?

Please create a fiddle and submit a ticket