ScreenFull-ES6

> ScreenFull-ES6 based on screenfull.js

Overview

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.

$3

Install

``
$ npm install --save screenfull-es6
`
Also available on unpkg.com or jsdelivr.

Support

Supported browsers

Documentation

$3

#### 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 for more examples, or view the source.

#### 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
Toggle fullscreen
`

#### Fullscreen the page with Vue.JS

`html



`

$3

#### .request()

Make an element fullscreen.

Accepts a DOM element. Default is . If called with another element than the currently active, it will switch to that if it's a decendant.

If your page is inside an