feat(usertimeout): timer functionality

Author: jrtaylor

.github/workflows/npmpublish-alpha.yml

@@ -32,17 +32,17 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_REGISTRY_TOKEN}}
 
-  publish-gpr:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://npm.pkg.github.com/
-          scope: '@jrtnq514'
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.GITHUB_PACKAGES_TOKEN}}
+#  publish-gpr:
+#    needs: build
+#    runs-on: ubuntu-latest
+#    steps:
+#      - uses: actions/checkout@v1
+#      - uses: actions/setup-node@v1
+#        with:
+#          node-version: 12
+#          registry-url: https://npm.pkg.github.com/
+#          scope: '@jrtnq514'
+#      - run: npm ci
+#      - run: npm publish
+#        env:
+#          NODE_AUTH_TOKEN: ${{secrets.GITHUB_PACKAGES_TOKEN}}

README.md

@@ -1,15 +1,45 @@
 # 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
+
+
+## Methods
+
+## Options
+| property | description | default | values |
+|:------------|-------------|---------------|-------------------|
+| **timeout** | Time in milliseconds before timeout event. | 60000ms (10 min) | `Number`<br>*Min*: must be greater than (>) `updateInterval`<br> *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`<br>*Min*: must be greater than (>) 100ms<br> *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>`<br> |
+| **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
+
 ## TODO
-* Listen for events. Handle only events user specifies
+- [ ] Listen for events. Handle only events user specifies
     * Click
     * Mouse move
     * etc
-* Directive to be added to elements
-* Store (Vuex) integration
-* SessionStorage support
-* Emit events/call a defined function that the user can extend/override
-* Linting
-* Tests
-* Transpiling...? or let the user's project decide
+- [ ] Directive to be added to elements
+- [ ] Store (Vuex) integration
+- [ ] SessionStorage support
+- [ ] Emit events/call a defined function that the user can extend/override
+- [ ] Linting
+- [ ] Tests
+- [ ] Warning option/event

dist/vue-user-timeout.min.js

@@ -54,7 +54,7 @@
     "webpack-stream": "^5.2.1"
   },
   "peerDependencies": {
-    "vue": ">= 1.0.0"
+    "vue": ">= 2.0.0"
   },
   "config": {
     "commitizen": {

package.json

@@ -4,6 +4,7 @@ const VueUserTimeout = {
   // eslint-disable-next-line no-unused-vars
   install(Vue, options = {}) {
     console.log('VueUserTimeout Installed');
+    userTimeout.init(Vue, options);
     // eslint-disable-next-line no-param-reassign
     Vue.prototype.$userTimeout = userTimeout;
     // eslint-disable-next-line no-param-reassign

src/index.js

@@ -1,11 +1,113 @@
-export default {
+const userTimeout = {
   // properties
-  test: 'Test',
+  Vue: null,
+  mergedOptions: null,
+  timerInterval: null,
+  startTime: null,
+  currentTime: null,
+  active: false,
 
   // methods
-  init: options => {
+  init: (Vue, options) => {
+    userTimeout.Vue = Vue;
+    const defaultOptions = {
+      timeout: 10000, // 10 min
+      updateInterval: 500, // 1 sec
+      events: ['resize', 'scroll', 'keydown', 'click', 'mousemove'],
+      startOnload: false,
+      destroyOnTimeout: true,
+    };
+
     if (options) {
-      console.log('yay');
+      userTimeout.mergedOptions = {
+        ...defaultOptions,
+        ...options,
+      };
+      userTimeout.active = userTimeout.mergedOptions.startOnload;
     }
+
+    userTimeout
+      .addListeners()
+      .then(() => {
+        // start the time
+        if (userTimeout.mergedOptions.startOnload) {
+          userTimeout.start();
+        }
+      })
+      .catch(() => {
+        console.log('There was an error adding event listeners');
+      });
+  },
+
+  addListeners: () => {
+    return new Promise((resolve, reject) => {
+      try {
+        userTimeout.mergedOptions.events.forEach(evnt => {
+          document.addEventListener(evnt, userTimeout.reset);
+        });
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  start: () => {
+    if (userTimeout.startTime === null) {
+      userTimeout.startTime = Date.now();
+    }
+    userTimeout.active = true;
+    userTimeout.timerInterval = setInterval(() => {
+      userTimeout.currentTime = Date.now();
+      const elapsedTime = userTimeout.currentTime - userTimeout.startTime;
+      console.log(`tick tick ${(elapsedTime / 1000).toFixed(3)}`);
+      if (elapsedTime >= userTimeout.mergedOptions.timeout) {
+        // emit event
+        console.log(`your time is up ${(elapsedTime / 1000).toFixed(3)}`);
+        userTimeout.stop();
+        if (userTimeout.mergedOptions.destroyOnTimeout) {
+          userTimeout.active = false;
+          userTimeout.destroy();
+        }
+      }
+    }, userTimeout.mergedOptions.updateInterval);
+  },
+
+  reset: () => {
+    console.log('reset');
+    userTimeout.stop();
+    if (userTimeout.active) {
+      userTimeout.start();
+    }
+  },
+
+  stop: () => {
+    clearInterval(userTimeout.timerInterval);
+    userTimeout.startTime = null;
+  },
+
+  pause: () => {
+    clearInterval(userTimeout.timerInterval);
+    console.log(
+      `currently paused at ${(
+        (userTimeout.currentTime - userTimeout.startTime) /
+        1000
+      ).toFixed(3)}`
+    );
+  },
+
+  destroy: () => {
+    return new Promise((resolve, reject) => {
+      try {
+        userTimeout.mergedOptions.events.forEach(evnt => {
+          document.removeEventListener(evnt, userTimeout.reset);
+        });
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
   },
 };
+
+export default userTimeout;