// 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 * @param {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); } }; }