angular-fullscreen

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #go #linux #docker #macos #java #windows #awesome #awesome-list #pytorch #ios #open-source

angular-fullscreen

(★ 212)

AngularJS HTML5 Fullscreen

File Explorer

Download Latest Version (.zip)

- - P1030188.JPG
  - P1030293.jpg
  - P1030296.JPG
  - Thumbs.db
- app.js
- index.html
- styles.css
- angular-fullscreen.js
.gitattributes
bower.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 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
Live demo: http://www.fabiobiondi.com/demo/github/angular-fullscreen/demo/

## Usage
Add AngularJS and the angular-fullscreen.js to your main file (index.html)
	
```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="angular-fullscreen.js"></script>
```

Set `FBAngular` as a dependency in your module:

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

## Fullscreen Directive
Set the `fullscreen` attribute to a specific element:

```html
<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:
```javascript
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:
```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:
```javascript
function MainCtrl($scope) {
    // Initially, do not go into full screen
    $scope.isFullscreen = false;

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

HTML:
```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:

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

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

#### Available Methods

#### Available Events

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

## License
The MIT License

angular-fullscreen

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

angular-fullscreen

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README