Skip to content

Instantly share code, notes, and snippets.

@loopmode
Last active November 8, 2022 08:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save loopmode/955cb3ecb77980fc035cb48c9e542bef to your computer and use it in GitHub Desktop.
Save loopmode/955cb3ecb77980fc035cb48c9e542bef to your computer and use it in GitHub Desktop.
cross-browser fullscreen utils
// see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
/** @private */
const ERR_NO_API = 'The Fullscreen API not supported on this device';
export function requestFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else {
console.warn(ERR_NO_API);
}
}
export function exitFullscreen() {
const d = document;
if (d.exitFullscreen) {
d.exitFullscreen();
} else if (d.msExitFullscreen) {
d.msExitFullscreen();
} else if (d.mozCancelFullScreen) {
d.mozCancelFullScreen();
} else if (d.webkitExitFullscreen) {
d.webkitExitFullscreen();
} else {
console.warn(ERR_NO_API);
}
}
export function getFullscreenElement() {
return (
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
);
}
/**
* @return {boolean} true if going into fullscreen, false if leaving fullscreen
*/
export function toggleFullscreen(elem) {
if (getFullscreenElement() === elem) {
exitFullscreen(elem);
return false;
} else {
requestFullscreen(elem);
return true;
}
}
export function isFullscreen(elem) {
if (elem) {
return getFullscreenElement() === elem;
}
return !!getFullscreenElement();
}
export function isFullscreenEnabled() {
return (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
);
}
export function addFullscreenChangeListener(callback) {
document.addEventListener('fullscreenchange', callback);
document.addEventListener('webkitfullscreenchange', callback);
document.addEventListener('mozfullscreenchange', callback);
document.addEventListener('MSFullscreenChange', callback);
}
export function removeFullscreenChangeListener(callback) {
document.removeEventListener('fullscreenchange', callback);
document.removeEventListener('webkitfullscreenchange', callback);
document.removeEventListener('mozfullscreenchange', callback);
document.removeEventListener('MSFullscreenChange', callback);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment