Problem
Please review this code:
function toggleFullScreen() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Solution
Right now you have a lot of duplicate-ish code because of the prefix checking. You can improve this by using a helper function to handle the prefix checking for you (untested, but should work):
function prefixed(name, scope) {
var prefixes = ['', 'moz', 'webkit', 'o', 'ms'];
var fullName = '';
var i;
if (scope === undefined) {
scope = window;
}
for(i = 0; i < prefixes.length; i++) {
if (prefixes[i]) {
fullName = prefixes[i] + name.substr(0, 1).toUpperCase() + name.substr(1);
}
else {
fullName = name;
}
if (scope[fullName] !== undefined) {
return scope[fullName];
}
}
return undefined;
}
Afterwards you can reduce your code to this:
var requestFullscreen = prefixed('requestFullscreen');
var exitFullscreen = prefixed('exitFullscreen');
function toggleFullScreen() {
if (!requestFullscreen || !exitFullscreen) {
return;
}
if (!prefixed('fullscreenElement', document)) {
requestFullscreen();
}
else {
exitFullscreen();
}
}
If necessary, just pass Element.ALLOW_KEYBOARD_INPUT
to all calls or use a try..catch if that makes the call fail in non-webkit browsers.