neovov / fullscreen-api-polyfill Goto Github PK

License: MIT License

JavaScript 82.60% HTML 17.40%

fullscreen-api-polyfill's Introduction

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).

fullscreen-api-polyfill's People

Contributors

Stargazers

Watchers

Forkers

riff482 r0mk1n victoryckl gerhobbelt rayros artem4ik georgelesica-wf 1j01 mbixby span314 cadenasgmbh miraidesign mjstahl den812 nsxz945 sultanbek-hash maths22

fullscreen-api-polyfill's Issues

CSS polyfill

Is it possible to make a polyfill for the fullscreen CSS rules?

Add License

Hello!
Please add license.
For example - MIT.

doc not defined in min version

doc doesn't seem to get passed as a param in the surrounding function in the minified version

Add IE11 support

IE11 has its own prefixed Fullscreen API support:
http://msdn.microsoft.com/en-us/library/ie/dn312066%28v=vs.85%29.aspx

add package.json for npm support?

Are there any plans on supporting npm? Would be helpful!

Bower integration

Hi and thanks for the good work :)
Can you consider adding a bower.json file in order to make your polyfill available for bower users?

promise always pending, never update it's status

chorme 69

I think maybe you forgot to register the event of w3.events.change.
Because I can see only "dispatch w3.events.change" but none of "addEventListener w3.events.change" in your source code.

My solution is modify your code as follow:

Modify your function which called resolver. Replace all "api.events" as "w3.events" under this function

function createResolver(method) {
    return function resolver(resolve, reject) {
        // Reject the promise if asked to exitFullscreen and there is no element currently in fullscreen
        if (method === w3.exit && !doc[api.element]) {
            setTimeout(function () {
                reject(new TypeError());
            }, 1);
            return;
        }

        // When receiving an internal fullscreenchange event, fulfill the promise
        function change() {
            resolve();
            doc.removeEventListener(w3.events.change, change, false);
        }

        // When receiving an internal fullscreenerror event, reject the promise
        function error() {
            reject(new TypeError());
            doc.removeEventListener(w3.events.error, error, false);
        }

        doc.addEventListener(w3.events.change, change, false);
        doc.addEventListener(w3.events.error, error, false);
    };
}

Make new release!

Hi,

I noticed that you have not published your latest IE11 fixes as new release (1.1.1) I was using your latest tag 1.1.0 which comes from Bower. Could you fix this?

document.fullscreenEnabled not updating in IE 11

Thanks for this great polyfill! I just ran into an issue on IE 11, which doesn't update the fullscreenEnabled property correctly. But there is a workaround, simply check for

var fullscreenEnabled = ( document.fullscreenElement != null );

Just in case you run into the same problem. (I would try to fix it but I'm under extreme project pressure).

Should this normalize the behavior of going fullscreen?

Gecko adds CSS styles to make the element 100% wide and high. Webkit doesn't.

Consider submitting a minified version to cdnjs

It would be useful if a minified version of your polyfill were available on https://cdnjs.com/. If you’ve got time, could you add minification to your Grunt process?

CSS :fullscreen pseudo-class

Hello, and thank you for this polyfill, it's perfect.

I just have a question/request : Do you have the possibility to support the CSS3 pseudo-class :fullscreen (https://developer.mozilla.org/en-US/docs/CSS/:fullscreen) ?

It has the same problems than JavaScript API : browsers only supports it with prefix (and there's an additional problem with the dash betweer full-screen).

Thank you.

README or Example?

Is there an example for us to see how this works exactly?

Looking at replacing http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ with yours as per suggestion from a friend for https://github.com/OscarGodson/EpicEditor because FF with John Dyer's script doesn't seem to work correctly.

It appears your script is adding events to the document/elements but I can't seem to dispatch the events. It appears you setup the events and do it correctly yet calling, lets say, self.iframe.dispatchEvent('fullscreenEnabled') will return Uncaught Error: UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0. I'm probably just misunderstanding what the script is doing and how it works tho...

Current fullscreen element is null in webkitfullscreenchange

I was investigating an issue in Safari (9.1.1, OSX 10.11.5) where document.fullscreenElement stayed null even though document.webkitFullscreenElement was correctly set to the fullscreen element.

So I dropped a debugger statement into the handleChange (webkitfullscreenchange) method and suddenly it worked – document.fullscreenElement behaved correctly.

I replaced the debugger statement with console.log and... it broke again. document.webkitFullscreenElement was actually null in webkitfullscreenchange handler. When I later poked the property from the console, it was correct.

...This looks like a nice heisenbug unless I'm going crazy. Some screenshots below as proof. I didn't dive in deeper, I think I'll just submit some PR with a hotfix.

    Object.defineProperty(document, "fullscreenEnabled", {
      get: function () {
        return !!document.fullscreenElement;
      }
    });