Skip to content

Commit 30034d0

Browse files
hrajcherthrajchert
committed
Initial commit
0 parents  commit 30034d0

13 files changed

+559
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
bower_components/
2+
node_modules/

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) <year> <copyright holders>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
Angular Screenfull
2+
==================
3+
4+
## Install
5+
6+
#### Download via bower or look for the files in the dist folder
7+
8+
$ bower install --save angular-screenfull
9+
10+
#### Import it to your page
11+
12+
<script src="bower_components/screenfull/dist/screenfull.js"></script>
13+
<script src="bower_components/angular-screenfull/dist/angular-screenfull.min.js"></script>
14+
15+
Note that [screenfull](https://github.com/sindresorhus/screenfull.js) is added as a bower dependency
16+
so if you use [main bower files](https://github.com/ck86/main-bower-files) the dependency will be added for you
17+
18+
#### Enable it on your app
19+
20+
angular.module('myModule', ['angularScreenfull']);
21+
22+
## Use it
23+
24+
In its simplest form, you can do something like this
25+
26+
```html
27+
<div ngsf-fullscreen>
28+
<p>This is a fullscreen element</p>
29+
<button ngsf-toggle-fullscreen>Toggle fullscreen</button>
30+
</div>
31+
```
32+
33+
The `ngsf-fullscreen` indicates which element is going to be the fullscreen element and the `ngsf-toggle-fullscreen`
34+
will toggle the fullscren when clicked.
35+
36+
Note that you can have multiple `ngsf-fullscreen` elements living side by side, the other directives require that a
37+
parent controller exists.
38+
39+
You can also expose the element controller trough its directive name. So for example you can achieve the same result
40+
using this
41+
42+
```html
43+
<div ngsf-fullscreen="fullscreenCtrl">
44+
<p>This is another fullscreen element</p>
45+
<button ng-click="fullscreenCtrl.toggleFullscreen()">Toggle fullscreen</button>
46+
</div>
47+
```
48+
49+
We also provide directives to show the elements based on the fullscreen status, so for example you can have this
50+
51+
```html
52+
<div ngsf-fullscreen>
53+
<p>This is yet another fullscreen element</p>
54+
<a ngsf-toggle-fullscreen show-if-fullscreen-enabled>
55+
<i show-if-fullscreen=false>Icon for enter fullscreen</i>
56+
<i show-if-fullscreen=true>Icon for exit fullscreen</i>
57+
</a>
58+
</div>
59+
```
60+

‎bower.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "angular-screenfull",
3+
"version": "0.1.0",
4+
"authors": [
5+
"Hernan Rajchert <[email protected]>"
6+
],
7+
"description": "Angular bindings to the Screenfull library to allow fullscreen in your app.",
8+
"main": "dist/angular-screenfull.js",
9+
"keywords": [
10+
"angular",
11+
"fullscreen",
12+
"screenfull"
13+
],
14+
"license": "MIT",
15+
"homepage": "https://github.com/hrajchert/angular-screenfull",
16+
"ignore": [
17+
"**/.*",
18+
"node_modules",
19+
"bower_components",
20+
"test",
21+
"tests"
22+
],
23+
"dependencies": {
24+
"screenfull": "~2.0.0"
25+
}
26+
}

‎dist/angular-screenfull.js‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
/* global angular */
2+
(function(angular) {
3+
angular.module('angularScreenfull', []);
4+
})(angular);
5+
/* global angular, screenfull */
6+
(function(angular) {
7+
angular.module('angularScreenfull')
8+
.directive('ngsfFullscreen',ngsfFullscreenDirective);
9+
10+
ngsfFullscreenDirective.$inject = ['$parse'];
11+
function ngsfFullscreenDirective ($parse) {
12+
return {
13+
restrict: 'A',
14+
require: 'ngsfFullscreen',
15+
controller: ngsfFullscreenController,
16+
link: function(scope, elm, attrs, ctrl) {
17+
// If the directive has a value, add the controller to the scope under that name
18+
if (attrs.ngsfFullscreen && attrs.ngsfFullscreen !== '') {
19+
var p = $parse(attrs.ngsfFullscreen);
20+
p.assign(scope, ctrl);
21+
}
22+
23+
// Make this the current fullscreen element
24+
ctrl.setFullScreenElement(elm[0]);
25+
}
26+
};
27+
}
28+
29+
30+
ngsfFullscreenController.$inject = ['$scope', '$document'];
31+
function ngsfFullscreenController ($scope, $document) {
32+
var ctrl = this;
33+
34+
ctrl.setFullScreenElement = setFullScreenElement;
35+
ctrl.onFullscreenChange = onFullscreenChange;
36+
ctrl.requestFullscreen = requestFullscreen;
37+
ctrl.removeFullscreen = removeFullscreen;
38+
ctrl.toggleFullscreen = toggleFullscreen;
39+
ctrl.isFullscreen = isFullscreen;
40+
ctrl.fullscreenEnabled = fullscreenEnabled;
41+
42+
function subscribeToEvents () {
43+
if (ctrl.fullscreenEnabled()) {
44+
var fullscreenchange = function () {
45+
if (ctrl.isFullscreen()) {
46+
angular.element(_elm).addClass('fullscreen');
47+
} else {
48+
angular.element(_elm).removeClass('fullscreen');
49+
}
50+
$scope.$emit('fullscreenchange');
51+
};
52+
53+
$document[0].addEventListener(screenfull.raw.fullscreenchange, fullscreenchange);
54+
$scope.$on('$destroy', function() {
55+
$document[0].removeEventListener(screenfull.raw.fullscreenchange, fullscreenchange);
56+
});
57+
58+
}
59+
}
60+
61+
var _elm;
62+
63+
function setFullScreenElement (elm) {
64+
_elm = elm;
65+
}
66+
67+
function onFullscreenChange (handler) {
68+
return $scope.$on('fullscreenchange', handler);
69+
}
70+
71+
function requestFullscreen () {
72+
if (ctrl.fullscreenEnabled()) {
73+
screenfull.request(_elm);
74+
$scope.$emit('fullscreenEnabled');
75+
return true;
76+
}
77+
return false;
78+
}
79+
80+
function removeFullscreen () {
81+
if (ctrl.fullscreenEnabled()) {
82+
if (ctrl.isFullscreen()) {
83+
ctrl.toggleFullscreen();
84+
}
85+
}
86+
}
87+
88+
89+
function toggleFullscreen () {
90+
if (ctrl.fullscreenEnabled()) {
91+
var isFullscreen = screenfull.isFullscreen;
92+
screenfull.toggle(_elm);
93+
if (isFullscreen) {
94+
$scope.$emit('fullscreenDisabled');
95+
} else {
96+
$scope.$emit('fullscreenEnabled');
97+
}
98+
return true;
99+
}
100+
return false;
101+
}
102+
103+
104+
function isFullscreen () {
105+
if (ctrl.fullscreenEnabled()) {
106+
return screenfull.isFullscreen;
107+
}
108+
return false;
109+
}
110+
111+
112+
113+
function fullscreenEnabled () {
114+
if (typeof screenfull !== 'undefined') {
115+
return screenfull.enabled;
116+
}
117+
return false;
118+
}
119+
120+
subscribeToEvents();
121+
122+
}
123+
})(angular);
124+
125+
126+
/* global angular */
127+
(function(angular) {
128+
angular.module('angularScreenfull')
129+
.directive('showIfFullscreenEnabled', showIfFullscreenEnabledDirective);
130+
131+
showIfFullscreenEnabledDirective.$inject = ['$animate'];
132+
133+
function showIfFullscreenEnabledDirective ($animate) {
134+
return {
135+
restrict: 'A',
136+
require: '^ngsfFullscreen',
137+
link: function(scope, elm, attrs,fullScreenCtrl) {
138+
if (fullScreenCtrl.fullscreenEnabled()) {
139+
$animate.removeClass(elm, 'ng-hide');
140+
} else {
141+
$animate.addClass(elm, 'ng-hide');
142+
}
143+
}
144+
};
145+
}
146+
})(angular);
147+
148+
149+
150+
/* global angular */
151+
(function(angular) {
152+
angular.module('angularScreenfull')
153+
154+
.directive('showIfFullscreen', showIfFullscreenDirective);
155+
showIfFullscreenDirective.$inject = ['$animate'];
156+
function showIfFullscreenDirective ($animate) {
157+
return {
158+
restrict: 'A',
159+
require: '^ngsfFullscreen',
160+
link: function(scope, elm, attrs,fullScreenCtrl) {
161+
var hideOrShow = function () {
162+
163+
var show = fullScreenCtrl.isFullscreen();
164+
if (attrs.showIfFullscreen === 'false' || attrs.showIfFullscreen === false) {
165+
show = !show;
166+
}
167+
168+
if ( show ) {
169+
$animate.removeClass(elm, 'ng-hide');
170+
} else {
171+
$animate.addClass(elm, 'ng-hide');
172+
}
173+
};
174+
hideOrShow();
175+
var unwatch = fullScreenCtrl.onFullscreenChange(hideOrShow);
176+
scope.$on('$destroy', unwatch);
177+
}
178+
};
179+
}
180+
})(angular);
181+
182+
/* global angular */
183+
(function(angular) {
184+
angular.module('angularScreenfull')
185+
.directive('ngsfToggleFullscreen', ngsfToggleFullscreenDirective);
186+
187+
function ngsfToggleFullscreenDirective () {
188+
return {
189+
restrict: 'A',
190+
require: '^ngsfFullscreen',
191+
link: function(scope, elm, attrs, fullScreenCtrl) {
192+
elm.on('click', function() {
193+
fullScreenCtrl.toggleFullscreen();
194+
});
195+
}
196+
};
197+
}
198+
})(angular);
199+

‎dist/angular-screenfull.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var gulp = require('gulp'),
2+
concat = require('gulp-concat'),
3+
uglify = require('gulp-uglify'),
4+
rename = require('gulp-rename');
5+
6+
7+
gulp.task('process-scripts', function() {
8+
return gulp.src('./src/**/*.js')
9+
.pipe(concat('angular-screenfull.js'))
10+
.pipe(gulp.dest('./dist/'))
11+
.pipe(uglify())
12+
.pipe(rename({suffix: '.min'}))
13+
.pipe(gulp.dest('./dist/'));
14+
15+
});
16+
17+
18+
gulp.task('watch', function() {
19+
gulp.watch('./src/**/*.js', ['process-scripts']);
20+
21+
});
22+
23+
24+
gulp.task('default', ['process-scripts','watch']);

‎package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "angular-screenfull",
3+
"version": "0.1.0",
4+
"description": "Angular bindings to the Screenfull library to allow fullscreen in your app.",
5+
"main": "dist/angular-screenfull.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/hrajchert/angular-screenfull.git"
12+
},
13+
"keywords": [
14+
"angular",
15+
"fullscreen",
16+
"screenfull"
17+
],
18+
"author": "Hernan Rajchert",
19+
"license": "MIT",
20+
"bugs": {
21+
"url": "https://github.com/hrajchert/angular-screenfull/issues"
22+
},
23+
"homepage": "https://github.com/hrajchert/angular-screenfull",
24+
"devDependencies": {
25+
"gulp": "^3.8.11",
26+
"gulp-concat": "^2.5.2",
27+
"gulp-rename": "^1.2.0",
28+
"gulp-uglify": "^1.1.0"
29+
}
30+
}

0 commit comments

Comments
 (0)