https://github.com/callmecavs/maximize.js
A tiny wrapper for cross-browser requestFullscreen.
https://github.com/callmecavs/maximize.js
fullscreen
Last synced: about 1 year ago
JSON representation
A tiny wrapper for cross-browser requestFullscreen.
- Host: GitHub
- URL: https://github.com/callmecavs/maximize.js
- Owner: callmecavs
- Created: 2016-01-26T02:30:38.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-04T18:28:23.000Z (over 10 years ago)
- Last Synced: 2025-04-15T13:43:53.232Z (about 1 year ago)
- Topics: fullscreen
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Maximize.js
[](https://www.npmjs.com/package/maximize.js)
A tiny wrapper for cross-browser requestFullscreen (not the entire [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)).
## Usage
Maximize was developed with a modern JavaScript workflow in mind. To use it, it's recommended you have a build system in place that can transpile ES6, and bundle modules. For a minimal boilerplate that does so, check out [outset](https://github.com/callmecavs/outset).
Follow these steps to get started:
* [Install](#install)
* [Call](#call)
## Install
Using NPM, install Maximize.js, and add it to your `package.json` dependencies.
```
$ npm install maximize.js --save
```
## Call
Simply import Maximize, then call it.
* **Passed one element:** clicking the element will _fullscreen the browser_
* **Passed two elements:** clicking the first element will _fullscreen the second element_
* **Passed two elements, and a callback:**: clicking the first element will _fullscreen the second_, then the callback will be fired
```es6
// import Maximize
import maximize from 'maximize.js'
// clicking .button will fullscreen the browser
// event.preventDefault will be called if .button is an tag
maximize(document.querySelector('.button'))
// clicking .toggle will fullscreen .video
maximize(document.querySelector('.toggle'), document.querySelector('.video'))
// clicking .toggle will fullscreen .video, then fire the callback
maximize(document.querySelector('.toggle'), document.querySelector('.video'), () => {
// ...
})
```
## License
MIT. © 2016 Michael Cavalea
[](http://forthebadge.com)