Browser Visibility API Polyfill
/**
Visibility API polyfill-of-sorts
This is wrapped as an AMD module for convenience, and assumes
that you are using a 'pubusb' library of some kind. That's
all fairly easy to remove (amd and the dependency).
*/
define(['pubsub'], function (pubsub) {
'use strict';
var current_state;
var hidden = 'hidden';
// Standards:
if (hidden in document) {
document.addEventListener('visibilitychange', onVisibilityChange);
} else if ('mozHidden' in document) {
hidden = 'mozHidden';
document.addEventListener('mozvisibilitychange', onVisibilityChange);
} else if ('webkitHidden' in document) {
hidden = 'webkitHidden';
document.addEventListener('webkitvisibilitychange', onVisibilityChange);
} else if ('msHidden' in document) {
hidden = 'msHidden';
document.addEventListener('msvisibilitychange', onVisibilityChange);
}
/* Generalised "Visibility API" polyfill */
function onVisibilityChange (evt) {
var state = 'unknown',
v = 'visible', h = 'hidden',
evtMap = {
focus:v,
focusin:v,
pageshow:v,
blur:h,
focusout:h,
pagehide:h
};
evt = evt || window.event;
if (evt.type in evtMap) {
state = evtMap[evt.type];
} else {
state = document[hidden] ? h : v;
}
// (nb - might be triggered twice, so we track "current_state")
if (state !== current_state) {
current_state = state;
// this is the bit you would change if you aren't using
// amd or a pubsub library
pubsub.publish('visibility-change', [state]);
}
}
// let's do this too in for other browsers
window.addEventListener('pageshow', onVisibilityChange, false);
window.addEventListener('pagehide', onVisibilityChange, false);
});Written by Pete Otaqui
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Javascript
Authors
Did you know?
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#