Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Complete Fullscreen.js
/**
* A Fullscreen object
*
* Current support (http://caniuse.com/#feat=fullscreen)
* is limited to Firefox 22+ (moz), Chrome 28+, Safari 6.0+, Opera 16.0+ (webkit),
* and IE11+ (ms)
*
* @property {boolean} supported If fullscreen support exists in the current context
* @property {boolean} isFullscreen If an element is currently fullscreen or not
*/
var Fullscreen = (function(self) {
self.supported = ('exitFullscreen' in document) ||
('mozCancelFullScreen' in document) ||
('webkitCancelFullScreen' in document) ||
('msExitFullScreen' in document);
self.isFullscreen = false;
/*
* Standard
*/
document.addEventListener("fullscreenchange", function() {
if (document.fullscreenElement) {
self.isFullscreen = true;
} else {
self.isFullscreen = false;
}
}, false);
/*
* Firefox
*/
document.addEventListener("mozfullscreenchange", function() {
if (document.mozFullScreen) {
self.isFullscreen = true;
} else {
self.isFullscreen = false;
}
}, false);
/*
* Webkit (Chrome, Safari, Opera)
*/
document.addEventListener("webkitfullscreenchange", function() {
if (document.webkitIsFullScreen) {
self.isFullscreen = true;
} else {
self.isFullscreen = false;
}
}, false);
/*
* Internet Explorer
*/
document.addEventListener("MSFullscreenChange", function() {
if (document.msFullscreenElement) {
self.isFullscreen = true;
} else {
self.isFullscreen = false;
}
}, false);
/**
* If able, calls a request to make an element fullscreen
* @public
* @param {Element} element An Element to make fullscreen
* @param {boolean} [allowKeyboard] (In Chrome only) If keyboard input is allowed during fullscreen
*/
self.goFullscreen = function(element, allowKeyboard) {
try {
if (element.requestFullscreen) {
element.requestFullscreen();
}
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if (element.webkitRequestFullScreen) {
if (allowKeyboard) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else {
element.webkitRequestFullScreen();
}
}
else if (element.msRequestFullScreen) {
element.msRequestFullScreen();
}
} catch (event) {
console.log("Element " + element + " cannot use fullscreen mode.");
}
};
/**
* Calls vender-specific fullscreen exiting functions
* @public
*/
self.exitFullscreen = function() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullScreen) {
document.msExitFullScreen();
}
};
return self;
})(Fullscreen || {});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment