Fscreen - Fullscreen API

Vendor agnostic access to the Fullscreen API. Build with the Fullscreen API as intended without worrying about vendor prefixes.

---

Live demo app for Fscreen

Code is in the /demo folder.

---

$ npm install --save fscreen

importfscreenfrom'fscreen';fscreen.fullscreenEnabled===true/false;// boolean to tell if fullscreen mode is supported// replacement for: document.fullscreenEnabled// mapped to: document.vendorMappedFullscreenEnabledfscreen.fullscreenElement===null/undefined/DOMElement;// null if not in fullscreen mode, or the DOM element that's in fullscreen mode// (if fullscreen is not supported by the device it will be undefined)// replacement for: document.fullscreenElement// mapped to: document.vendorMappedFullsceenElement// note that fscreen.fullscreenElement uses a getter to retrieve the element// each time the property is accessed.fscreen.requestFullscreen(element);// replacement for: element.requestFullscreen()// mapped to: element.vendorMappedRequestFullscreen()fscreen.requestFullscreenFunction(element);// replacement for: element.requestFullscreen - without calling the function// mapped to: element.vendorMappedRequestFullscreenfscreen.exitFullscreen();// replacement for: document.exitFullscreen()// mapped to: document.vendorMappedExitFullscreen()// note that fscreen.exitFullscreen is mapped to// document.vendorMappedExitFullscreen - without calling the functionfscreen.onfullscreenchange=handler;// replacement for: document.onfullscreenchange = handler// mapped to: document.vendorMappedOnfullscreenchange = handlerfscreen.addEventListener('fullscreenchange',handler,options);// replacement for: document.addEventListener('fullscreenchange', handler, options)// mapped to: document.addEventListener('vendorMappedFullscreenchange', handler, options)fscreen.removeEventListener('fullscreenchange',handler,options);// replacement for: document.removeEventListener('fullscreenchange', handler, options)// mapped to: document.removeEventListener('vendorMappedFullscreenchange', handler, options)fscreen.onfullscreenerror=handler;// replacement for: document.onfullscreenerror = handler// mapped to: document.vendorMappedOnfullscreenerror = handlerfscreen.addEventListener('fullscreenerror',handler,options);// replacement for: document.addEventListener('fullscreenerror', handler, options)// mapped to: document.addEventListener('vendorMappedFullscreenerror', handler, options)fscreen.removeEventListener('fullscreenerror',handler,options);// replacement for: document.removeEventListener('fullscreenerror', handler, options)// mapped to: document.removeEventListener('vendorMappedFullscreenerror', handler, options)fscreen.fullscreenPseudoClass;// returns: the vendorMapped fullscreen Pseudo Class// i.e. :fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen// Can be used to find any elements that are fullscreen using the vendorMapped Pseudo Class // e.g. document.querySelectorAll(fscreen.fullscreenPseudoClass).forEach(...);

Usage

Use it just like the spec API.

if(fscreen.fullscreenEnabled){fscreen.addEventListener('fullscreenchange',handler,false);fscreen.requestFullscreen(element);}functionhandler(){if(fscreen.fullscreenElement!==null){console.log('Entered fullscreen mode');}else{console.log('Exited fullscreen mode');}}