fullscreen-api-polyfill

WebJar for fullscreen-api-polyfill

License	MIT
GroupId	org.webjars.npm
ArtifactId	fullscreen-api-polyfill
Last Version	1.1.2
Release Date	Apr 7, 2020
Type	jar
Description	fullscreen-api-polyfill WebJar for fullscreen-api-polyfill
Project URL	https://www.webjars.org
Source Code Management	https://github.com/neovov/Fullscreen-API-Polyfill

Download fullscreen-api-polyfill

Filename	Size
fullscreen-api-polyfill-1.1.2.pom
fullscreen-api-polyfill-1.1.2.jar	9 KB
fullscreen-api-polyfill-1.1.2-sources.jar	22 bytes
fullscreen-api-polyfill-1.1.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/fullscreen-api-polyfill/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>fullscreen-api-polyfill</artifactId>
    <version>1.1.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/fullscreen-api-polyfill/
implementation 'org.webjars.npm:fullscreen-api-polyfill:1.1.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/fullscreen-api-polyfill/
implementation ("org.webjars.npm:fullscreen-api-polyfill:1.1.2")

Apache Buildr

'org.webjars.npm:fullscreen-api-polyfill:jar:1.1.2'

Apache Ivy

<dependency org="org.webjars.npm" name="fullscreen-api-polyfill" rev="1.1.2">
  <artifact name="fullscreen-api-polyfill" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='fullscreen-api-polyfill', version='1.1.2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "fullscreen-api-polyfill" % "1.1.2"

Leiningen

[org.webjars.npm/fullscreen-api-polyfill "1.1.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

W3C's Fullscreen API Polyfill

This little script ease the way to use the fullscreen API. As you know, vendors are currently implementing this API so every methods, properties and events are prefixed. This script will detect the API (maybe an already compliant browser? Webkit? Moz?) and if it's not the W3C one, it will wrap those methods, properties and events to match the W3C one.

Maybe an example will be clearer:

// (without this polyfill)
btn.addEventListener("click", function() {
	if (element.requestFullscreen) { // W3C API
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) { // Mozilla current API
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullScreen) { // Webkit current API
		element.webkitRequestFullScreen();
	} // Maybe other prefixed APIs?
}, false);

// (with this polyfill)
btn.addEventListener("click", function() {
	// Use the final API, the polyfill will call the mozRequestFullScreen or webKitRequestFullScreen for you
	element.requestFullscreen();
}, false);

Remember this script is just a shorthand for the currently implemented API. This API may change and you'll have to update this script (if I don't ;-) ).

Supported "features"

Note that this script does only wrap the existing methods, it will not simulate a fullscreen.

• Methods wrapper for requestFullscreen and exitFullscreen
• Properties wrapper for fullscreenEnabled and fullscreenElement
• Events propagation for fullscreenchange and fullscreenerror
• You can easily change the vendor's API (if they change a method, property or event name)
• You can choose to "pollute" the DOM by making these wrappers or don't "pollute" and get the API available in the browser (or undefined if unavailable)
• requestFullscreen and exitFullscreen will return a Promise (if supported).

Calling element.requestFullscreen will call the correct method (requestFullscreen, mozRequestFullScreen or webkitRequestFullScreen).
Calling document.exitFullscreen will call the correct method (exitFullscreen, mozCancelFullScreen or webkitCancelFullScreen).

The document.fullscreenEnabled property will be a reference of the vendor's property (document.exitFullscreen, document.mozFullScreenor document.webkitIsFullScreen).
The document.fullscreenElement property will be a reference of the vendor's property (document.fullscreenElement, document.mozFullScreenElement or document.webkitCurrentFullScreenElement).

Since a lot of you asked, document.fullscreenEnabled is a flag to check if the browser allows fullscreen, document.fullscreenElement allows you to know which element is currently in fullscreen.

The fullscreenchange event (dispatched on the document) will be triggered directly by the browser or by an intermediate listener (on mozfullscreenchange or webkitfullscreenchange).
The fullscreenerror event (dispatched on the document) will be triggered directly by the browser or by an intermediate listener (on mozfullscreenerror or webkitfullscreenerror).

Versions

Version
1.1.2 Apr 7, 2020