AngularJS HTML5 Fullscreen

An AngularJS service and a directive to quickly use the HTML5 fullscreen API and set the fullscreen to the document or to a specific element.

Project based on https://github.com/fabiobiondi/angular-fullscreen (not maintained)

Example

Live demo: http://www.fabiobiondi.com/demo/github/angular-fullscreen/demo/

Usage

Add AngularJS and the angular-fullscreen-toggle.js to your main file (index.html)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
<script src="angular-fullscreen-toggle.js"></script>

Set angular-fullscreen-toggle as a dependency in your module:

var app = angular.module('YourApp', ['angular-fullscreen-toggle'])

Fullscreen Directive

Set the fullscreen attribute to a specific element:

<img id="img1" src="imgs/P1030188.JPG" fullscreen />

The only requirement is to set a different ID to all elements that you will flag as fullscreen.

Fullscreen Service

You can also use the Fullscreen service into your controller:

Controller:

function MainCtrl($scope, Fullscreen) {

   $scope.goFullscreen = function () {

      if (Fullscreen.isEnabled())
         Fullscreen.cancel();
      else
         Fullscreen.all();

      // Set Fullscreen to a specific element (bad practice)
      // Fullscreen.enable( document.getElementById('img') )

   }

}

HTML:

<button ng-click="goFullscreen()">Enable/Disable fullscreen</button>

Alternative Approach

You may pass in the name of a scope property to watch. When the property becomes truthy, the element will become full screen:

Controller:

function MainCtrl($scope) {
    // Initially, do not go into full screen
    $scope.isFullscreen = false;

    $scope.toggleFullScreen = function() {
        $scope.isFullscreen = !$scope.isFullscreen;
    }
}

HTML:

<div fullscreen="isFullscreen">Lorem ipsum...</div>
<button ng-click="toggleFullScreen()">Toggle Full Screen</button>

If you want to disable the click fullscreen trigger for this alternative approach, add the attribute only-watched-property to the fullscreen directive, like this:

<div fullscreen="isFullscreen" only-watched-property>Lorem ipsum...</div>

In this case, only a change of the property will trigger the fullscreen.

Available Methods

Method | Details :---------------------- | :------ all() | enable document fullscreen toggleAll() | enable or disable the document fullscreen enable(elementID) | enable fullscreen to a specific element cancel() | disable fullscreen isEnabled() | return true if fullscreen is enabled, otherwise false isSupported() | return true if fullscreen API is supported by your browser

Available Events

Event | Arguments | Details :---------------------- | :---------- | :------ ngFullscreen.change | isEnabled | fired when fullscreen state change

Example

You can check out this live example here: http://www.fabiobiondi.com/demo/github/angular-fullscreen/demo/

License

The MIT License