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
Vue
Usage
Can be accessed through this
or Vue
this$vueUserTimeout// orVue$vueUserTimeout
Basic Example
Add plugin to your entry file
// options are optionalVue
Start the timeout after user authentication
this$vueUserTimeoutstart
Set a listener on the timeout-completed event and set the callback to un-authenticate the user
this$vueUserTimeout
Make sure to remove the listener when done
this$vueUserTimeout
Optionally you could use the $once
method
this$vueUserTimeout
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
start() - Starts the user timeout interval.
this$vueUserTimeoutstart
reset() - Resets the timeout and elapsed time to zero. It will automatically start again if destroyOnTimeout
is false.
this$vueUserTimeout
stop() - Stops the timeout and sets the elapsed time to zero.
this$vueUserTimeout
pause() - Pauses the timeout and keeps the current elapsed time.
this$vueUserTimeout
destroy() - Removes all event listeners and clears any options passed in on Init. init()
maybe called again after destroy
.
this$vueUserTimeout
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