activity-loop

Checks whether a user interaction happened on the given element.

It's useful when you want to change an element's state when the user makes some interactions on the given element like clicking on it, moving the mouse cursor on the surface, etc. Or the other way round, you want to change the state when the user does nothing since the latest activity happened.

Install

$ npm i activity-loop --save

Usage

import loop from 'activity-loop'

loop(document.getElementById('video-player'), {
  activity: () => showControls(),
  inactivity: () => hideControls()
})

API

loop(el, [options])

el

Type: HTMLElement required

options

Type: Object Default: {}

Options

activity

Callback function which is invoked when the user does some interactions on the given element's surface.

Type: Function

inactivity

Type: Function

Callback function which is invoked when the user does nothing since the latest activity

timeout

Type: Number Default: 1500

Timeout value in milliseconds. For example if it's 3000, it means that inactivity will occur if the user doesn't have any interactions within 3 seconds.

Note: the timer restarts every time when activity happens.

Methods

.destroy()

If you don't need the loop instance, it's recommended to call destroy() method to avoid memory leaks.

.pause([paused], [options])

paused

Whether the loop has to be paused

Type: Boolean Default: true

options

Type: Object Default: {}

options.activity

You can enforce an immediate activity event to be fired after coming back from paused mode

Type: Boolean Default: false

The loop instance is an event emitter so you can do the following:

const l = loop(el)

l.on('activity', () => {
  // do something
})
l.on('inactivity', () => {
  // do something
})

For further information, read the docs.

Tests

$ npm test

Build

$ npm run build

Build the example

$ npm run build-example

Contributing

Pull requests are welcome! ;)

License

MIT