https://github.com/ardean/jsfullscreen

WHATWG Fullscreen API Fallback
https://github.com/ardean/jsfullscreen

browser events fallback fullscreen fullscreen-api fullscreen-api-fallback fullscreen-fallback html5-fullscreen html5-fullscreen-api javascript jsfullscreen whatwg whatwg-fullscreen whatwg-fullscreen-api whatwg-org

Last synced: 4 days ago
JSON representation

WHATWG Fullscreen API Fallback

• Host: GitHub
• URL: https://github.com/ardean/jsfullscreen
• Owner: ardean
• License: mit
• Created: 2017-02-04T14:32:06.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-18T10:28:27.000Z (over 7 years ago)
• Last Synced: 2024-10-11T19:22:15.672Z (about 1 month ago)
• Topics: browser, events, fallback, fullscreen, fullscreen-api, fullscreen-api-fallback, fullscreen-fallback, html5-fullscreen, html5-fullscreen-api, javascript, jsfullscreen, whatwg, whatwg-fullscreen, whatwg-fullscreen-api, whatwg-org
• Language: JavaScript
• Homepage: https://ardean.github.io/jsFullscreen/
• Size: 170 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jsFullscreen

[![NPM Version][npm-image]][npm-url]

[![NPM Downloads][downloads-image]][downloads-url]

[![License][license-image]][license-url]

**WHATWG Fullscreen API Fallback**

[Demo](https://ardean.github.io/jsFullscreen/)

## Specification

[Fullscreen API, WHATWG](https://fullscreen.spec.whatwg.org/)

## Usage

I suggest you to use [jspm](http://jspm.io/) as your package manager.

```js

import Fullscreen from "jsfullscreen";

const fullscreen = new Fullscreen(document.body);

fullscreen.on("change", (isActive) => {

  console.log(`fullscreen is ${isActive ? 'active' : 'not active'}`);

});

fullscreen.element.addEventListener("click", () => {

  fullscreen.requestFullscreen();

});

```

### Directly in a browser

Please checkout the [index-dist.html](https://ardean.github.io/jsFullscreen/index-dist.html) file for direct usage in a browser.

## API

### Classes

- _Fullscreen_

  - **Constructor**(**Element** element) extends **[EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter)**

  - **Members**

    - _requestFullscreen()_ => **Promise**

  - **Static Members**

    - _exitFullscreen()_ => **Promise**

  - **Properties**

    - _element_ => **Element**

    - _isActive_ => **Boolean**

  - **Static Properties**

    - _fullscreenElement_ => **Element**

    - _isSupported_ / _fullscreenEnabled_ => **Boolean**

  - **Events**

    - _change_ / _fullscreenchange_ => (**Boolean** _isActive_, **Event** _e_)

    - _error_ / _fullscreenerror_ => (**Error** _err_, **Event** _e_)

    - _unsupported_ => ()

## License

[MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/jsfullscreen.svg

[npm-url]: https://npmjs.org/package/jsfullscreen

[downloads-image]: https://img.shields.io/npm/dm/jsfullscreen.svg

[downloads-url]: https://npmjs.org/package/jsfullscreen

[license-image]: https://img.shields.io/npm/l/jsfullscreen.svg

[license-url]: LICENSE