Skip to content

Commit 3cd28f2

Browse files
author
jrtaylor
committed
docs(readme.md): documention updates
1 parent 1ff7357 commit 3cd28f2

File tree

1 file changed

+46
-15
lines changed

1 file changed

+46
-15
lines changed

README.md

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Add plugin to your entry file
1414
```javascript
1515
import VueUserTimeout from 'vue-user-timeout'
1616

17-
Vue.use(VueUserTimeout, [[options](#options)])
17+
Vue.use(VueUserTimeout, [options])
1818
```
1919

2020
## Usage
@@ -26,18 +26,43 @@ this.$vueUserTimeout
2626
Vue.$vueUserTimeout
2727
```
2828

29-
## Example
29+
## Basic Example
3030

31-
Start the timeout after user authentication
31+
Add plugin to your entry file
3232
```javascript
33-
this.$vueUserTimeout.start();
33+
import VueUserTimeout from 'vue-user-timeout'
34+
35+
// options are optional
36+
Vue.use(VueUserTimeout, {
37+
timeout: 60000, // 10 min
38+
updateInterval: 500, // .5 sec
39+
events: ['resize', 'scroll', 'keydown', 'mousemove', 'click'],
40+
startOnload: false,
41+
destroyOnTimeout: true
42+
})
3443
```
3544

45+
Start the timeout after user authentication
46+
```javascript
47+
this.$vueUserTimeout.start()
48+
```
49+
Set a listener on the timeout-completed [event](#events) and set the callback to un-authenticate the user
50+
```javascript
51+
this.$vueUserTimeout.$on('timeout-completed', <callback>)
52+
```
53+
Make sure to remove the listener when done
54+
```javascript
55+
this.$vueUserTimeout.$off('timeout-completed', <callback>)
56+
```
57+
Optionally you could use the `$once` method
58+
```javascript
59+
this.$vueUserTimeout.$once('timeout-completed', <callback>)
60+
```
3661

3762
## Methods
38-
**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.*
63+
**init()** - Initializes the user timeout using the default [options](#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.*
3964
```javascript
40-
this.$vueUserTimeout.init([[options](#options)])
65+
this.$vueUserTimeout.init([options])
4166
```
4267
**start()** - Starts the user timeout interval.
4368
```javascript
@@ -60,6 +85,16 @@ this.$vueUserTimeout.pause()
6085
this.$vueUserTimeout.destroy()
6186
```
6287

88+
## Properties
89+
| property | type | description |
90+
|:-----------------|------------------|--------------------|
91+
| **mergedOptions** | `Object` | Object containing options. User provided options override the default. |
92+
| **startTime** | `Number` | Unix timestamp set on start. |
93+
| **currentTime** | `Number` | Unix timestamp set at every updateInterval. |
94+
| **elapsedTime** | `Number` | Difference between currentTime and startTime in milliseconds. |
95+
| **isActive** | `Boolean` | `true` if the timer is currently running |
96+
| **isInitialized** | `Boolean` | `true` if the timeout has been initialized. |
97+
6398
## Options
6499
| property | description | default | values |
65100
|:------------|-------------|---------------|-------------------|
@@ -70,8 +105,10 @@ this.$vueUserTimeout.destroy()
70105
| **destroyOnTimeout** | When `true` all listeners will be removed upon completion of the timeout event. *They can be added again using `init()`*. | `true` | `Boolean` |
71106

72107
## Events
108+
Use the `$on`, `$off`, or `$once` methods to set listeners
109+
73110
| event | description |
74-
|-----------------------|-------------|
111+
|:----------------------|-------------|
75112
| `timeout-initialized` | $vueUserTimeout has been initialized and is ready to use. |
76113
| `timeout-completed` | The timeout has completed. |
77114
| `timeout-started` | The timeout has started. |
@@ -83,15 +120,9 @@ this.$vueUserTimeout.destroy()
83120
## Caveats
84121
You cannot call timeout methods on button click if 'click' is a reset event.
85122

86-
## TODO
87-
- [ ] Listen for events. Handle only events user specifies
88-
* Click
89-
* Mouse move
90-
* etc
123+
### Possible Features
124+
- [ ] Ability to target specific elements to listen for events
91125
- [ ] Directive to be added to elements
92126
- [ ] Store (Vuex) integration
93127
- [ ] SessionStorage support
94-
- [ ] Emit events/call a defined function that the user can extend/override
95-
- [ ] Linting
96-
- [ ] Tests
97128
- [ ] Warning option/event

0 commit comments

Comments
 (0)