Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takamin/fullscrn
Full screen API
https://github.com/takamin/fullscrn
api fullscreen html5 javascript npm polyfill
Last synced: 25 days ago
JSON representation
Full screen API
- Host: GitHub
- URL: https://github.com/takamin/fullscrn
- Owner: takamin
- License: mit
- Created: 2017-05-10T12:02:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-02T20:15:58.000Z (about 1 year ago)
- Last Synced: 2024-04-14T22:12:58.835Z (7 months ago)
- Topics: api, fullscreen, html5, javascript, npm, polyfill
- Language: JavaScript
- Homepage: https://takamints.hatenablog.jp/entry/wrapper-module-for-whatwg-full-screen-api
- Size: 740 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Fullscrn
========
Fullscreen API.
This module injects APIs to the DOM.
So, you don't have to consider about the prefix such as 'moz' or 'webkit'.
The implementation follows the standard specification at
[Fullscreen API - WHATWG](https://fullscreen.spec.whatwg.org/).
See also this [project page](https://takamin.github.io/fullscrn/).
INSTALLATION
------------
```bash
$ npm install --save fullscrn
```
REPOSITORY
----------
* [npm](https://www.npmjs.com/package/fullscrn)
* [GitHub](https://github.com/takamin/fullscrn) ([gh-pages](https://takamin.github.io/fullscrn))
FILES
-----
* fullscrn.js - The script to include by script tag.
* fullscrn.min.js - Minified one.
* index.js - The source file of this module.
This can be import using browserify.
APIs Injected to DOM
--------------------
### Properties
* __Document.fullscreenEnabled__ -
The full screen API's availability.
* __Document.fullscreenElement__ -
Indicates the full sized element.
* __Document.fullscreen__ -
The equivalent value to (Document.fullscreenElement != null).
### Methods
These methods returns promise.
* __Element.requestFullscreen()__ -
Requests the fullscreen mode with the element.
* __Document.exitFullscreen()__ -
Cancels the fullscreen mode of the element that
is set to fullscreen at the time.
### Events
Use `document.addEventListener` to handle events while
this module does not supoort the event handlers -
`Document.onfullscreenchange` and onfullscreenerror.
* __Document `"fullscreenchange"`__
* __Document `"fullscreenerror"`__
### SAMPLE
__[sample/injected.html](sample/injected.html)__ [[live sample]](https://takamin.github.io/fullscrn/sample/injected.html).
```html
Full>>
Full>>
<<Exit
var panel = document.getElementById("panel");
var exitButton = document.getElementById("exitButton");
Fullscreen.debugMode(true);// Enables debug log
function main() {
// Handle change event
document.addEventListener("fullscreenchange",
function() {
var fse = document.fullscreenElement;
console.log("FULLSCREEN CHANGE: " +
((fse == null)? "(null)": "#" + fse.id));
});
// Handle error event
document.addEventListener("fullscreenerror",
function() { console.log("FULLSCREEN ERROR"); });
request1(); // This should be error
}
function request1() {
panel.requestFullscreen().then(function(){
console.log("request1 done.");
}).catch(function(err) {
console.error(err.message);
});
}
function request2() {
exitButton.requestFullscreen().then(function(){
console.log("request2 done.");
}).catch(function(err) {
console.error(err.message);
});
}
function exit() {
document.exitFullscreen()
.then(function(){
console.log("exit done.");
}).catch(function(err) {
console.error(err.message);
});
}
```
Exported APIs
-------------
If this module was included by script tag, the global object 'Fullscreen'
is available (see the `sample/sample.html` below).
### Properties
* Fullscreen.enabled - indicates the fullscreen APIs are available.
* Fullscreen.element - references the fullscreen element or null.
### Methods
* Fullscreen.request(element) - enter full screen mode with the element and returns a promise.
* Fullscreen.exit(): exit full screen mode and returns a promise.
### SAMPLE
__[sample/sample.html](sample/sample.html)__ [[live sample]](https://takamin.github.io/fullscrn/sample/sample.html).
```html
Fullscreen
Exit
function exitButton() {
return document.getElementById("exitButton");
}
function requestFull() {
var btn = exitButton();
btn.style.display = "block";
Fullscreen.request(btn);
}
function exitFull() {
var btn = exitButton();
btn.style.display = "none";
Fullscreen.exit();
}
```
LICENSE
-------
This software is released under the MIT License, see [LICENSE](LICENSE)