visibly.coffee

window.visibly = 
    b: null,
    q: document,
    p: undefined,
    prefixes: ['webkit', 'ms']
    props: ['VisibilityState', 'visibilitychange', 'Hidden']
    m: ['focus', 'blur']
    visibleCallbacks: []
    hiddenCallbacks: []
    _callbacks: []

    onVisible: (_callback) ->
      @visibleCallbacks.push(_callback)

    onHidden: (_callback) ->
      @hiddenCallbacks.push(_callback)

    isSupported: ->
      @_supports(0) || @_supports(1)

    _supports: (index) ->
      test = @prefixes[index] + @props[2]
      @q.hasOwnProperty(test)

    runCallbacks: (index) ->
      if index
        @_callbacks =  if (index == 1) then @visibleCallbacks else @hiddenCallbacks
        @callback() for callback in _callbacks

    _visible: ->
      window.visibly.runCallbacks(1)

    _hidden: ->
      window.visibly.runCallbacks(2)

    _nativeSwitch: ->
      if ((@q[@b + @props[2]]) == true) then @_hidden() else @_visible()

    listen: ->
      try
          if !@isSupported()
            if document.addEventListener
              window.addEventListener(@m[0], @_visible, 1)
              window.addEventListener(@m[1], @_hidden, 1)
            else
              this.q.attachEvent('onfocusin', @_visible)
              this.q.attachEvent('onfocusout', @_hidden)
          else
            @b = if (this._supports(0) == @p) then @prefixes[1] else @prefixes[0];
            @q.addEventListener(@b + @props[1], ->
              window.visibly._nativeSwitch.apply(window.visibly, arguments)
            , 1)
      catch e
    
    init: ->
      @listen()

visibly.js

/*!
 * isVis - v0.5.5 Aug 2011 - Page Visibility API Polyfill
 * Copyright (c) 2011 Addy Osmani
 * Dual licensed under the MIT and GPL licenses.
 */
(function () {

    window.visibly = {
        b: null,
        q: document,
        p: undefined,
        prefixes: ['webkit', 'ms'],
        props: ['VisibilityState', 'visibilitychange', 'Hidden'],
        m: ['focus', 'blur'],
        visibleCallbacks: [],
        hiddenCallbacks: [],
        _callbacks: [],

        onVisible: function ( _callback ) {
            this.visibleCallbacks.push(_callback);
        },
        onHidden: function ( _callback ) {
            this.hiddenCallbacks.push(_callback);
        },
        isSupported: function () {
            return (this._supports(0) || this._supports(1));
        },
        _supports: function ( index ) {
            return ((this.prefixes[index] + this.props[2]) in this.q);
        },
        runCallbacks: function ( index ) {
            if ( index ) {
                this._callbacks = (index == 1) ? this.visibleCallbacks : this.hiddenCallbacks;
                for (var i = 0; i < this._callbacks.length; i++) {
                    this._callbacks[i]();
                }
            }
        },
        _visible: function () {
            window.visibly.runCallbacks(1);
        },
        _hidden: function () {
            window.visibly.runCallbacks(2);
        },
        _nativeSwitch: function () {
            ((this.q[this.b + this.props[2]]) === true) ? this._hidden() : this._visible();
        },
        listen: function () {

            try { /*if no native page visibility support found..*/
                if (!(this.isSupported())) {
                    if (document.addEventListener) { /*for browsers without focusin/out support eg. firefox, opera use focus/blur*/
						/*window used instead of doc as Opera complains otherwise*/
                        window.addEventListener(this.m[0], this._visible, 1);
                        window.addEventListener(this.m[1], this._hidden, 1);
                    } else { /*IE <10s most reliable focus events are onfocusin/onfocusout*/
                        this.q.attachEvent('onfocusin', this._visible);
                        this.q.attachEvent('onfocusout', this._hidden);
                    }
                } else { /*switch support based on prefix*/
                    this.b =  (this._supports(0) == this.p) ? this.prefixes[1] : this.prefixes[0];
                    this.q.addEventListener(this.b + this.props[1], function () {
                        window.visibly._nativeSwitch.apply(window.visibly, arguments);
                    }, 1);
                }
            } catch (e) {}
        },
        init: function () {
            this.listen();
        }
    }

    this.visibly.init();

})();



/*usage**/
visibly.onVisible(function () {
    document.title = 'visible'
});

visibly.onVisible(function () {
    console.log('visible');
});

visibly.onHidden(function () {
    document.title = 'hidden';
});

visibly.onHidden(function () {
    console.log('hidden');
});