fullscreen-wrapper

A Light Wrapper for FullScreen API for cross-browser supports

Installation

npm install fullscreen-wrapper --save
yarn add fullscreen-wrapper

Usage

Import library

import fullscreen from 'fullscreen-wrapper';
//or
var fullscreen = require('fullscreen-wrapper');

Check supported fullscreen features in document

//Returns true if document has the ability to display elements fullscreen and fullscreen is supported, or false otherwise.
if (fullscreen.isEnabled) {
  //do somethings
}

Check supported fullscreen features in document

if (fullscreen.isEnabled) {
  //do somethings
}

All functions are executed only when fullscreen.isEnabled, so there is no need to check separately.
I think it only needs to be used when adding a fullscreen-button when fullscreen is available.

Toggle the fullscreen when document clicked

//In fact, it works as document.documentElement if no arguments are given.
document.onclick = () => {
  if (fullscreen.isFullscreen) {
    fullscreen.exit();
  } else {
    fullscreen.request(document.documentElement);
  }
};

or use toggle() method

document.onclick = () => fullscreen.toggle(document.documentElement);

Listen fullscreen change and error events

Listen change

fullscreen.onClick(() => {
  console.log(fullscreen.isFullscreen ? '[Fullscreen] on' : '[Fullscreen] off');
});

Listen error

fullscreen.onError((err) => console.log(err));