https://github.com/presentkim/fullscreen-wrapper
Light Wrapper for FullScreen API for cross-browser supports
https://github.com/presentkim/fullscreen-wrapper
Last synced: about 1 year ago
JSON representation
Light Wrapper for FullScreen API for cross-browser supports
- Host: GitHub
- URL: https://github.com/presentkim/fullscreen-wrapper
- Owner: PresentKim
- License: mit
- Created: 2021-04-07T02:20:48.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-11-22T03:11:44.000Z (over 3 years ago)
- Last Synced: 2024-05-30T16:42:41.095Z (about 2 years ago)
- Language: TypeScript
- Size: 40.6 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fullscreen-wrapper
[](https://www.npmjs.com/package/fullscreen-wrapper)
[](https://www.npmjs.com/package/fullscreen-wrapper)
[](https://www.npmjs.com/package/fullscreen-wrapper)
[](https://bundlephobia.com/package/fullscreen-wrapper)
A Light Wrapper for FullScreen API for cross-browser supports
## Installation
> ```sh
> npm install fullscreen-wrapper --save
> yarn add fullscreen-wrapper
> ```
## Usage
### Import library
> ```javascript
> import fullscreen from 'fullscreen-wrapper';
> //or
> var fullscreen = require('fullscreen-wrapper');
> ```
### Check supported fullscreen features in document
> ```javascript
> //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
> ```javascript
> 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
> ```javascript
> //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
>
> ```javascript
> document.onclick = () => fullscreen.toggle(document.documentElement);
> ```
### Listen fullscreen change and error events
> Listen change
>
> ```javascript
> fullscreen.onClick(() => {
> console.log(fullscreen.isFullscreen ? '[Fullscreen] on' : '[Fullscreen] off');
> });
> ```
> Listen error
>
> ```javascript
> fullscreen.onError((err) => console.log(err));
> ```