threex

Version:

Game Extensions for three.js http://www.threejsgames.com/extensions/

95 lines (87 loc) • 19.2 kB

HTML

<!DOCTYPE html> <html> <head> <title>THREEx.FullScreen.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="THREEx.CelShader.html"> THREEx.CelShader.js </a> <a class="source" href="THREEx.DeviceOrientationState.html"> THREEx.DeviceOrientationState.js </a> <a class="source" href="THREEx.FullScreen.html"> THREEx.FullScreen.js </a> <a class="source" href="THREEx.GeometryUtils.html"> THREEx.GeometryUtils.js </a> <a class="source" href="THREEx.GeometryWobble.html"> THREEx.GeometryWobble.js </a> <a class="source" href="THREEx.KeyboardState.html"> THREEx.KeyboardState.js </a> <a class="source" href="THREEx.LogoTurtle.html"> THREEx.LogoTurtle.js </a> <a class="source" href="THREEx.PlasmaShader.html"> THREEx.PlasmaShader.js </a> <a class="source" href="THREEx.SkyMap.html"> THREEx.SkyMap.js </a> <a class="source" href="THREEx.WindowResize.html"> THREEx.WindowResize.js </a> <a class="source" href="THREEx.glCapability.html"> THREEx.glCapability.js </a> <a class="source" href="THREEx.requestAnimationFrame.html"> THREEx.requestAnimationFrame.js </a> <a class="source" href="THREEx.screenshot.html"> THREEx.screenshot.js </a> <a class="source" href="threex.chromeWebStoreInstall.html"> threex.chromeWebStoreInstall.js </a> <a class="source" href="threex.domevent.html"> threex.domevent.js </a> <a class="source" href="threex.embedded.html"> threex.embedded.js </a> <a class="source" href="threex.sparks.html"> threex.sparks.js </a> <a class="source" href="threex.sparksPlugins.html"> threex.sparksPlugins.js </a> <a class="source" href="threex.texturePoolBall.html"> threex.texturePoolBall.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> THREEx.FullScreen.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> 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 <a href="http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html">firefox nightly</a>, <a href="http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/">webkit nightly</a> and <a href="http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API">chrome stable</a>. </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h1>Code</h1> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre>/** @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); } }</pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> internal functions to know which fullscreen API implementation is available </td> <td class="code"> <div class="highlight"><pre>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); } }</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> callback to handle keypress </td> <td class="code"> <div class="highlight"><pre> var onKeyPress = function(event){</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> return now if the KeyPress isnt for the proper charCode </td> <td class="code"> <div class="highlight"><pre> if( event.which !== charCode ) return;</pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> toggle fullscreen </td> <td class="code"> <div class="highlight"><pre> toggle(); }.bind(this);</pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> listen to keypress NOTE: for firefox it seems mandatory to listen to document directly </td> <td class="code"> <div class="highlight"><pre> document.addEventListener('keypress', onKeyPress, false);</pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> listen to dblclick </td> <td class="code"> <div class="highlight"><pre> dblclick && document.addEventListener('dblclick', toggle, false); return { unbind : function(){ document.removeEventListener('keypress', onKeyPress, false); dblclick && document.removeEventListener('dblclick', toggle, false); } }; } </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>