vue-user-timeout

A simple plugin to help with timeouts.

Getting started

Install

npm install --save vue-user-timeout

Add plugin to your entry file

import VueUserTimeout from 'vue-user-timeout'

Vue.use(VueUserTimeout, [options])

Usage

Can be accessed through this or Vue

this.$vueUserTimeout
// or
Vue.$vueUserTimeout

Basic Example

Add plugin to your entry file

import VueUserTimeout from 'vue-user-timeout'

// options are optional
Vue.use(VueUserTimeout, {
  timeout: 60000, // 10 min
  updateInterval: 500, // .5 sec
  events: ['resize', 'scroll', 'keydown', 'mousemove', 'click'],
  startOnload: false,
  destroyOnTimeout: true
})

Start the timeout after user authentication

this.$vueUserTimeout.start()

Set a listener on the timeout-completed event and set the callback to un-authenticate the user

this.$vueUserTimeout.$on('timeout-completed', <callback>)

Make sure to remove the listener when done

this.$vueUserTimeout.$off('timeout-completed', <callback>)

Optionally you could use the $once method

this.$vueUserTimeout.$once('timeout-completed', <callback>)

Methods

init() - Initializes the user timeout using the default options. Also adds event listeners for resetting the timeout. This is automatically called when the plugin is added, but can be called manually if the instance is ever destroyed.

this.$vueUserTimeout.init([options])

start() - Starts the user timeout interval.

this.$vueUserTimeout.start()

reset() - Resets the timeout and elapsed time to zero. It will automatically start again if destroyOnTimeout is false.

this.$vueUserTimeout.reset()

stop() - Stops the timeout and sets the elapsed time to zero.

this.$vueUserTimeout.stop()

pause() - Pauses the timeout and keeps the current elapsed time.

this.$vueUserTimeout.pause()

destroy() - Removes all event listeners and clears any options passed in on Init. init() maybe called again after destroy.

this.$vueUserTimeout.destroy()

Properties

| property | type | description | |:-----------------|------------------|--------------------| | mergedOptions | Object | Object containing options. User provided options override the default. | | startTime | Number | Unix timestamp set on start. | | currentTime | Number | Unix timestamp set at every updateInterval. | | elapsedTime | Number | Difference between currentTime and startTime in milliseconds. | | isActive | Boolean | true if the timer is currently running | | isInitialized | Boolean | true if the timeout has been initialized. |

Options

| property | description | default | values | |:------------|-------------|---------------|-------------------| | timeout | Time in milliseconds before timeout event. | 60000ms (10 min) | NumberMin: must be greater than (>) updateInterval Max: must be less than or equal to (<=) Number.MAX_SAFE_INTEGER | | updateInterval | How often to check if the timeout has been exceeded in milliseconds. | 500ms | NumberMin: must be greater than (>) 100ms Max: must be less than (<) timeout | | events | Array of events that will reset the timeout. Events are currently listened for on document. | ['resize', 'scroll', 'keydown', 'click', 'mousemove'] | Array<String> | | startOnload | When true the timeout will start once the plugin has been loaded. | false | Boolean | | destroyOnTimeout | When true all listeners will be removed upon completion of the timeout event. They can be added again using init(). | true | Boolean |

Events

Use the $on, $off, or $once methods to set listeners

| event | description | |:----------------------|-------------| | timeout-initialized | $vueUserTimeout has been initialized and is ready to use. | | timeout-completed | The timeout has completed. | | timeout-started | The timeout has started. | | timeout-stopped | The timeout has been stopped. On start it will begin from 0. | | timeout-reset | The timeout has been stopped. On start it will begin from 0. If destroyOnTimeout is false it will have started the timeout. | | timeout-paused | The timeout has been paused. On start it will continue where it left off. | | timeout-destroyed | $vueUserTimeout listeners have been removed and options reset. |

Caveats

You cannot call timeout methods on button click if 'click' is a reset event.

Possible Features

• [ ] Ability to target specific elements to listen for events
• [ ] Directive to be added to elements
• [ ] Store (Vuex) integration
• [ ] SessionStorage support
• [ ] Warning option/event