https://github.com/lukes/ember-cli-full-screen

Ember CLI Addon that provides a pure-Ember Mixin to easily control the fullscreening of components
https://github.com/lukes/ember-cli-full-screen

ember-cli ember-cli-addon ember-mixin emberjs fullscreen

Last synced: about 1 month ago
JSON representation

Ember CLI Addon that provides a pure-Ember Mixin to easily control the fullscreening of components

• Host: GitHub
• URL: https://github.com/lukes/ember-cli-full-screen
• Owner: lukes
• License: mit
• Created: 2015-12-23T02:00:30.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-23T19:10:08.000Z (almost 9 years ago)
• Last Synced: 2024-10-01T09:01:30.784Z (about 2 months ago)
• Topics: ember-cli, ember-cli-addon, ember-mixin, emberjs, fullscreen
• Language: JavaScript
• Homepage: http://lukes.github.io/ember-cli-full-screen/
• Size: 216 KB
• Stars: 8
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-cli-full-screen

An [Ember CLI Addon](http://www.ember-cli.com/) that provides a

pure-Ember Mixin to easily control the fullscreening of components.

You can view a simple [demo here](http://lukes.github.io/ember-cli-full-screen/).

## Installation

Run the install command on your ember-cli project:

`ember install ember-cli-full-screen`

## Usage

Add the mixin to your components:

```javascript

// app/components/my-component.js

import Ember from 'ember';

import FullScreenMixin from 'ember-cli-full-screen/mixins/full-screen';

export default Ember.Component.extend(FullScreenMixin, {

    // Your component code...

});

```

Your components will then have the following actions:

* `toggleFullscreen`

* `enterFullscreen`

* `exitFullscreen`

And the boolean property `fullscreen` to check if the component is

fullscreened.

Fullscreen can additionally be exited by hitting `Esc`.

## Examples

Toggling fullscreen from the component's template:

```handlebars

Toggle fullscreen

```

Using the `fullscreen` property to check for fullscreen state:

```handlebars

{{#if fullscreen}}

  We're in fullscreen!

  Exit fullscreen

{{else}}

  Fullscreen

{{/if}}

```

You can of course use `send()` from within the component itself:

```javascript

export default Ember.Component.extend({

  actions: {

    conditionallyToggleFullscreen() {

      if (this.get('someCheck')) {

        this.send('toggleFullscreen');

      }

    }

  }

});

```