Add startAppIdleTimeout, stopAppIdleTimeout, and resetAppIdleTimeout methods to mixin

[alejandroiglesias]

Adds startAppIdleTimeout, stopAppIdleTimeout, and resetAppIdleTimeout methods to the mixin.

• startAppIdleTimeout internally calls the start method on the IdleJs instance.
• stopAppIdleTimeout internally calls the stop method on the IdleJs instance.
• resetAppIdleTimeout internally calls the resetTimeout method on the IdleJs instance.

The start, stop, and resetTimeout methods on the IdleJs instance were added on newer idlejs versions, so I had to upgrade the dependency as well.

startAppIdleTimeout and stopAppIdleTimeout

Allow to start and stop the idle timeout under certain conditions, for example, toggling it when toggling fullscreen:

watch: {
    isFullscreen(value) {
        value ? this.stopAppIdleTimeout() : this.startAppIdleTimeout()
    },
}

resetAppIdleTimeout

Allows, for example, the following use case (but not limited to): consider an app embedded in iframes, you can display an idle overlay (with pointer-events:none) that allows the users to keep scrolling the host page until they type/click/tap into the app in the iframe. Then once the app becomes active (overlay disappears), you also register an event listener to the mousemove event and fire a function to reset the timeout and keep the app active.

// app.js
Vue.use(IdleVue, {
    //...
    events: ['keydown', 'mousedown', 'touchstart'],
})

Notice not including mousemove on lib install, so the app will not become active while moving the mouse and until the user types/clicks/taps.
Then when the app becomes active, we add an event listener for the mousemove event to call a method that will reset the timeout to keep the app active:

// component

onActive() {
    // If app is active, add extra event listener to keep app non-idle with mousemove.
    window.addEventListener('mousemove', this._throttledMousemoveHandler)
},
onIdle() {
    // If app is idle, remove mousemove listener.
    window.removeEventListener('mousemove', this._throttledMousemoveHandler)
},
methods: {
    _throttledMousemoveHandler: lodash.throttle(function() {
        this.resetAppIdleTimeout()
    }, 250),
}

[andrewjackroyd]

Hello. When will this be merged?
Thanks

[alejandroiglesias]

@andrewjackroyd, unfortunately, I haven't got any news from the maintainers yet.

[gabrielstuff]

hello sorry for the silence. will update you soon (eg. tonight)

…

On Sun, Jul 21, 2019 at 4:39 AM Alejandro García Iglesias < ***@***.***> wrote: @andrewjackroyd <https://github.com/andrewjackroyd>, unfortunately, I haven't got any news from the maintainers yet. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#38?email_source=notifications&email_token=AACFS2JRMFFDDEBBCWZFPFLQAPD5JA5CNFSM4HL7XB4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2NZWSA#issuecomment-513514312>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACFS2PWYBUEEWYVPXDA76LQAPD5JANCNFSM4HL7XB4A> .

-- *Soixante circuits* *Provocative experiences* <https://p.dsi.sc/5g> M. Gabriel Delattre Mb: +33 6 16 38 10 80 Tw: @gabrielstuff <https://p.dsi.sc/5l> Fb: /gdelattre <https://p.dsi.sc/5k> gabriel@soixantecircuits.fr <mass@soixantecircuits.fr?subject=%F0%9F%91%8D-%20Who%20you%20gonna%20call?> FR : 31 rue Louis Blanc - 75010 Paris Facebook <https://www.facebook.com/soixantecircuits/> | Twitter <https://twitter.com/soixanteci?lang=fr> | Instagram <https://www.instagram.com/soixantecircuits/> ♻️ *Adoptez l'éco-attitude.* N'imprimez ce mail que si c'est vraiment nécessaire.

[alejandroiglesias]

@gabrielstuff any updates?