The motivation for this module was to provide a mechanism for monitoring how a user might interact with an input text box, and fire events when the user transitions from idle to active to busy.
The intention was to use it within a video annotation web application called Docuevid, to decide whether or not to pause, start or slow down a video based on a users activity, thus aiding the annotation process.
Install ClickClack as an npm module and save it to your package.json file as a dependency:
$ npm install clickclack --save
The ClickClack constructor accepts an object containing five keys. The element key is the only one that is mandatory, and must be of the type HTMLElement. The rest are optional and will fall-back to the defaults specified in the API documentation below.
ClickClack extends the EventEmitter so you'll have a familiar Pub/Sub API for listening and responding to events.
const ClickClack = require('clickclack');
const textarea = document.querySelector('.textarea');
const watcher = new ClickClack({
element: textarea,
activeEvent: 'keypress',
idleEvent: 'blur',
idleDelay: 3000,
busyDelay: 10000,
blacklistedKeys: ['v', 'alt+m', 'shift+s', 'shift+s+d', '1', '2'],
});
watcher.on('active', () => {
console.log('active');
});
watcher.on('idle', () => {
console.log('idle');
});
watcher.on('busy', () => {
console.log('busy');
});Type: HTMLElement
HTMLElement that will be monitored for user interactions.
Type: string
Default: keypress
HTMLElement event that will define user activity.
Type: string
Default: blur
HTMLElement event that will define user inactivity.
Type: number (milliseconds)
Default: 3000
Duration of inactivity needed, after being active, to fire an idle event.
Type: number (milliseconds)
Default: 10000
Duration of activity needed to fire a busy event.
Type: array (string)
Default: []
List of characters and/or key combinations that do not constitute user activity.
MIT © icodejs ltd