Skip to content

jrtnq514/vue-user-timeout

Repository files navigation

vue-user-timeout

A simple plugin to help with timeouts.

codecov semantic-release npm version

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) Number
Min: 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 Number
Min: 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