Merge branch 'static'

Author: linhntaim

package-lock.json

@@ -14,6 +14,7 @@
         "core-js": "^3.8.3",
         "js-cookie": "^3.0.1",
         "locutus": "^2.0.16",
+        "mitt": "^3.0.1",
         "vue": "^2.6.14",
         "vue-i18n": "^8.27.2",
         "vue-router": "^3.5.1",

package.json

@@ -14,6 +14,9 @@ export class Fresh extends Middleware
             await this.restoreFromCache()
             await this.restoreFromCookie()
         }
+        else {
+            this.app.$timer.offAll()
+        }
         next()
     }
 

src/app/middlewares/fresh.js

@@ -0,0 +1,3 @@
+import {createBus} from '@/app/support/bus'
+
+export const bus = createBus()

src/app/providers/bus/index.js

@@ -9,6 +9,9 @@ import {i18n, localization} from './settings'
 import {store} from './store'
 import {router} from './router'
 import {url} from './url'
+import {bus} from './bus'
+import {pageVisibility} from './page-visibility'
+import {timer} from './timer'
 
 // Should be maintained in order
 export const providers = {
@@ -24,4 +27,7 @@ export const providers = {
     store,
     router,
     url,
+    bus,
+    pageVisibility,
+    timer,
 }

src/app/providers/index.js

@@ -0,0 +1,3 @@
+import {createPageVisibility} from '@/app/support/page-visibility'
+
+export const pageVisibility = createPageVisibility()

src/app/providers/page-visibility/index.js

@@ -0,0 +1,3 @@
+import {createTimer} from '@/app/support/timer'
+
+export const timer = createTimer()

src/app/providers/timer/index.js

@@ -0,0 +1,16 @@
+import {registerGlobalPropertyFactory} from '@/app/support/helpers'
+import mitt from 'mitt'
+
+export function createBus() {
+    return {
+        installer: {
+            install(Vue) {
+                registerGlobalPropertyFactory(
+                    Vue,
+                    '$bus',
+                    () => mitt(),
+                )
+            },
+        },
+    }
+}

src/app/support/bus/create-bus.js

@@ -0,0 +1 @@
+export * from './create-bus'

src/app/support/bus/index.js

@@ -0,0 +1,13 @@
+export function createPageVisibility() {
+    return {
+        installer: {
+            install(Vue) {
+                document.addEventListener('visibilitychange', () => {
+                    if (document.visibilityState === 'visible') {
+                        Vue.prototype.$bus.emit('pageVisible')
+                    }
+                })
+            },
+        },
+    }
+}

src/app/support/page-visibility/create-page-visibility.js

@@ -0,0 +1 @@
+export * from './create-page-visibility'

src/app/support/page-visibility/index.js

@@ -0,0 +1,16 @@
+import {registerGlobalPropertyFactory} from '@/app/support/helpers'
+import {Timer} from './timer'
+
+export function createTimer() {
+    return {
+        installer: {
+            install(Vue) {
+                registerGlobalPropertyFactory(
+                    Vue,
+                    '$timer',
+                    () => new Timer(),
+                )
+            },
+        },
+    }
+}

src/app/support/timer/create-timer.js

@@ -0,0 +1 @@
+export * from './create-timer'

src/app/support/timer/index.js

@@ -0,0 +1,89 @@
+export class Timer
+{
+    constructor() {
+        this.timeouts = {}
+        this.intervals = {}
+        this.animations = {}
+    }
+
+    registerTimeout(handler, timeout = null, ...args) {
+        const id = window.setTimeout(handler, timeout, ...args)
+        this.timeouts[id] = true
+        return id
+    }
+
+    offTimeout(id = 0) {
+        if (id) {
+            if (id in this.timeouts) {
+                window.clearTimeout(id)
+                delete this.timeouts[id]
+            }
+            return this
+        }
+        return this.offAllTimeouts()
+    }
+
+    offAllTimeouts() {
+        Object.keys(this.timeouts).forEach(id => {
+            window.clearTimeout(Number(id))
+            delete this.timeouts[id]
+        })
+        return this
+    }
+
+    registerInterval(handler, timeout = null, ...args) {
+        const id = window.setInterval(handler, timeout, ...args)
+        this.intervals[id] = true
+        return id
+    }
+
+    offInterval(id = 0) {
+        if (id) {
+            if (id in this.intervals) {
+                window.clearInterval(id)
+                delete this.intervals[id]
+            }
+            return this
+        }
+        return this.offAllIntervals()
+    }
+
+    offAllIntervals() {
+        Object.keys(this.intervals).forEach(id => {
+            window.clearInterval(Number(id))
+            delete this.intervals[id]
+        })
+        return this
+    }
+
+    registerAnimation(handler) {
+        const id = window.requestAnimationFrame(handler)
+        this.animations[id] = true
+        return id
+    }
+
+    offAnimation(id = 0) {
+        if (id) {
+            if (id in this.animations) {
+                window.cancelAnimationFrame(id)
+                delete this.animations[id]
+            }
+            return this
+        }
+        return this.offAllTimeouts()
+    }
+
+    offAllAnimations() {
+        Object.keys(this.animations).forEach(id => {
+            window.cancelAnimationFrame(Number(id))
+            delete this.animations[id]
+        })
+        return this
+    }
+
+    offAll() {
+        return this.offAllTimeouts()
+            .offAllIntervals()
+            .offAllAnimations()
+    }
+}