fscreen
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/fscreen package

    1.2.0 • Public • Published

    Fscreen - Fullscreen API

    npm

    Demo website (demo code on the gh-pages branch)


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

    $ npm install --save fscreen
    import fscreen from 'fscreen';
    
    fscreen.fullscreenEnabled === true / false;
    // boolean to tell if fullscreen mode is supported
    // replacement for: document.fullscreenEnabled
    // mapped to: document.vendorMappedFullscreenEnabled
    
    fscreen.fullscreenElement === null / undefined / DOM Element;
    // 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.vendorMappedRequestFullscreen
    
    fscreen.exitFullscreen();
    // replacement for: document.exitFullscreen()
    // mapped to: document.vendorMappedExitFullscreen()
    // note that fscreen.exitFullscreen is mapped to
    // document.vendorMappedExitFullscreen - without calling the function
    
    
    fscreen.onfullscreenchange = handler;
    // replacement for: document.onfullscreenchange = handler
    // mapped to: document.vendorMappedOnfullscreenchange = handler
    
    fscreen.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 = handler
    
    fscreen.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);
    }
    
    function handler() {
     if (fscreen.fullscreenElement !== null) {
       console.log('Entered fullscreen mode');
     } else {
       console.log('Exited fullscreen mode');
     }
    }

    Install

    npm i fscreen

    DownloadsWeekly Downloads

    85,627

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    26.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar