screenfull
Advanced tools
Comparing version 4.2.1 to 5.0.0
@@ -31,3 +31,3 @@ /// <reference lib="dom"/> | ||
``` | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(); | ||
@@ -37,3 +37,3 @@ } | ||
*/ | ||
readonly enabled: boolean; | ||
readonly isEnabled: boolean; | ||
@@ -59,3 +59,3 @@ /** | ||
document.getElementById('button').addEventListener('click', () => { | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(); | ||
@@ -68,7 +68,7 @@ } else { | ||
// Fullscreen an element | ||
const el = document.getElementById('target'); | ||
const element = document.getElementById('target'); | ||
document.getElementById('button').addEventListener('click', () => { | ||
if (screenfull.enabled) { | ||
screenfull.request(el); | ||
if (screenfull.isEnabled) { | ||
screenfull.request(element); | ||
} | ||
@@ -78,7 +78,7 @@ }); | ||
// Fullscreen an element with jQuery | ||
const target = $('#target')[0]; // Get DOM element from jQuery collection | ||
const element = $('#target')[0]; // Get DOM element from jQuery collection | ||
$('#button').on('click', () => { | ||
if (screenfull.enabled) { | ||
screenfull.request(target); | ||
if (screenfull.isEnabled) { | ||
screenfull.request(element); | ||
} | ||
@@ -107,3 +107,3 @@ }); | ||
$('img').on('click', event => { | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.toggle(event.target); | ||
@@ -122,3 +122,3 @@ } | ||
// Detect fullscreen change | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.on('change', () => { | ||
@@ -130,3 +130,3 @@ console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No'); | ||
// Detect fullscreen error | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.on('error', event => { | ||
@@ -165,10 +165,5 @@ console.error('Failed to enable fullscreen', event); | ||
*/ | ||
declare const screenfull: | ||
| (screenfull.Screenfull & { | ||
// TODO: remove this in the next major version | ||
default: typeof screenfull; | ||
}) | ||
| false; | ||
declare const screenfull: screenfull.Screenfull | {isEnabled: false}; | ||
export = screenfull; | ||
export as namespace screenfull; |
/*! | ||
* screenfull | ||
* v4.2.1 - 2019-07-27 | ||
* v5.0.0 - 2019-09-09 | ||
* (c) Sindre Sorhus; MIT License | ||
@@ -11,3 +11,2 @@ */ | ||
var isCommonjs = typeof module !== 'undefined' && module.exports; | ||
var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element; | ||
@@ -36,3 +35,3 @@ var fn = (function () { | ||
], | ||
// Old WebKit (Safari 5.1) | ||
// Old WebKit | ||
[ | ||
@@ -88,6 +87,4 @@ 'webkitRequestFullScreen', | ||
var screenfull = { | ||
request: function (elem) { | ||
request: function (element) { | ||
return new Promise(function (resolve, reject) { | ||
var request = fn.requestFullscreen; | ||
var onFullScreenEntered = function () { | ||
@@ -100,21 +97,9 @@ this.off('change', onFullScreenEntered); | ||
elem = elem || document.documentElement; | ||
element = element || document.documentElement; | ||
var promise; | ||
// Work around Safari 5.1 bug: reports support for | ||
// keyboard in fullscreen even though it doesn't. | ||
// Browser sniffing, since the alternative with | ||
// setTimeout is even worse. | ||
if (/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)) { | ||
promise = elem[request](); | ||
} else { | ||
promise = elem[request](keyboardAllowed ? Element.ALLOW_KEYBOARD_INPUT : {}); | ||
} | ||
Promise.resolve(promise).catch(reject); | ||
Promise.resolve(element[fn.requestFullscreen]()).catch(reject); | ||
}.bind(this)); | ||
}, | ||
exit: function () { | ||
return new Promise(function (resolve) { | ||
return new Promise(function (resolve, reject) { | ||
if (!this.isFullscreen) { | ||
@@ -130,9 +115,9 @@ resolve(); | ||
document[fn.exitFullscreen](); | ||
this.on('change', onFullScreenExit); | ||
this.on('change', onFullScreenExit); | ||
Promise.resolve(document[fn.exitFullscreen]()).catch(reject); | ||
}.bind(this)); | ||
}, | ||
toggle: function (elem) { | ||
return this.isFullscreen ? this.exit() : this.request(elem); | ||
toggle: function (element) { | ||
return this.isFullscreen ? this.exit() : this.request(element); | ||
}, | ||
@@ -162,5 +147,5 @@ onchange: function (callback) { | ||
if (isCommonjs) { | ||
module.exports = false; | ||
module.exports = {isEnabled: false}; | ||
} else { | ||
window.screenfull = false; | ||
window.screenfull = {isEnabled: false}; | ||
} | ||
@@ -183,3 +168,3 @@ | ||
}, | ||
enabled: { | ||
isEnabled: { | ||
enumerable: true, | ||
@@ -195,4 +180,2 @@ get: function () { | ||
module.exports = screenfull; | ||
// TODO: remove this in the next major version | ||
module.exports.default = screenfull; | ||
} else { | ||
@@ -199,0 +182,0 @@ window.screenfull = screenfull; |
{ | ||
"name": "screenfull", | ||
"version": "4.2.1", | ||
"version": "5.0.0", | ||
"description": "Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen.", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -7,11 +7,5 @@ # screenfull.js | ||
--- | ||
<p align="center"><b>🔥 Want to strengthen your core JavaScript skills and master ES6?</b><br>I would personally recommend this awesome <a href="https://ES6.io/friend/AWESOME">ES6 course</a> by Wes Bos.</p> | ||
--- | ||
### [Demo](https://sindresorhus.com/screenfull.js) | ||
### [Check out my other projects](https://github.com/sindresorhus?tab=repositories) | ||
### [Check out my other projects](https://github.com/sindresorhus) | ||
@@ -25,4 +19,4 @@ | ||
[min]: https://github.com/sindresorhus/screenfull.js/raw/gh-pages/dist/screenfull.min.js | ||
[max]: https://github.com/sindresorhus/screenfull.js/raw/gh-pages/dist/screenfull.js | ||
[min]: https://github.com/sindresorhus/screenfull.js/raw/master/dist/screenfull.min.js | ||
[max]: https://github.com/sindresorhus/screenfull.js/raw/master/dist/screenfull.js | ||
@@ -41,3 +35,3 @@ ``` | ||
```js | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(); | ||
@@ -50,3 +44,6 @@ } | ||
```js | ||
document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen; | ||
document.fullscreenEnabled = | ||
document.fullscreenEnabled || | ||
document.mozFullScreenEnabled || | ||
document.documentElement.webkitRequestFullScreen; | ||
@@ -67,3 +64,3 @@ function requestFullscreen(element) { | ||
// Actually it's more if you want it to work in Safari, but let's not go there... | ||
// This is not even entirely comprehensive. There's more. | ||
``` | ||
@@ -78,3 +75,3 @@ | ||
iPhone is not supported. | ||
**Note:** Safari is supported on desktop and iPad, but not on iPhone. This is a limitation in the browser, not in Screenfull. | ||
@@ -90,3 +87,3 @@ | ||
document.getElementById('button').addEventListener('click', () => { | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(); | ||
@@ -102,7 +99,7 @@ } else { | ||
```js | ||
const el = document.getElementById('target'); | ||
const element = document.getElementById('target'); | ||
document.getElementById('button').addEventListener('click', () => { | ||
if (screenfull.enabled) { | ||
screenfull.request(el); | ||
if (screenfull.isEnabled) { | ||
screenfull.request(element); | ||
} | ||
@@ -115,7 +112,7 @@ }); | ||
```js | ||
const target = $('#target')[0]; // Get DOM element from jQuery collection | ||
const element = $('#target')[0]; // Get DOM element from jQuery collection | ||
$('#button').on('click', () => { | ||
if (screenfull.enabled) { | ||
screenfull.request(target); | ||
if (screenfull.isEnabled) { | ||
screenfull.request(element); | ||
} | ||
@@ -129,3 +126,3 @@ }); | ||
$('img').on('click', event => { | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.toggle(event.target); | ||
@@ -139,3 +136,3 @@ } | ||
```js | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.on('change', () => { | ||
@@ -156,3 +153,3 @@ console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No'); | ||
```js | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.on('error', event => { | ||
@@ -179,3 +176,3 @@ console.error('Failed to enable fullscreen', event); | ||
```typescript | ||
```ts | ||
import {Directive, HostListener} from '@angular/core'; | ||
@@ -189,3 +186,3 @@ import screenfull = require('screenfull'); | ||
@HostListener('click') onClick() { | ||
if (screenfull.enabled) { | ||
if (screenfull.isEnabled) { | ||
screenfull.toggle(); | ||
@@ -201,4 +198,5 @@ } | ||
### Methods | ||
### API | ||
#### .request() | ||
@@ -230,3 +228,3 @@ | ||
Events: `change` `error` | ||
Events: `'change' | 'error'` | ||
@@ -247,4 +245,2 @@ Add a listener for when the browser switches in and out of fullscreen or when there is an error. | ||
### Properties | ||
#### .isFullscreen | ||
@@ -258,3 +254,3 @@ | ||
#### .enabled | ||
#### .isEnabled | ||
@@ -261,0 +257,0 @@ Returns a boolean whether you are allowed to enter fullscreen. If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`). |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
16666
285
279