Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Complete Visibility.js
/**
* A Visibility object using the Page Visibility API with fallback to
* the the 'focus' and 'blur' events.
*
* The result of visibilityState() returns one of the possible following strings:
* "visible" : is visible to the user
* "hidden" : is not visible to the user
* "prerender" : (Limited support) is not visible to the user, but has been loaded in memory
* "unloaded" : (Limited support) the page itself is currently being unloaded from memory
*
* @property {boolean} supported If the Page Visibility API is supported in this context or not
*
*/
var Visibility = (function(self) {
self.supported = !!document.webkitHidden ||
!!document.mozHidden ||
!!document.msHidden ||
!!document.oHidden ||
!!document.hidden;
var visible = null;
var callback = null;
var hidden = true;
/**
* If the entire page is hidden from the user or not
* @returns {boolean} The hidden status of the page
*/
self.isHidden = function() {
if (!!document.webkitHidden) {
hidden = document.webkitHidden;
} else if (!!document.mozHidden) {
hidden = document.mozHidden;
} else if (!!document.msHidden) {
hidden = document.msHidden;
} else if (!!document.oHidden) {
hidden = document.oHidden;
} else if (!!document.hidden) {
hidden = document.hidden;
}
return hidden;
};
/**
* Returns the visibility state of the page
* @returns {string} Either "visible", "hidden", "prerender", or "unloaded"
*/
self.visibilityState = function() {
if (self.supported) {
if (document.webkitVisibilityState) {
return document.webkitVisibilityState;
} else {
return document.visibilityState;
}
} else if (visible !== null) {
return visible;
} else {
return "prerender";
}
};
/**
* Add a Visibility EventListener callback function
* @param {function} callbackfunc The function to be called when the visibility changes
*/
self.addVisibilityListener = function(callbackfunc) {
if (self.supported) {
callback = callbackfunc;
var visibilityChange = null;
if (!!document.hidden) {
visibilityChange = "visibilitychange";
} else if (!!document.mozHidden) {
visibilityChange = "mozvisibilitychange";
} else if (!!document.msHidden) {
visibilityChange = "msvisibilitychange";
} else if (!!document.webkitHidden) {
visibilityChange = "webkitvisibilitychange";
}
if (visibilityChange !== null) {
document.addEventListener(visibilityChange, callback, false);
}
} else {
if (document.attachEvent) {
document.attachEvent('onfocusin', onPageFocus);
document.attachEvent('onfocusout', onPageBlur);
} else {
document.addEventListener('focus', onPageFocus);
document.addEventListener('blur', onPageBlur);
}
}
};
/*
* The onFocus event function for the document
*/
function onPageFocus(event) {
hidden = false;
visible = "visible";
if (callback !== null) {
callback(event);
}
}
/*
* The onBlur event function for the document
*/
function onPageBlur(event) {
hidden = true;
visible = "hidden";
if (callback !== null) {
callback(event);
}
}
return self;
})(Visibility || {});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.