Cross-browser page visibility wrapper for the HTML5 Visibility API (polyfill - check visibility, handle change visibility events)

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.
 * 
 * Changes:
 * - Forked by: https://gist.github.com/Swaagie/6221897 (supports moz native)
 * - Added: methods isVisible, isHidden (based on this.s property)
 */
(function () {

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

        isVisible: function (){
            return this.s;
        },
        isHidden: function (){
            return !this.isVisible();
        },
        onVisible: function ( _callback ) {
            this.visibleCallbacks.push(_callback);
        },
        onHidden: function ( _callback ) {
            this.hiddenCallbacks.push(_callback);
        },
        isSupported: function () {
            var i = this.prefixes.length;
            while (i--) if (this._supports(i)) return this.b = this.prefixes[i];
        },
        _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 () {
            this.s = true;
            window.visibly.runCallbacks(1);
        },
        _hidden: function () {
            this.s = false;
            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.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');
});