A modular Fullscreen API interface (mind the double 'interface') that can be used without interfering with other potential polyfills added at a global level.
More information about the Fullscreen API.
npm install --save @jsilvermist/fullscreen-api
You can use the default import to import all methods using simplified names:
import fullscreen from '@jsilvermist/fullscreen-api';
fullscreen.enabled;
fullscreen.element;
fullscreen.request(targetElement);
fullscreen.exit();
Or you can import individual functions based on w3 api names:
import { fullscreenEnabled, fullscreenElement, requestFullscreen, exitFullscreen } from '@jsilvermist/fullscreen-api';
fullscreenEnabled;
fullscreenElement;
requestFullscreen(targetElement);
exitFullscreen();
To maintain encapsulation and prevent side effects, there are 2 listeners provided for you to add callbacks to:
function handleChange() {...}
function handleError() {...}
<fullscreen.addListener|addFullscreenListener>('change', handleChange);
<fullscreen.addListener|addFullscreenListener>('error', handleError);
<fullscreen.removeListener|removeFullscreenListener>('change', handleChange);
<fullscreen.removeListener|removeFullscreenListener>('error', handleError);