angular-fullscreen-toggle

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