Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

screenfull

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

screenfull - npm Package Compare versions

Comparing version 5.0.2 to 5.1.0

16

dist/screenfull.d.ts

@@ -51,2 +51,3 @@ /// <reference lib="dom"/>

@param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant.
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
@returns A promise that resolves after the element enters fullscreen.

@@ -74,2 +75,11 @@

// Fullscreen an element with options
const element = document.getElementById('target');
document.getElementById('button').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element, {navigationUI: 'hide'});
}
});
// Fullscreen an element with jQuery

@@ -85,3 +95,3 @@ const element = $('#target')[0]; // Get DOM element from jQuery collection

*/
request(element?: Element): Promise<void>;
request(element?: Element, options?: FullscreenOptions): Promise<void>;

@@ -98,2 +108,4 @@ /**

@param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant.
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
@returns A promise that resolves after the element enters/exits fullscreen.

@@ -112,3 +124,3 @@

*/
toggle(element?: Element): Promise<void>;
toggle(element?: Element, options?: FullscreenOptions): Promise<void>;

@@ -115,0 +127,0 @@ /**

10

dist/screenfull.js
/*!
* screenfull
* v5.0.2 - 2020-02-13
* v5.1.0 - 2020-12-24
* (c) Sindre Sorhus; MIT License

@@ -85,3 +85,3 @@ */

var screenfull = {
request: function (element) {
request: function (element, options) {
return new Promise(function (resolve, reject) {

@@ -97,3 +97,3 @@ var onFullScreenEntered = function () {

var returnPromise = element[fn.requestFullscreen]();
var returnPromise = element[fn.requestFullscreen](options);

@@ -126,4 +126,4 @@ if (returnPromise instanceof Promise) {

},
toggle: function (element) {
return this.isFullscreen ? this.exit() : this.request(element);
toggle: function (element, options) {
return this.isFullscreen ? this.exit() : this.request(element, options);
},

@@ -130,0 +130,0 @@ onchange: function (callback) {

{
"name": "screenfull",
"version": "5.0.2",
"version": "5.1.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",

@@ -9,31 +9,2 @@ # screenfull.js

<br>
---
<div align="center">
<p>
<p>
<sup>
<a href="https://github.com/sponsors/sindresorhus">My open source work is supported by the community</a>
</sup>
</p>
<sup>Special thanks to:</sup>
<br>
<br>
<a href="https://github.com/botpress/botpress">
<img src="https://sindresorhus.com/assets/thanks/botpress-logo.svg" width="260" alt="Botpress">
</a>
<br>
<sub><b>Botpress is an open-source conversational assistant creation platform.</b></sub>
<br>
<sub>They <a href="https://github.com/botpress/botpress/blob/master/.github/CONTRIBUTING.md">welcome contributions</a> from anyone, whether you're into machine learning,<br>want to get started in open-source, or just have an improvement idea.</sub>
<br>
</p>
</div>
---
<br>
## Install

@@ -91,3 +62,3 @@

[Supported browsers](http://caniuse.com/fullscreen)
[Supported browsers](https://caniuse.com/#feat=fullscreen)

@@ -126,2 +97,14 @@ **Note:** In order to use this package in Internet Explorer, you need a [`Promise` polyfill](https://github.com/stefanpenner/es6-promise).

#### Hide navigation user-interface on mobile devices
```js
const element = document.getElementById('target');
document.getElementById('button').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element, {navigationUI: 'hide'});
}
});
```
#### Fullscreen an element with jQuery

@@ -212,8 +195,10 @@

#### .request()
#### .request(element, options?)
Make an element fullscreen.
Accepts a DOM element. Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant.
Accepts a DOM element and [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
The default element is `<html>`. 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 `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).

@@ -231,6 +216,8 @@

#### .toggle()
#### .toggle(element, options?)
Requests fullscreen if not active, otherwise exits.
Accepts a DOM element and [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
Returns a promise that resolves after the element enters/exits fullscreen.

@@ -283,3 +270,3 @@

iframe.setAttribute('id', 'external-iframe');
iframe.setAttribute('src', 'http://new-page-website.com');
iframe.setAttribute('src', 'https://new-page-website.com');
iframe.setAttribute('frameborder', 'no');

@@ -301,5 +288,5 @@ iframe.style.position = 'absolute';

- [Using the Fullscreen API in web browsers](http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/)
- [Using the Fullscreen API in web browsers](https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/)
- [MDN - Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode)
- [W3C Fullscreen spec](http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html)
- [Building an amazing fullscreen mobile experience](http://www.html5rocks.com/en/mobile/fullscreen/)
- [W3C Fullscreen spec](https://fullscreen.spec.whatwg.org/)
- [Building an amazing fullscreen mobile experience](https://developers.google.com/web/fundamentals/native-hardware/fullscreen/)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc