Skip to content

Conversation

@alejandroiglesias
Copy link

@alejandroiglesias alejandroiglesias commented May 10, 2019

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), }
@alejandroiglesias alejandroiglesias force-pushed the add-resetAppIdleTimeout-method branch from ea86c82 to 4937aff Compare May 10, 2019 05:07
@alejandroiglesias alejandroiglesias changed the title Add resetAppIdleTimeout method to mixin Add startAppIdleTimeout, stopAppIdleTimeout, and resetAppIdleTimeout method to mixin May 12, 2019
@alejandroiglesias alejandroiglesias changed the title Add startAppIdleTimeout, stopAppIdleTimeout, and resetAppIdleTimeout method to mixin Add startAppIdleTimeout, stopAppIdleTimeout, and resetAppIdleTimeout methods to mixin May 12, 2019
@andrewjackroyd
Copy link

Hello. When will this be merged?
Thanks

@alejandroiglesias
Copy link
Author

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

@gabrielstuff
Copy link
Member

gabrielstuff commented Jul 25, 2019 via email

@alejandroiglesias
Copy link
Author

@gabrielstuff any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants