
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600× Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
angular-fullscreen-toggle
Advanced tools
An AngularJS service and a directive to quickly use the HTML5 fullscreen API
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)
Live demo: http://www.fabiobiondi.com/demo/github/angular-fullscreen/demo/
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'])
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
.
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>
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.
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 |
Event | Arguments | Details |
---|---|---|
ngFullscreen.change | isEnabled | fired when fullscreen state change |
You can check out this live example here: http://www.fabiobiondi.com/demo/github/angular-fullscreen/demo/
The MIT License
FAQs
An AngularJS service and a directive to quickly use the HTML5 fullscreen API
The npm package angular-fullscreen-toggle receives a total of 0 weekly downloads. As such, angular-fullscreen-toggle popularity was classified as not popular.
We found that angular-fullscreen-toggle demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.