# angular-koka-fullscreen

> AngularJS fullscreen

Latest version **1.0.2** (published 2017-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-koka-fullscreen
pnpm add angular-koka-fullscreen
yarn add angular-koka-fullscreen
bun add angular-koka-fullscreen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2017-05-05 |
| First published | 2017-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vladimir Ivanov |
| Maintainers | kokatsuna |

## Links

- npm: https://www.npmjs.com/package/angular-koka-fullscreen
- Repository: https://github.com/Kokatsuna/angular-koka-fullscreen
- Issues: https://github.com/Kokatsuna/angular-koka-fullscreen/issues
- npm.io page: https://npm.io/package/angular-koka-fullscreen

## Recent versions

- 1.0.2 (latest) — 2017-05-05
- 1.0.1 — 2017-05-05
- 1.0.0 — 2017-05-05

## README

AngularJS HTML5 Fullscreen | angular-koka-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.

## Usage
Add AngularJS and the angular-fullscreen.js to your main file (index.html)
	
```ecmascript 6
import 'angular-koka-fullscreen'
```

Set `angular-koka-fullscreen` as a dependency in your module:

```javascript
var app = angular.module('YourApp', ['angular-koka-fullscreen'])
```

## 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>
```

---
_Source: https://npm.io/package/angular-koka-fullscreen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._