webpack-bootstrap-ui-kit/src/js/main/visibility.js

// browser tab visibility state detection

import Events from '../_events'
import Consts from '../_consts'

export default ((W) => {
  const NAME = '_main.visibility'
  const D = document
  const BODY = D.body

  // update visibility state
  // get browser window visibility preferences
  // Opera 12.10, Firefox >=18, Chrome >=31, IE11
  const HiddenName = 'hidden'
  const VisibilityChangeEvent = 'visibilitychange'

  D.addEventListener(VisibilityChangeEvent, () => {
    if (D.visibilityState === HiddenName) {
      console.log(`${NAME}: Tab: hidden`)

      BODY.classList.add('is-hidden')
      BODY.classList.remove('is-focused')

      W.dispatchEvent(new Event(Events.TABHIDDEN))
    } else {
      console.log(`${NAME}: Tab: focused`)

      BODY.classList.add('is-focused')
      BODY.classList.remove('is-hidden')

      W.dispatchEvent(new Event(Events.TABFOCUSED))
    }
  })
})(window)