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

@imaginary-maths/idler

v0.3.1

Published

Trigger actions when or while a web app is idle.

Downloads

11

Readme

Idler

This library manages the idle state of web apps. Several ways to interrupt the idle state are available and more are about to be added. Adding custom interrupters is easy as well.

Installation

NodeJS

npm install --save @imaginary-maths/idler

Then, use either

const { Idler } = require('idler');

or

import { Idler } from 'idler';

Browsers

Pick the .js module of your choice from the dist folder.

ES module

For modern browsers, use

<script type="module">
  import { Idler } from './dist/idler.modern.js';
</script>

For older browsers, use

<script type="module">
  import { Idler } from './dist/idler.umd.js';
</script>

UMD version

<script src="./dist/idler.umd.js"></script>
<script>
  const { Idler } = idler;
</script>

Usage

You usually need to import the main Idler class and at least one of the interrupters (PointerInterrupter, KeyboardInterrupter, ...). After initialization, you can add idle callbacks.

import { Idler, PointerInterrupter } from 'idler';

// Create a new idler
const myIdler = new Idler(new PointerInterrupter());

// Attach callbacks
const callbackOptions = {
  delay: 5 * 1000, // idle after not being interrupted for 5s
  duration: 60 * 1000, // not idle anymore after 1min in idle mode
  onBegin: () => console.log('begin'), // called after 5s without interruption
  onEnd: () => console.log('end'), // called after interrupted in idle mode
  interval: 10 * 1000, // repeat onInterval every 10s in idle mode
  onInterval: () => console.log('interval'), // called every 10s when in idle mode
  onAnimate: (ms) => console.log('animate', ms), // animate via requestAnimationFrame while in idle mode
  immediate: true, // start the first run immediately
};
const cbId = myIdler.addCallback(callbackOptions);

// Detach a callback
myIdler.removeCallback(cbId);

Creating custom interrupters

For very simple use cases, you should just call Idler.interrupt() whenever idle mode should be interrupted:

button.addEventListener('click', () => idler.interrupt());

However, more complex scenarios may demand separation of the code for easier reuse and maintenance. In this case, you should implement your own Interrupter, whose interface should look like this:

interface Interrupter {
  on(eventName: string, listener: Callback): unknown;
  off(eventName: string, listener: Callback): unknown;
}

The interrupter needs to call the listeners registered to the interrupted event on interruption. That's it.

This library provides InterrupterBase, which makes this particularly easy to implement through subclassing:

import InterrupterBase from 'idler';

class IntervalInterupter extends InterrupterBase {
  constructor() {
    // Interrupt every 60s
    setInterval(() => this.emitInterrupted(), 60 * 1000);
  }
}

If subclassing isn't appropriate, the CustomInterrupter class can be used:

import CustomInterrupter from 'idler';

function onInit(onInterrupted: () => void) {
  // Interrupt every 60s
  setInterval(onInterrupted, 60 * 1000);
}

const customInterrupter = new CustomInterrupter(onInit);

The onInit method is called only once during the initialization of CustomInterrupter.

Compilation

This library is built is written in TypeScript (see package.json for the TypeScript version).

To make any modifications re-compilation is necessary. You should install:

  • node, npm

Afterwards run the following in the command line to install dependencies:

npm install

For compiling the sources and generating the redistributable files run:

npm run build

During development, you can let the bundler watch the sources and rebuild automatically:

npm run dev

TODOs before reaching v1.0

  • [x] Idle animations (via requestAnimationFrame)
  • [x] Idle durations
  • [x] Interrupter for mouse, touch and pointer input
  • [ ] Interrupter for keyboard input
  • [ ] Interrupter for MIDI input
  • [ ] Interrupter for gamepad input
  • [ ] Check behaviour with respect to event bubbling/capture
  • [ ] Event filters for event based interrupters (pointers, MIDI)
  • [ ] Button filters for gamepad interrupter
  • [x] Custom interrupters without subclassing
  • [ ] Compatibility with Electron apps (for monitoring several renderer processes from the main process)
  • [ ] Full API doc

Credits

Developed by Christian Stussak, IMAGINARY gGmbH.

License

Copyright 2021 IMAGINARY gGmbH

Licensed under the Apache License, Version 2.0 (see LICENSE).