Toggling Fullscreen

Posted on

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.

Leave a Reply

Your email address will not be published. Required fields are marked *