Initial commit

.gitignore

@@ -0,0 +1,2 @@
+bower_components/
+node_modules/

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) <year> <copyright holders>
+
+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.

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
+
+    <script src="bower_components/screenfull/dist/screenfull.js"></script>
+    <script src="bower_components/angular-screenfull/dist/angular-screenfull.min.js"></script>
+
+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
+<div ngsf-fullscreen>
+    <p>This is a fullscreen element</p>
+    <button ngsf-toggle-fullscreen>Toggle fullscreen</button>
+</div>
+```
+
+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
+<div ngsf-fullscreen="fullscreenCtrl">
+    <p>This is another fullscreen element</p>
+    <button ng-click="fullscreenCtrl.toggleFullscreen()">Toggle fullscreen</button>
+</div>
+```
+
+We also provide directives to show the elements based on the fullscreen status, so for example you can have this
+
+```html
+<div ngsf-fullscreen>
+    <p>This is yet another fullscreen element</p>
+    <a ngsf-toggle-fullscreen show-if-fullscreen-enabled>
+        <i show-if-fullscreen=false>Icon for enter fullscreen</i>
+        <i show-if-fullscreen=true>Icon for exit fullscreen</i>
+    </a>
+</div>
+```
+

bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "angular-screenfull",
+  "version": "0.1.0",
+  "authors": [
+    "Hernan Rajchert <hrajchert@gmail.com>"
+  ],
+  "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"
+  }
+}

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);
+

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']);

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"
+  }
+}