Angular Screenfull

Angular screenfull is a wrapper around the Screenfull library, that allows you to use the HTML5 fullscreen API, in "the Angular way".

You can fork it on github.

Note on examples

angular-animate and marked are not needed, but for some reason are added in the examples generated by ngdoc

Install

Download via npm or look for the files in the dist folder
$ npm install --save angular-screenfull
Import it to your page
<script src="node_modules/screenfull/dist/screenfull.js"></script>
<script src="node_modules/angular-screenfull/dist/angular-screenfull.min.js"></script>

You need to have both screenfull 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
angular.module('myApp', ['angularScreenfull']);

Use it

In its simplest form, you can do something like this

Source







Demo

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 require that a parent controller exists.

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.

.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

Source





Demo

Show or hide

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

Source





Demo

The problem with F11

As stated in this bug, 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!