Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shisama/toggle-fullscreen
Simple to use Fullscreen API with Promise for cross-browser.
https://github.com/shisama/toggle-fullscreen
cross-browser fullscreen fullscreen-api javascript promise
Last synced: about 7 hours ago
JSON representation
Simple to use Fullscreen API with Promise for cross-browser.
- Host: GitHub
- URL: https://github.com/shisama/toggle-fullscreen
- Owner: shisama
- License: mit
- Created: 2017-08-08T16:36:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-10T13:49:37.000Z (over 5 years ago)
- Last Synced: 2024-04-26T12:46:24.576Z (7 months ago)
- Topics: cross-browser, fullscreen, fullscreen-api, javascript, promise
- Language: JavaScript
- Size: 21.5 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
toggle-fullscreen
===
[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) based [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) for cross-browser.
[](https://github.com/shisama/toggle-fullscreen/blob/master/LICENSE)
[](https://www.npmjs.com/package/toggle-fullscreen)
```js
async function() {
const element = document.querySelector('some element');
await toggleFullscreen(element);
await otherFunc();
}
```
## Install
```
npm install --save toggle-fullscreen
```
## API
### toggleFullscreen(target) ⇒ Promise<>
Requests Fullscreen API.
Request to exit fullscreen mode if target is already fullscreen.
| Param | Type | Description |
| ------ | ------------------- | ------------ |
| target | Element | target element to change fullscreen|
Usage:
```js
var target = document.querySelector('#target');
toggleFullscreen(target);
```
For jQuery:
```js
$('#target').on('click', event => {
toggleFullscreen(event.target);
});
```
### fullscreenChange(callback) ⇒ Promise<>
Add a listener for when the browser switches in and out of fullscreen.
| Param | Type | Description |
| ------ | ------------------- | ------------ |
| callback | function | function to be called when the browser switches in and out of fullscreen|
Usage:
```js
fullscreenChange(function() {
console.log('switch fullscreen');
});
```
### isFullscreen() ⇒ Boolean
Check whether fullscreen is active.
Usage:
```js
if (isFullscreen()) {
console.log('fullscreen is active');
} else {
console.log('fullscreen is not active');
}
```
## Example
```jsx harmony
import toggleFullscreen, {
fullscreenChange,
isFullscreen,
} from 'toggle-fullscreen';
onChangeFullScreen = () => {
const element = document.getElementById('something');
toggleFullscreen(element)
.then(() => {
return fullscreenChange(() => {
const isFullScreen = isFullscreen();
if (isFullScreen) {
// any process in fullscreen mode
// e.g.document.addEventListener('keydown', keydownFunction);
} else {
// any process in non-fullscreen mode
// e.g.document.removeEventListener('keydown', keydownFunction);
}
});
})
.then(() => {
console.log('successed!');
})
.catch(() => {
console.log('failed!');
});
};
```
Or use Promise.all()
```jsx harmony
import toggleFullscreen, {
fullscreenChange,
isFullscreen,
} from 'toggle-fullscreen';
onChangeFullScreen = () => {
// target element
const element = document.getElementById('something');
// callback function when fullscreen change is detected.
const callback = () => {
const isFullScreen = isFullscreen();
this.setState({isFullScreen: isFullScreen});
if (isFullScreen) {
document.addEventListener('keydown', this.keydownEvent);
element.style.width = '70%';
} else {
document.removeEventListener('keydown', this.keydownEvent);
element.style.width = '100%';
}
};
// execute toggle-fullscreen and add listener when fullscreen change detected asynchronously
Promise.all([toggleFullscreen(element), fullscreenChange(callback)]);
};
```
For async/await:
```jsx harmony
import toggleFullscreen, {
fullscreenChange,
isFullscreen,
} from 'toggle-fullscreen';
onChangeFullScreen = async () => {
const element = document.getElementById('something');
await toggleFullscreen(element);
await fullscreenChange(() => {
const isFullScreen = isFullscreen();
if (isFullScreen) {
// any process in fullscreen mode
// e.g.document.addEventListener('keydown', keydownFunction);
} else {
// any process in non-fullscreen mode
// e.g.document.removeEventListener('keydown', keydownFunction);
}
});
console.log('successed!');
};
```
For callback (use if something is wrong with Promise) :
```js
const toggleFullscreen = require('toggle-fullscreen');
onChangeFullScreen = function() {
const element = document.getElementById('something');
toggleFullscreen(element, function(isFullScreen) {
if (isFullScreen) {
// any process in fullscreen mode
// e.g.document.addEventListener('keydown', this.keydownEvent);
} else {
// any process in non-fullscreen mode
// e.g.document.removeEventListener('keydown', this.keydownEvent);
}
});
};
```
## Support
- Chrome@latest
- Firefox@latest
- Safari@latest
- MSEdge@latest
- IE11
## License
This project is licensed under the terms of the
[MIT license](https://github.com/shisama/toggle-fullscreen/blob/master/LICENSE)