JSPM

// import singleton global bound to the `window`
import ifvisible from '@rosskevin/ifvisible'

// import the object and instantiate it yourself
import { IfVisible } from '@rosskevin/ifvisible'
window.ifvisible = new IfVisible(window, document)

// If page is visible right now
if (ifvisible.now()) {
  // Display pop-up
  openPopUp()
}

// You can also check the page status using `now` method
if (!ifvisible.now('hidden')) {
  // Display pop-up if page is not hidden
  openPopUp()
}

// Possible statuses are:
// idle: when user has no interaction
// hidden: page is not visible
// active: page is visible and user is active

ifvisible.on('blur', function () {
  // example code here..
  animations.pause()
})

ifvisible.on('focus', function () {
  // resume all animations
  animations.resume()
})

ifvisible.on('idle', function () {
  // Stop auto updating the live data
  stream.pause()
})

ifvisible.on('wakeup', function () {
  // go back updating data
  stream.resume()
})

ifvisible.setIdleDuration(120) // Page will become idle after 120 seconds

ifvisible.idle() // will put page in a idle status

ifvisible.idle(function () {
  // This code will work when page goes into idle status
})

// other methods are
ifvisible.blur() // will trigger idle event as well
ifvisible.idle()

ifvisible.focus() // Will trigger wakeup event as well
ifvisible.wakeup()

ifvisible.off('idle', triggeredFunction) // will remove only triggeredFunction from being tiggered on idle
ifvisible.off('idle') // will remove all events triggered on idle

// works with other events:
ifvisible.off('blur')
ifvisible.off('wakeup')
ifvisible.off('focus')

// If page is visible run this function on every half seconds
ifvisible.onEvery(0.5, function () {
  // Do an animation on the logo only when page is visible
  animateLogo()
})