ember-fullscreen
Fullscreen API packaged as an Ember service.
ember-fullscreen uses Screenfull for the all the Fullscreen API calls. This means that ember-fullscreen will work on every browser that supports fullscreen API/screenfull: http://caniuse.com/fullscreen
Check minimal demo.
Installation
ember-fullscreen is an ember-cli addon. Just run the install command on your ember-cli project:
ember install ember-fullscreen
For more information on using ember-cli, visit http://www.ember-cli.com/.
Usage
Inject the service anywhere you need it by adding fullscreen: Ember.inject.service()
. The fullscreen service has the following properties and methods:
-
.isAvailable
- A boolean that represents whether you are allowed to enter fullscreen. -
.isEnabled
- A boolean that represents whether you are in fullscreen mode. -
.enable()
- Enters fullscreen mode. Accepts a DOM element. Default is<html>
. If called with another element than the currently active, it will switch to that if it's a decendant. Yes, you can make DOM elements fullscreen. -
.disable()
- Disables fullscreen mode. -
.toggle()
- Enables fullscreen mode if not active, disables if active. Also accepts an optional DOM element. -
.on('error', ...)
- Fullscreen service includes Ember.Evented mixin. When a fullscreen request fails, ember-fullscreen triggers anerror
event. -
.on('fullscreenChange', ...)
- When the fullscreen state changes, ember-fullscreen notifies the newisEnabled
state.
Examples
Create a button in your controller with an action that toggles fullscreen mode:
;
Use it on your templates to conditionally render depending on a boolean:
{{#if fullscreen.isEnabled}} I'm fullscreen{{else}} I'm NOT fullscreen{{/if}}
Only display a button to enter fullscreen if the browser supports it:
{{#if fullscreen.isAvailable}} <button onclick={{action "toggleFullscreen"}}> Toggle fullscreen </button>{{/if}}
A simple component that sets its own element to fullscreen on click:
;
Bind an icon class depending on wether we're in fullscreen:
{{!-- Uses font-awesome --}}<i class="{{if fullscreen.isEnabled "fa-compress" "fa-expand"}}"></i>