💎 Rework package around Vue.use()

Author: Olivier FAURE

Idle.vue

@@ -0,0 +1,86 @@
+'use strict'
+
+import IdleJs from 'idle-js'
+import IdleView from "./src/Idle"
+
+export default {
+ IdleView,
+
+ install (Vue, options) {
+ const {
+ eventEmitter,
+ store = Vue.$store,
+
+ idleTime = 60 * 1000,
+ events = ['mousemove', 'keydown', 'mousedown', 'touchstart'],
+ keepTracking = true,
+ startAtIdle = true,
+ moduleName = 'idle'
+ } = options || {}
+
+ if (!options) {
+ throw Error("`options` must be a valid JS object")
+ }
+
+ if (!eventEmitter) {
+ throw Error("`options.eventEmitter` must be a valid Vue instance")
+ }
+ if (store === undefined) {
+ throw Error("`options.store` is undefined\n"
+ + "`options.store` must be null or a valid Vuex store instance")
+ }
+
+ store && store.registerModule(moduleName, {
+ state: { isIdle: false },
+
+ mutations: {
+ [`${moduleName}/IDLE_CHANGED`]: function (state, isIdle) {
+ state.isIdle = isIdle
+ }
+ }
+ })
+
+ const idle = new IdleJs({
+ idle: idleTime,
+ events,
+ keepTracking,
+ startAtIdle,
+
+ onIdle: () => {
+ eventEmitter.$emit(`${moduleName}_onIdle`)
+ store && store.commit(`${moduleName}/IDLE_CHANGED`, true)
+ },
+ onActive: () => {
+ eventEmitter && eventEmitter.$emit(`${moduleName}_onActive`)
+ store && store.commit(`${moduleName}/IDLE_CHANGED`, false)
+ }
+ })
+ idle.start()
+
+ Vue.component("IdleView", IdleView)
+
+ Vue.mixin({
+ data () { return {
+ idleVue_onIdle: null,
+ idleVue_onActive: null
+ }},
+ created () {
+ const options = this.$options
+
+ this.idleVue_onIdle = () => options.onIdle && options.onIdle()
+ this.idleVue_onActive = () => options.onActive && options.onActive()
+ eventEmitter.$on(`${moduleName}_onIdle`, this.idleVue_onIdle)
+ eventEmitter.$on(`${moduleName}_onActive`, this.idleVue_onActive)
+ },
+ destroyed () {
+ eventEmitter.$off(`${moduleName}_onIdle`, this.idleVue_onIdle)
+ eventEmitter.$off(`${moduleName}_onActive`, this.idleVue_onActive)
+ },
+ computed: {
+ isAppIdle () {
+ return store.state.idle
+ }
+ }
+ })
+ }
+}

index.js

@@ -1,13 +1,15 @@
 {
  "name": "idle-vue",
- "version": "1.0.1",
+ "version": "2.0.0",
  "description": "Vue component wrapper for idle-js",
  "repository": "https://github.com/soixantecircuits/idle-vue.git",
  "author": "Olivier FAURE <olivier.faure@epitech.eu>",
  "license": "MIT",
- "main": "Idle.vue",
+ "main": "index.js",
  "dependencies": {
- "idle-js": "^0.1.0",
+ "idle-js": "^0.1.0"
+ },
+ "devDependencies": {
  "vue": "^2.3.3",
  "vuex": "^2.3.1"
  }

package.json

@@ -0,0 +1,74 @@
+<template>
+ <div class="idle-view" :class="{active: isAppIdle}">
+ <div class="overlay" :class="{active: isAppIdle}"></div>
+ <sprite spriteId="touch"
+ :spriteSrc="require('./assets/touch.png')"
+ :spriteW='180'
+ :spriteH='215'
+ ref='sprite'
+ ></sprite>
+ </div>
+</template>
+
+<script>
+'use strict'
+
+import Sprite from './Sprite'
+
+export default {
+ components: {
+ Sprite
+ },
+ onIdle () {
+ this.$refs.sprite.play()
+ },
+ onActive () {
+ this.$refs.sprite.stop()
+ }
+}
+
+</script>
+
+<style>
+ .idle-vue {
+ display: none;
+ }
+ .idle-vue.active {
+ pointer-events: all;
+ display: block;
+ }
+ .idle-vue .sprite {
+ top: 700px;
+ bottom: 0px;
+ margin: auto;
+ position: absolute;
+ height: 10px;
+ width: 180px;
+ left: 0px;
+ right: 0px;
+ z-index: 9999;
+ -webkit-transform: scale(0.7);
+ }
+ .idle-vue .overlay {
+ width: 100vw;
+ height: 100vh;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ background: #000;
+ pointer-events:none;
+ z-index: 8888;
+ opacity: 0;
+ /*-webkit-animation: SlowMo 5s cubic-bezier(0.77, 0, 0.175, 1) infinite;*/
+ -webkit-transition: opacity 800ms cubic-bezier(0.77, 0, 0.175, 1);
+ }
+ .idle-vue .overlay.active {
+ pointer-events: all;
+ opacity: 0.6;
+ }
+ @-webkit-keyframes SlowMo {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+ }
+</style>