> ScreenFull-ES6 based on [screenfull.js](https://github.com/sindresorhus/screenfull.js)
## Overview
Simple wrapper for cross-browser usage of the JavaScript [Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode), which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
### [Demo](https://xpyct.github.io/screenfull-es6/)
## Install
```
$ npm install --save screenfull-es6
```
Also available on [unpkg.com](https://unpkg.com/screenfull-es6) or [jsdelivr](https://cdn.jsdelivr.net/npm/screenfull-es6/).
## Support
[Supported browsers](http://caniuse.com/fullscreen)
## Documentation
### Examples
#### Fullscreen the page
```js
document.getElementById('button').addEventListener('click', () => {
if (ScreenFull.enabled) ScreenFull.request();
});
```
#### Fullscreen an element
```js
const el = document.getElementById('target');
document.getElementById('button').addEventListener('click', () => {
if (ScreenFull.enabled) ScreenFull.request(el);
});
```
#### Fullscreen an element with jQuery
```js
const target = $('#target')[0]; // Get DOM element from jQuery collection
$('#button').on('click', () => {
if (ScreenFull.enabled) ScreenFull.request(target);
});
```
#### Detect fullscreen change
```js
if (ScreenFull.enabled) {
ScreenFull.on('change', () => {
console.log('Am I fullscreen?', ScreenFull.isFullscreen ? 'Yes' : 'No');
});
}
```
Remove listeners with:
```js
ScreenFull.off('change', callback);
```
#### Detect fullscreen error
```js
if (ScreenFull.enabled) {
ScreenFull.on('error', event => {
console.error('Failed to enable fullscreen', event);
});
}
```
See the [demo](https://xpyct.github.io/screenfull-es6/) for more examples, or view the [source](./example/src/components/FullScreenComponent.vue).
#### Fullscreen the page with Angular 2
```typescript
import {Directive, HostListener} from '@angular/core';
import ScreenFull from 'screenfull-es6';
@Directive({
selector: '[toggleFullscreen]'
})
export class ToggleFullscreenDirective {
@HostListener('click') onClick() {
if (ScreenFull.enabled) {
ScreenFull.toggle();
}
}
}
```
```html
