Skip to content

Commit d741c88

Browse files
hrajcherthrajchert
committed
Improved documentation
1 parent 30034d0 commit d741c88

File tree

12 files changed

+494
-179
lines changed

12 files changed

+494
-179
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
bower_components/
22
node_modules/
3+
docs/

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
Angular Screenfull
22
==================
33

4+
Angular screenfull is a wrapper around the [Screenfull library](https://github.com/sindresorhus/screenfull.js/), it allows you to use the HTML5 fullscreen API in an Angular way.
5+
46
## Install
57

68
#### Download via bower or look for the files in the dist folder

‎dist/angular-screenfull.js‎

Lines changed: 200 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,97 @@
11
/* global angular */
2-
(function(angular) {
3-
angular.module('angularScreenfull', []);
4-
})(angular);
2+
/**
3+
* @ngdoc overview
4+
* @name angularScreenfull
5+
* @id index
6+
* @description
7+
* Lalala some text, some other text, moar text
8+
* @example
9+
<example module="myApp">
10+
<file name="app.js">
11+
angular.module('myApp', ['angularScreenfull']);
12+
</file>
13+
<file name="index.html">
14+
<div ngsf-fullscreen>
15+
<p>This is a fullscreen element</p>
16+
<button ngsf-toggle-fullscreen>Toggle fullscreen</button>
17+
</div>
18+
</file>
19+
</example>
20+
*
21+
* More more text, bla bla
22+
*@example
23+
<example module="myApp">
24+
<file name="app.js">
25+
angular.module('myApp', ['angularScreenfull']);
26+
</file>
27+
<file name="index.html">
28+
<div ngsf-fullscreen="fullscreenCtrl">
29+
<p>This is another fullscreen element</p>
30+
<button ng-click="fullscreenCtrl.toggleFullscreen()">Toggle fullscreen</button>
31+
</div>
32+
</file>
33+
</example>
34+
35+
*/
36+
(function() {
37+
angular.module('angularScreenfull', []);
38+
})();
39+
540
/* global angular, screenfull */
6-
(function(angular) {
7-
angular.module('angularScreenfull')
8-
.directive('ngsfFullscreen',ngsfFullscreenDirective);
41+
(function() {
42+
'use strict';
43+
44+
angular
45+
.module('angularScreenfull')
46+
.directive('ngsfFullscreen', ngsfFullscreenDirective);
47+
48+
/**
49+
* @ngdoc directive
50+
* @name angularScreenfull.directive:ngsfFullscreen
51+
* @restrict A
52+
*
53+
* @description
54+
* Marks the element that is going to be fullscreen
55+
*
56+
* @param {string=} ngsfFullscreen An optional expression to store the fullscreen controller
57+
*
58+
* @example
59+
<example module="myApp">
60+
<file name="app.js">
61+
angular.module('myApp', ['angularScreenfull']);
62+
</file>
63+
<file name="index.html">
64+
<div ngsf-fullscreen>
65+
<p>This is a fullscreen element</p>
66+
<button ngsf-toggle-fullscreen>Toggle fullscreen</button>
67+
</div>
68+
</file>
69+
</example>
70+
*/
971

1072
ngsfFullscreenDirective.$inject = ['$parse'];
1173
function ngsfFullscreenDirective ($parse) {
1274
return {
1375
restrict: 'A',
1476
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-
}
77+
controller: NgsfFullscreenController,
78+
link: link
79+
};
2280

23-
// Make this the current fullscreen element
24-
ctrl.setFullScreenElement(elm[0]);
81+
function link (scope, elm, attrs, ctrl) {
82+
// If the directive has a value, add the controller to the scope under that name
83+
if (attrs.ngsfFullscreen && attrs.ngsfFullscreen !== '') {
84+
var p = $parse(attrs.ngsfFullscreen);
85+
p.assign(scope, ctrl);
2586
}
26-
};
27-
}
2887

88+
// Make this the current fullscreen element
89+
ctrl.setFullScreenElement(elm[0]);
90+
}
91+
}
2992

30-
ngsfFullscreenController.$inject = ['$scope', '$document'];
31-
function ngsfFullscreenController ($scope, $document) {
93+
NgsfFullscreenController.$inject = ['$scope', '$document'];
94+
function NgsfFullscreenController ($scope, $document) {
3295
var ctrl = this;
3396

3497
ctrl.setFullScreenElement = setFullScreenElement;
@@ -40,24 +103,27 @@
40103
ctrl.fullscreenEnabled = fullscreenEnabled;
41104

42105
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-
}
106+
var fullscreenchange = function () {
107+
if (ctrl.isFullscreen()) {
108+
angular.element(_elm).addClass('fullscreen');
109+
} else {
110+
angular.element(_elm).removeClass('fullscreen');
111+
}
112+
$scope.$emit('fullscreenchange');
113+
$scope.$apply();
114+
};
115+
116+
$document[0].addEventListener(screenfull.raw.fullscreenchange, fullscreenchange);
117+
$scope.$on('$destroy', function() {
118+
$document[0].removeEventListener(screenfull.raw.fullscreenchange, fullscreenchange);
119+
});
120+
}
121+
if (ctrl.fullscreenEnabled()) {
122+
subscribeToEvents();
59123
}
60124

125+
////////////////////////////////////////
126+
61127
var _elm;
62128

63129
function setFullScreenElement (elm) {
@@ -85,7 +151,6 @@
85151
}
86152
}
87153

88-
89154
function toggleFullscreen () {
90155
if (ctrl.fullscreenEnabled()) {
91156
var isFullscreen = screenfull.isFullscreen;
@@ -100,100 +165,147 @@
100165
return false;
101166
}
102167

103-
104168
function isFullscreen () {
105169
if (ctrl.fullscreenEnabled()) {
106170
return screenfull.isFullscreen;
107171
}
108172
return false;
109173
}
110174

111-
112-
113175
function fullscreenEnabled () {
114176
if (typeof screenfull !== 'undefined') {
115177
return screenfull.enabled;
116178
}
117179
return false;
118180
}
119-
120-
subscribeToEvents();
121-
122181
}
123-
})(angular);
182+
})();
124183

