https://github.com/hrajchert/angular-screenfull

Angular binding to the Screenfull library to allow fullscreen in your app.
https://github.com/hrajchert/angular-screenfull

Last synced: 3 months ago
JSON representation

Angular binding to the Screenfull library to allow fullscreen in your app.

• Host: GitHub
• URL: https://github.com/hrajchert/angular-screenfull
• Owner: hrajchert
• License: mit
• Created: 2015-03-13T15:46:02.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-02-27T09:45:49.000Z (over 4 years ago)
• Last Synced: 2024-04-14T05:48:53.590Z (7 months ago)
• Language: JavaScript
• Homepage: http://hrajchert.github.io/angular-screenfull/
• Size: 502 KB
• Stars: 60
• Watchers: 8
• Forks: 16
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
HTML5 Fullscreen API in Angular.js

===================================

Angular screenfull is a wrapper around the [Screenfull library](https://github.com/sindresorhus/screenfull.js/), that allows you to use the [HTML5 fullscreen API](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode), in "the Angular way".

You can see the [API documentation](http://hrajchert.github.io/angular-screenfull/#/api) with some [demo examples](http://hrajchert.github.io/angular-screenfull/#/api).

## Install

#### Download via npm or look for the files in the dist folder

```sh

$ npm install --save angular-screenfull

```

#### Import it to your page

```html

```

You need to have both [screenfull](https://github.com/sindresorhus/screenfull.js) and angular-screenfull loaded in the browser in order to the directive to work. I have a an agular.js project using a custom loader, but if you want to add webpack support, PR's are welcomed.

#### Enable it on your app

```js

angular.module('myModule', ['angularScreenfull']);

```

## Use it

In its simplest form, you can do something like this

```html



    
This is a fullscreen element

    Toggle fullscreen



```


The `ngsf-fullscreen` indicates which element is going to be the fullscreen element and the `ngsf-toggle-fullscreen`

will toggle the fullscren when clicked.

Note that you can have multiple `ngsf-fullscreen` elements living side by side, the other directives will use the closest parent controller.

## A word in CSS

When the element that uses directive `ngsf-fullscreen` becomes fullscreen a class is added using the `$animation` service, so you can add animations to the transition.

Note that this library doesn't come with any CSS, so if you would like your element to occupy the whole screen (and I imagine that you want to), you should add something like this to your CSS.

```css

.fullscreen {

    width: 100%;

    height: 100%;

}

```

## Export its functionality

You can also expose the element controller trough its directive name. So for example you can achieve the same result

using this

```html



    
This is another fullscreen element

    Toggle fullscreen



```


## Show or hide

We also provide directives to show the elements based on the fullscreen status, so for example you can have this

```html



    
This is yet another fullscreen element

    

        Icon for enter fullscreen

        Icon for exit fullscreen

    



```


## The problem with F11

As stated in [this bug](https://github.com/hrajchert/angular-screenfull/issues/1), it appears that browser vendors don't allow a user script to tap into the `F11` hotkey for security reasons. That means that we can only detect that the page is in fullscreen mode when the `HTML5 fullscreen API` is used.

If you can find a way to overcome this problem please let me know!