angularjs html5,GitHub - fabiobiondi/angular-fullscreen: AngularJS HTML5 Fullscreen

This repo is not maintaned anymore

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.

Example

Usage

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

Set FBAngular as a dependency in your module:

var app = angular.module('YourApp', ['FBAngular'])

Fullscreen Directive

Set the fullscreen attribute to a specific element:

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:

Enable/Disable fullscreen

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:

Lorem ipsum...

Toggle Full Screen

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:

Lorem ipsum...

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

FBFullscreen.change

isEnabled

fired when fullscreen state change

Example

License

The MIT License