125184

126185
/* global angular */
127-
(function(angular) {
128-
angular.module('angularScreenfull')
129-
.directive('showIfFullscreenEnabled', showIfFullscreenEnabledDirective);
186+
(function() {
187+
'use strict';
188+
189+
angular
190+
.module('angularScreenfull')
191+
.directive('showIfFullscreenEnabled', showIfFullscreenEnabledDirective);
192+
193+
/**
194+
* @ngdoc directive
195+
* @name angularScreenfull.directive:showIfFullscreenEnabled
196+
* @restrict A
197+
*
198+
* @description
199+
* Shows or hides the element (using ng-hide) if the browser has fullscreen
200+
* capabilities.
201+
*
202+
*/
130203

131204
showIfFullscreenEnabledDirective.$inject = ['$animate'];
132205

133206
function showIfFullscreenEnabledDirective ($animate) {
207+
// Directive definition
134208
return {
135209
restrict: 'A',
136210
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-
}
211+
link: link
144212
};
145-
}
146-
})(angular);
147-
148213

214+
function link (scope, elm, attrs, fullScreenCtrl) {
215+
if (fullScreenCtrl.fullscreenEnabled()) {
216+
$animate.removeClass(elm, 'ng-hide');
217+
} else {
218+
$animate.addClass(elm, 'ng-hide');
219+
}
220+
}
221+
}
222+
})();
149223

150224
/* global angular */
151-
(function(angular) {
152-
angular.module('angularScreenfull')
225+
(function() {
226+
'use strict';
227+
228+
angular
229+
.module('angularScreenfull')
230+
.directive('showIfFullscreen', showIfFullscreenDirective);
231+
232+
/**
233+
* @ngdoc directive
234+
* @name angularScreenfull.directive:showIfFullscreen
235+
* @restrict A
236+
*
237+
* @description
238+
* Shows or hides the element (using ng-hide) if the closest
239+
* parent that has the ngsf-fullscreen directive is in fullscreen mode.
240+
*
241+
* By default the element shows itself if its fullscreen or hides otherwise, but you can
242+
* change this behaviour by passing false to the directive
243+
*
244+
* @param {boolean=} showIfFullscreen If false it inverts the show/hide behaviour. Defaults to true.
245+
*
246+
*/
153247

154-
.directive('showIfFullscreen', showIfFullscreenDirective);
155248
showIfFullscreenDirective.$inject = ['$animate'];
249+
156250
function showIfFullscreenDirective ($animate) {
251+
// Directive definition
157252
return {
158253
restrict: 'A',
159254
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-
}
255+
link: link
178256
};
257+
258+
function link (scope, elm, attrs, fullScreenCtrl) {
259+
var hideOrShow = function () {
260+
261+
var show = fullScreenCtrl.isFullscreen();
262+
if (attrs.showIfFullscreen === 'false' || attrs.showIfFullscreen === false) {
263+
show = !show;
264+
}
265+
266+
if (show) {
267+
$animate.removeClass(elm, 'ng-hide');
268+
} else {
269+
$animate.addClass(elm, 'ng-hide');
270+
}
271+
};
272+
hideOrShow();
273+
var unwatch = fullScreenCtrl.onFullscreenChange(hideOrShow);
274+
scope.$on('$destroy', unwatch);
275+
}
179276
}
180-
})(angular);
277+
})();
181278

182279
/* global angular */
183-
(function(angular) {
184-
angular.module('angularScreenfull')
185-
.directive('ngsfToggleFullscreen', ngsfToggleFullscreenDirective);
280+
(function() {
281+
'use strict';
282+
283+
angular
284+
.module('angularScreenfull')
285+
.directive('ngsfToggleFullscreen', ngsfToggleFullscreenDirective);
286+
287+
/**
288+
* @ngdoc directive
289+
* @name angularScreenfull.directive:ngsfToggleFullscreen
290+
* @restrict A
291+
*
292+
* @description
293+
* Adds a click handler to the element that toggles the nearest ngsf-fullscreen element
294+
*
295+
*/
186296

187297
function ngsfToggleFullscreenDirective () {
298+
// Directive definition
188299
return {
189300
restrict: 'A',
190301
require: '^ngsfFullscreen',
191-
link: function(scope, elm, attrs, fullScreenCtrl) {
192-
elm.on('click', function() {
193-
fullScreenCtrl.toggleFullscreen();
194-
});
195-
}
302+
link: link
196303
};
197-
}
198-
})(angular);
199304

305+
function link (scope, elm, attr, fullScreenCtrl) {
306+
elm.on('click', function() {
307+
fullScreenCtrl.toggleFullscreen();
308+
});
309+
}
310+
}
311+
})();

‎dist/angular-screenfull.min.js‎

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

0 commit comments

Comments
 (0)