diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c346b13 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +bower_components/ +node_modules/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..242132d --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..e765eea --- /dev/null +++ b/README.md @@ -0,0 +1,60 @@ +Angular Screenfull +================== + +## Install + +#### Download via bower or look for the files in the dist folder + + $ bower install --save angular-screenfull + +#### Import it to your page + + + + +Note that [screenfull](https://github.com/sindresorhus/screenfull.js) is added as a bower dependency +so if you use [main bower files](https://github.com/ck86/main-bower-files) the dependency will be added for you + +#### Enable it on your app + + angular.module('myModule', ['angularScreenfull']); + +## Use it + +In its simplest form, you can do something like this + +```html +
+

This is a fullscreen element

+ +
+``` + +The `ngsf-fullscreen` indicates which element is going to be the fullscreen element and the `ngsf-toggle-fullscreen` +will toggle the fullscren when clicked. + +Note that you can have multiple `ngsf-fullscreen` elements living side by side, the other directives require that a +parent controller exists. + +You can also expose the element controller trough its directive name. So for example you can achieve the same result +using this + +```html +
+

This is another fullscreen element

+ +
+``` + +We also provide directives to show the elements based on the fullscreen status, so for example you can have this + +```html +
+

This is yet another fullscreen element

+ + Icon for enter fullscreen + Icon for exit fullscreen + +
+``` + diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..ac6b205 --- /dev/null +++ b/bower.json @@ -0,0 +1,26 @@ +{ + "name": "angular-screenfull", + "version": "0.1.0", + "authors": [ + "Hernan Rajchert " + ], + "description": "Angular bindings to the Screenfull library to allow fullscreen in your app.", + "main": "dist/angular-screenfull.js", + "keywords": [ + "angular", + "fullscreen", + "screenfull" + ], + "license": "MIT", + "homepage": "https://github.com/hrajchert/angular-screenfull", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "screenfull": "~2.0.0" + } +} diff --git a/dist/angular-screenfull.js b/dist/angular-screenfull.js new file mode 100644 index 0000000..67d4c96 --- /dev/null +++ b/dist/angular-screenfull.js @@ -0,0 +1,199 @@ +/* global angular */ +(function(angular) { + angular.module('angularScreenfull', []); +})(angular); +/* global angular, screenfull */ +(function(angular) { + angular.module('angularScreenfull') + .directive('ngsfFullscreen',ngsfFullscreenDirective); + + ngsfFullscreenDirective.$inject = ['$parse']; + function ngsfFullscreenDirective ($parse) { + return { + restrict: 'A', + require: 'ngsfFullscreen', + controller: ngsfFullscreenController, + link: function(scope, elm, attrs, ctrl) { + // If the directive has a value, add the controller to the scope under that name + if (attrs.ngsfFullscreen && attrs.ngsfFullscreen !== '') { + var p = $parse(attrs.ngsfFullscreen); + p.assign(scope, ctrl); + } + + // Make this the current fullscreen element + ctrl.setFullScreenElement(elm[0]); + } + }; + } + + + ngsfFullscreenController.$inject = ['$scope', '$document']; + function ngsfFullscreenController ($scope, $document) { + var ctrl = this; + + ctrl.setFullScreenElement = setFullScreenElement; + ctrl.onFullscreenChange = onFullscreenChange; + ctrl.requestFullscreen = requestFullscreen; + ctrl.removeFullscreen = removeFullscreen; + ctrl.toggleFullscreen = toggleFullscreen; + ctrl.isFullscreen = isFullscreen; + ctrl.fullscreenEnabled = fullscreenEnabled; + + function subscribeToEvents () { + if (ctrl.fullscreenEnabled()) { + var fullscreenchange = function () { + if (ctrl.isFullscreen()) { + angular.element(_elm).addClass('fullscreen'); + } else { + angular.element(_elm).removeClass('fullscreen'); + } + $scope.$emit('fullscreenchange'); + }; + + $document[0].addEventListener(screenfull.raw.fullscreenchange, fullscreenchange); + $scope.$on('$destroy', function() { + $document[0].removeEventListener(screenfull.raw.fullscreenchange, fullscreenchange); + }); + + } + } + + var _elm; + + function setFullScreenElement (elm) { + _elm = elm; + } + + function onFullscreenChange (handler) { + return $scope.$on('fullscreenchange', handler); + } + + function requestFullscreen () { + if (ctrl.fullscreenEnabled()) { + screenfull.request(_elm); + $scope.$emit('fullscreenEnabled'); + return true; + } + return false; + } + + function removeFullscreen () { + if (ctrl.fullscreenEnabled()) { + if (ctrl.isFullscreen()) { + ctrl.toggleFullscreen(); + } + } + } + + + function toggleFullscreen () { + if (ctrl.fullscreenEnabled()) { + var isFullscreen = screenfull.isFullscreen; + screenfull.toggle(_elm); + if (isFullscreen) { + $scope.$emit('fullscreenDisabled'); + } else { + $scope.$emit('fullscreenEnabled'); + } + return true; + } + return false; + } + + + function isFullscreen () { + if (ctrl.fullscreenEnabled()) { + return screenfull.isFullscreen; + } + return false; + } + + + + function fullscreenEnabled () { + if (typeof screenfull !== 'undefined') { + return screenfull.enabled; + } + return false; + } + + subscribeToEvents(); + + } +})(angular); + + +/* global angular */ +(function(angular) { + angular.module('angularScreenfull') + .directive('showIfFullscreenEnabled', showIfFullscreenEnabledDirective); + + showIfFullscreenEnabledDirective.$inject = ['$animate']; + + function showIfFullscreenEnabledDirective ($animate) { + return { + restrict: 'A', + require: '^ngsfFullscreen', + link: function(scope, elm, attrs,fullScreenCtrl) { + if (fullScreenCtrl.fullscreenEnabled()) { + $animate.removeClass(elm, 'ng-hide'); + } else { + $animate.addClass(elm, 'ng-hide'); + } + } + }; + } +})(angular); + + + +/* global angular */ +(function(angular) { + angular.module('angularScreenfull') + + .directive('showIfFullscreen', showIfFullscreenDirective); + showIfFullscreenDirective.$inject = ['$animate']; + function showIfFullscreenDirective ($animate) { + return { + restrict: 'A', + require: '^ngsfFullscreen', + link: function(scope, elm, attrs,fullScreenCtrl) { + var hideOrShow = function () { + + var show = fullScreenCtrl.isFullscreen(); + if (attrs.showIfFullscreen === 'false' || attrs.showIfFullscreen === false) { + show = !show; + } + + if ( show ) { + $animate.removeClass(elm, 'ng-hide'); + } else { + $animate.addClass(elm, 'ng-hide'); + } + }; + hideOrShow(); + var unwatch = fullScreenCtrl.onFullscreenChange(hideOrShow); + scope.$on('$destroy', unwatch); + } + }; + } +})(angular); + +/* global angular */ +(function(angular) { + angular.module('angularScreenfull') + .directive('ngsfToggleFullscreen', ngsfToggleFullscreenDirective); + + function ngsfToggleFullscreenDirective () { + return { + restrict: 'A', + require: '^ngsfFullscreen', + link: function(scope, elm, attrs, fullScreenCtrl) { + elm.on('click', function() { + fullScreenCtrl.toggleFullscreen(); + }); + } + }; + } +})(angular); + diff --git a/dist/angular-screenfull.min.js b/dist/angular-screenfull.min.js new file mode 100644 index 0000000..f36a9ed --- /dev/null +++ b/dist/angular-screenfull.min.js @@ -0,0 +1 @@ +!function(e){e.module("angularScreenfull",[])}(angular),function(e){function n(e){return{restrict:"A",require:"ngsfFullscreen",controller:l,link:function(n,l,r,u){if(r.ngsfFullscreen&&""!==r.ngsfFullscreen){var c=e(r.ngsfFullscreen);c.assign(n,u)}u.setFullScreenElement(l[0])}}}function l(n,l){function r(){if(o.fullscreenEnabled()){var r=function(){o.isFullscreen()?e.element(g).addClass("fullscreen"):e.element(g).removeClass("fullscreen"),n.$emit("fullscreenchange")};l[0].addEventListener(screenfull.raw.fullscreenchange,r),n.$on("$destroy",function(){l[0].removeEventListener(screenfull.raw.fullscreenchange,r)})}}function u(e){g=e}function c(e){return n.$on("fullscreenchange",e)}function s(){return o.fullscreenEnabled()?(screenfull.request(g),n.$emit("fullscreenEnabled"),!0):!1}function t(){o.fullscreenEnabled()&&o.isFullscreen()&&o.toggleFullscreen()}function i(){if(o.fullscreenEnabled()){var e=screenfull.isFullscreen;return screenfull.toggle(g),n.$emit(e?"fullscreenDisabled":"fullscreenEnabled"),!0}return!1}function f(){return o.fullscreenEnabled()?screenfull.isFullscreen:!1}function a(){return"undefined"!=typeof screenfull?screenfull.enabled:!1}var o=this;o.setFullScreenElement=u,o.onFullscreenChange=c,o.requestFullscreen=s,o.removeFullscreen=t,o.toggleFullscreen=i,o.isFullscreen=f,o.fullscreenEnabled=a;var g;r()}e.module("angularScreenfull").directive("ngsfFullscreen",n),n.$inject=["$parse"],l.$inject=["$scope","$document"]}(angular),function(e){function n(e){return{restrict:"A",require:"^ngsfFullscreen",link:function(n,l,r,u){u.fullscreenEnabled()?e.removeClass(l,"ng-hide"):e.addClass(l,"ng-hide")}}}e.module("angularScreenfull").directive("showIfFullscreenEnabled",n),n.$inject=["$animate"]}(angular),function(e){function n(e){return{restrict:"A",require:"^ngsfFullscreen",link:function(n,l,r,u){var c=function(){var n=u.isFullscreen();("false"===r.showIfFullscreen||r.showIfFullscreen===!1)&&(n=!n),n?e.removeClass(l,"ng-hide"):e.addClass(l,"ng-hide")};c();var s=u.onFullscreenChange(c);n.$on("$destroy",s)}}}e.module("angularScreenfull").directive("showIfFullscreen",n),n.$inject=["$animate"]}(angular),function(e){function n(){return{restrict:"A",require:"^ngsfFullscreen",link:function(e,n,l,r){n.on("click",function(){r.toggleFullscreen()})}}}e.module("angularScreenfull").directive("ngsfToggleFullscreen",n)}(angular); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..683ba6d --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,24 @@ +var gulp = require('gulp'), + concat = require('gulp-concat'), + uglify = require('gulp-uglify'), + rename = require('gulp-rename'); + + +gulp.task('process-scripts', function() { + return gulp.src('./src/**/*.js') + .pipe(concat('angular-screenfull.js')) + .pipe(gulp.dest('./dist/')) + .pipe(uglify()) + .pipe(rename({suffix: '.min'})) + .pipe(gulp.dest('./dist/')); + +}); + + +gulp.task('watch', function() { + gulp.watch('./src/**/*.js', ['process-scripts']); + +}); + + +gulp.task('default', ['process-scripts','watch']); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..9a4d2e8 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "angular-screenfull", + "version": "0.1.0", + "description": "Angular bindings to the Screenfull library to allow fullscreen in your app.", + "main": "dist/angular-screenfull.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/hrajchert/angular-screenfull.git" + }, + "keywords": [ + "angular", + "fullscreen", + "screenfull" + ], + "author": "Hernan Rajchert", + "license": "MIT", + "bugs": { + "url": "https://github.com/hrajchert/angular-screenfull/issues" + }, + "homepage": "https://github.com/hrajchert/angular-screenfull", + "devDependencies": { + "gulp": "^3.8.11", + "gulp-concat": "^2.5.2", + "gulp-rename": "^1.2.0", + "gulp-uglify": "^1.1.0" + } +} diff --git a/src/directive/fullscreen.js b/src/directive/fullscreen.js new file mode 100644 index 0000000..0a076c8 --- /dev/null +++ b/src/directive/fullscreen.js @@ -0,0 +1,120 @@ +/* global angular, screenfull */ +(function(angular) { + angular.module('angularScreenfull') + .directive('ngsfFullscreen',ngsfFullscreenDirective); + + ngsfFullscreenDirective.$inject = ['$parse']; + function ngsfFullscreenDirective ($parse) { + return { + restrict: 'A', + require: 'ngsfFullscreen', + controller: ngsfFullscreenController, + link: function(scope, elm, attrs, ctrl) { + // If the directive has a value, add the controller to the scope under that name + if (attrs.ngsfFullscreen && attrs.ngsfFullscreen !== '') { + var p = $parse(attrs.ngsfFullscreen); + p.assign(scope, ctrl); + } + + // Make this the current fullscreen element + ctrl.setFullScreenElement(elm[0]); + } + }; + } + + + ngsfFullscreenController.$inject = ['$scope', '$document']; + function ngsfFullscreenController ($scope, $document) { + var ctrl = this; + + ctrl.setFullScreenElement = setFullScreenElement; + ctrl.onFullscreenChange = onFullscreenChange; + ctrl.requestFullscreen = requestFullscreen; + ctrl.removeFullscreen = removeFullscreen; + ctrl.toggleFullscreen = toggleFullscreen; + ctrl.isFullscreen = isFullscreen; + ctrl.fullscreenEnabled = fullscreenEnabled; + + function subscribeToEvents () { + if (ctrl.fullscreenEnabled()) { + var fullscreenchange = function () { + if (ctrl.isFullscreen()) { + angular.element(_elm).addClass('fullscreen'); + } else { + angular.element(_elm).removeClass('fullscreen'); + } + $scope.$emit('fullscreenchange'); + }; + + $document[0].addEventListener(screenfull.raw.fullscreenchange, fullscreenchange); + $scope.$on('$destroy', function() { + $document[0].removeEventListener(screenfull.raw.fullscreenchange, fullscreenchange); + }); + + } + } + + var _elm; + + function setFullScreenElement (elm) { + _elm = elm; + } + + function onFullscreenChange (handler) { + return $scope.$on('fullscreenchange', handler); + } + + function requestFullscreen () { + if (ctrl.fullscreenEnabled()) { + screenfull.request(_elm); + $scope.$emit('fullscreenEnabled'); + return true; + } + return false; + } + + function removeFullscreen () { + if (ctrl.fullscreenEnabled()) { + if (ctrl.isFullscreen()) { + ctrl.toggleFullscreen(); + } + } + } + + + function toggleFullscreen () { + if (ctrl.fullscreenEnabled()) { + var isFullscreen = screenfull.isFullscreen; + screenfull.toggle(_elm); + if (isFullscreen) { + $scope.$emit('fullscreenDisabled'); + } else { + $scope.$emit('fullscreenEnabled'); + } + return true; + } + return false; + } + + + function isFullscreen () { + if (ctrl.fullscreenEnabled()) { + return screenfull.isFullscreen; + } + return false; + } + + + + function fullscreenEnabled () { + if (typeof screenfull !== 'undefined') { + return screenfull.enabled; + } + return false; + } + + subscribeToEvents(); + + } +})(angular); + diff --git a/src/directive/show-if-fullscreen-enabled.js b/src/directive/show-if-fullscreen-enabled.js new file mode 100644 index 0000000..c55d434 --- /dev/null +++ b/src/directive/show-if-fullscreen-enabled.js @@ -0,0 +1,23 @@ +/* global angular */ +(function(angular) { + angular.module('angularScreenfull') + .directive('showIfFullscreenEnabled', showIfFullscreenEnabledDirective); + + showIfFullscreenEnabledDirective.$inject = ['$animate']; + + function showIfFullscreenEnabledDirective ($animate) { + return { + restrict: 'A', + require: '^ngsfFullscreen', + link: function(scope, elm, attrs,fullScreenCtrl) { + if (fullScreenCtrl.fullscreenEnabled()) { + $animate.removeClass(elm, 'ng-hide'); + } else { + $animate.addClass(elm, 'ng-hide'); + } + } + }; + } +})(angular); + + diff --git a/src/directive/show-if-fullscreen.js b/src/directive/show-if-fullscreen.js new file mode 100644 index 0000000..ecb336d --- /dev/null +++ b/src/directive/show-if-fullscreen.js @@ -0,0 +1,31 @@ +/* global angular */ +(function(angular) { + angular.module('angularScreenfull') + + .directive('showIfFullscreen', showIfFullscreenDirective); + showIfFullscreenDirective.$inject = ['$animate']; + function showIfFullscreenDirective ($animate) { + return { + restrict: 'A', + require: '^ngsfFullscreen', + link: function(scope, elm, attrs,fullScreenCtrl) { + var hideOrShow = function () { + + var show = fullScreenCtrl.isFullscreen(); + if (attrs.showIfFullscreen === 'false' || attrs.showIfFullscreen === false) { + show = !show; + } + + if ( show ) { + $animate.removeClass(elm, 'ng-hide'); + } else { + $animate.addClass(elm, 'ng-hide'); + } + }; + hideOrShow(); + var unwatch = fullScreenCtrl.onFullscreenChange(hideOrShow); + scope.$on('$destroy', unwatch); + } + }; + } +})(angular); diff --git a/src/directive/toggle-fullscreen.js b/src/directive/toggle-fullscreen.js new file mode 100644 index 0000000..2f2e23d --- /dev/null +++ b/src/directive/toggle-fullscreen.js @@ -0,0 +1,18 @@ +/* global angular */ +(function(angular) { + angular.module('angularScreenfull') + .directive('ngsfToggleFullscreen', ngsfToggleFullscreenDirective); + + function ngsfToggleFullscreenDirective () { + return { + restrict: 'A', + require: '^ngsfFullscreen', + link: function(scope, elm, attrs, fullScreenCtrl) { + elm.on('click', function() { + fullScreenCtrl.toggleFullscreen(); + }); + } + }; + } +})(angular); + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..074f900 --- /dev/null +++ b/src/main.js @@ -0,0 +1,4 @@ +/* global angular */ +(function(angular) { + angular.module('angularScreenfull', []); +})(angular); \ No newline at end of file