Complete Fullscreen.js

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 || {});