topical media & game development

talk show tell print

mobile-query-three-vendor-threex-THREEx.FullScreen.js / js



  // This THREEx helper makes it easy to handle the fullscreen API
  // * it hides the prefix for each browser
  // * it hides the little discrepencies of the various vendor API
  // * at the time of this writing (nov 2011) it is available in 
  //   [firefox nightly](http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html),
  //   [webkit nightly](http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/) and
  //   [chrome stable](http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API).
  
  // 
  // # Code
  
  //
  
  
@namespace

  
  var THREEx                = THREEx                 || {};
  THREEx.FullScreen        = THREEx.FullScreen        || {};
  
  
test if it is possible to have fullscreen
returns: {Boolean} true if fullscreen API is available, false otherwise

  
  THREEx.FullScreen.available        = function()
  {
          return this._hasWebkitFullScreen || this._hasMozFullScreen;
  }
  
  
test if fullscreen is currently activated
returns: {Boolean} true if fullscreen is currently activated, false otherwise

  
  THREEx.FullScreen.activated        = function()
  {
          if( this._hasWebkitFullScreen ){
                  return document.webkitIsFullScreen;
          }else if( this._hasMozFullScreen ){
                  return document.mozFullScreen;
          }else{
                  console.assert(false);
          }
  }
  
  
Request fullscreen on a given element
parameter: {DomElement} element to make fullscreen. optional. default to document.body

  
  THREEx.FullScreen.request        = function(element)
  {
          element        = element        || document.body;
          if( this._hasWebkitFullScreen ){
                  element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
          }else if( this._hasMozFullScreen ){
                  element.mozRequestFullScreen();
          }else{
                  console.assert(false);
          }
  }
  
  
Cancel fullscreen

  
  THREEx.FullScreen.cancel        = function()
  {
          if( this._hasWebkitFullScreen ){
                  document.webkitCancelFullScreen();
          }else if( this._hasMozFullScreen ){
                  document.mozCancelFullScreen();
          }else{
                  console.assert(false);
          }
  }
  
  // internal functions to know which fullscreen API implementation is available
  THREEx.FullScreen._hasWebkitFullScreen        = 'webkitCancelFullScreen' in document        ? true : false;        
  THREEx.FullScreen._hasMozFullScreen        = 'mozCancelFullScreen' in document        ? true : false;        
  
  
Bind a key to renderer screenshot

  
  THREEx.FullScreen.bindKey        = function(opts){
          opts                = opts                || {};
          var charCode        = opts.charCode        || 'f'.charCodeAt(0);
          var dblclick        = opts.dblclick !== undefined ? opts.dblclick : false;
          var element        = opts.element
  
          var toggle        = function(){
                  if( THREEx.FullScreen.activated() ){
                          THREEx.FullScreen.cancel();
                  }else{
                          THREEx.FullScreen.request(element);
                  }                
          }
  
          // callback to handle keypress
          var __bind        = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
          var onKeyPress        = __bind(function(event){
                  // return now if the KeyPress isnt for the proper charCode
                  if( event.which !== charCode )        return;
                  // toggle fullscreen
                  toggle();
          }, this);
  
          // listen to keypress
          // NOTE: for firefox it seems mandatory to listen to document directly
          document.addEventListener('keypress', onKeyPress, false);
          // listen to dblclick
          dblclick && document.addEventListener('dblclick', toggle, false);
  
          return {
                  unbind        : function(){
                          document.removeEventListener('keypress', onKeyPress, false);
                          dblclick && document.removeEventListener('dblclick', toggle, false);
                  }
          };
  }
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.