angular-in-viewport - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/in-viewport.js

@@ -41,40 +41,13 @@ (function (angular) {
                 });
-            });
-        }
-    }
 
-})(window.angular);
-(function (angular) {
-    'use strict';
+                if (iAttrs.viewportLeave && iElement.attr('viewport-leave-registered') !== 'true') {
+                    iElement.attr('viewport-leave-registered', 'true');
 
-    angular
-        .module('in-viewport')
-        .directive('viewportLeave', viewportLeaveDefinition);
-
-    /**
-     * Directive definition for viewport-enter
-     */
-    function viewportLeaveDefinition()
-    {
-        return {
-            require: '^viewport',
-            restrict: 'A',
-            link: viewportLeaveLinker
-        };
-    }
-
-    /**
-     * Linker method for leave directive
-     * @param $scope
-     * @param iElement
-     * @param iAttrs
-     * @param viewportController
-     */
-    function viewportLeaveLinker($scope, iElement, iAttrs, controller)
-    {
-        if (iElement[0].nodeType !== 8 && iAttrs.viewportLeave) {
-            controller.add('leave', iElement[0], function () {
-                $scope.$apply(function () {
-                    $scope.$eval(iAttrs.viewportLeave);
-                });
+                    // Lazy add leave callback
+                    controller.add('leave', iElement[0], function () {
+                        $scope.$apply(function () {
+                            $scope.$eval(iAttrs.viewportLeave);
+                        });
+                    });
+                }
             });
@@ -85,2 +58,3 @@ }
 })(window.angular);
+
 (function (angular) {
@@ -87,0 +61,0 @@ 'use strict';

dist/in-viewport.min.js

 !function(i){"use strict";i.module("in-viewport",[])}(window.angular);
-!function(e){"use strict";function n(){return{require:"^viewport",restrict:"A",link:t}}function t(e,n,t,i){8!==n[0].nodeType&&t.viewportEnter&&i.add("enter",n[0],function(){e.$apply(function(){e.$eval(t.viewportEnter)})})}e.module("in-viewport").directive("viewportEnter",n)}(window.angular);
-!function(e){"use strict";function i(){return{require:"^viewport",restrict:"A",link:n}}function n(e,i,n,t){8!==i[0].nodeType&&n.viewportLeave&&t.add("leave",i[0],function(){e.$apply(function(){e.$eval(n.viewportLeave)})})}e.module("in-viewport").directive("viewportLeave",i)}(window.angular);
+!function(e){"use strict";function t(){return{require:"^viewport",restrict:"A",link:r}}function r(e,t,r,i){8!==t[0].nodeType&&r.viewportEnter&&i.add("enter",t[0],function(){e.$apply(function(){e.$eval(r.viewportEnter)}),r.viewportLeave&&"true"!==t.attr("viewport-leave-registered")&&(t.attr("viewport-leave-registered","true"),i.add("leave",t[0],function(){e.$apply(function(){e.$eval(r.viewportLeave)})}))})}e.module("in-viewport").directive("viewportEnter",t)}(window.angular);
 !function(t){"use strict";function e(t){return{restrict:"A",scope:!0,controller:n,link:i(t)}}function n(e){function n(){var e,o,r;if(f){if(a)return void(w=!0);a=!0,e=f(),t.forEach(p,function(t){o=t.element.getBoundingClientRect(),r=i(o.left,o.top,e)||i(o.right,o.top,e)||i(o.left,o.bottom,e)||i(o.right,o.bottom,e),(null===t.state||t.state!==r)&&(r&&"function"==typeof t.enter?t.enter():r||"function"!=typeof t.leave||t.leave()),t.state=r}),a=!1,w&&(w=!1,n())}}function i(t,e,n){return t>=n.left&&t<=n.right&&e>=n.top&&e<=n.bottom}function o(t){f=t}function r(){return f}function u(){window.clearTimeout(d),d=window.setTimeout(function(){n()},100)}function l(t,e,n){var i;if(-1===["leave","enter"].indexOf(t))throw"invalid event specified";i=s.indexOf(e),-1===i&&(s.push(e),p.push({element:e,state:null,leave:null,enter:null}),i=s.length-1),p[i][t]=n}function c(){return p}var d,f=null,a=!1,w=!1,s=[],p=[];t.element(e).on("resize",u).on("orientationchange",u),this.setViewportFn=o,this.getViewportFn=r,this.add=l,this.getItems=c,this.updateDelayed=u}function i(e){var n=function(n,i,o,r){"window"===o.viewport?(r.setViewportFn(function(){return{top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth}}),t.element(e).on("scroll",r.updateDelayed)):(r.setViewportFn(function(){return i[0].getBoundingClientRect()}),i.on("scroll",r.updateDelayed)),n.$watch(function(){r.updateDelayed()})};return n.$inject=["$scope","iElement","iAttrs","viewport"],n}t.module("in-viewport").directive("viewport",e),e.$inject=["$window"],n.$inject=["$window"],i.$inject=["$window"]}(window.angular);

package.json

 {
   "name": "angular-in-viewport",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Directives to check if a DOM element is in a specified viewport",
@@ -24,3 +24,4 @@ "main": "dist/in-viewport.js",
   "devDependencies": {
-    "bower": "1.7.x",
+    "angular-mocks": "1.2.32",
+    "angular-scenario": "1.2.32",
     "gulp": "3.9.x",
@@ -39,3 +40,6 @@ "gulp-concat": "2.4.2",
     "phantomjs": "2.1.3"
+  },
+  "dependencies": {
+    "angular": "1.2.32"
   }
 }

README.md

 [![GitHub version](https://badge.fury.io/gh/showpad%2Fangular-in-viewport.svg)](http://badge.fury.io/gh/showpad%2Fangular-in-viewport)
-[![Bower version](https://badge.fury.io/bo/angular-in-viewport.svg)](http://badge.fury.io/bo/angular-in-viewport)
 [![NPM version](https://badge.fury.io/js/angular-in-viewport.svg)](http://badge.fury.io/js/angular-in-viewport)
@@ -18,7 +17,9 @@
 ### viewport-enter
-Directive (attribute) specifying a DOM element which should be watched. When the element enters the viewport the value of the attribute will be evaled.
+Directive (attribute) specifying a DOM element which should be watched. When the element enters the viewport the value of the attribute will be evaluated.
 
 ### viewport-leave
-Directive (attribute) specifying a DOM element which should be watched. When the element leaves the viewport the value of the attribute will be evaled.
+Directive (attribute) specifying a DOM element which should be watched. When the element leaves the viewport the value of the attribute will be evaluated.
+The viewport-leave attribute needs a viewport-enter attribute with valid callback
 
+
 #Compatibility
@@ -25,0 +26,0 @@ This plugin works with Angular 1.x (v1.2 and higher)

src/directives/enter.directive.js

@@ -34,2 +34,13 @@ (function (angular) {
                 });
+
+                if (iAttrs.viewportLeave && iElement.attr('viewport-leave-registered') !== 'true') {
+                    iElement.attr('viewport-leave-registered', 'true');
+
+                    // Lazy add leave callback
+                    controller.add('leave', iElement[0], function () {
+                        $scope.$apply(function () {
+                            $scope.$eval(iAttrs.viewportLeave);
+                        });
+                    });
+                }
             });
@@ -39,2 +50,2 @@ }
 
-})(window.angular);
+})(window.angular);

test/karma.conf.js

@@ -19,4 +19,4 @@ // Karma configuration
         files: [
-            'bower_components/angular/angular.js',
-            'bower_components/angular-mocks/angular-mocks.js',
+            'node_modules/angular/angular.js',
+            'node_modules/angular-mocks/angular-mocks.js',
 
@@ -87,2 +87,2 @@ 'src/in-viewport.module.js',
     });
-};
+};

test/spec/directives/enter.directive.spec.js

@@ -84,2 +84,39 @@ 'use strict';
 
-});
+    describe('given the callback is triggered', function() {
+        var element, elementScope, callback;
+
+        describe('given the element has a leave property', function() {
+
+            describe('given the element\'s leave callback has not been registered yet', function () {
+                beforeEach(function() {
+                    element = angular.element('<div viewport><div viewport-enter="notVisible= false" viewport-leave="notVisible = true"></div>');
+                    $compile(element)($scope);
+                    elementScope = element.scope();
+                    $scope.$digest();
+                    viewportMockController.items[0].callback();
+                });
+
+
+                it('should add a listener to the viewport controller', function () {
+                    expect(viewportMockController.add.calls.count()).toBe(2);
+                    expect(viewportMockController.items[1].event).toBe('leave');
+                });
+            });
+
+            describe('given the element\'s leave callback has been registered', function() {
+                beforeEach(function() {
+                    element = angular.element('<div viewport><div viewport-leave-registered="true" viewport-enter="notVisible= false" viewport-leave="notVisible = true"></div>');
+                    $compile(element)($scope);
+                    elementScope = element.scope();
+                    $scope.$digest();
+                    viewportMockController.items[0].callback();
+                });
+
+
+                it('should not add a listener to the viewport controller', function () {
+                    expect(viewportMockController.add.calls.count()).toBe(1);
+                });
+            });
+        });
+    });
+});

test/spec/directives/viewport.directive.spec.js

@@ -119,3 +119,3 @@ 'use strict';
 
-        it('should call the on enter callback', function () {
+        it('should call the on leave callback', function () {
             spyOn(window, 'setTimeout').and.callFake(function (callback) {
@@ -128,3 +128,3 @@ callback();
                         '<div style="height: 210px; width: 200px"></div>' +
-                        '<div style="height: 100px; width: 200px;" viewport-leave="leftIt = true"></div>' +
+                        '<div style="height: 100px; width: 200px;" viewport-enter="entered = true" viewport-leave="leftIt = true"></div>' +
                     '</div>'
@@ -150,2 +150,2 @@ ), elementScope;
 
-});
+});

No alert changes

Improved metrics

Number of lines in readme file

47

increased by2.17%

Worsened metrics

Total package byte prevSize

37978

decreased by-6%

Dependency count

1

increased byInfinity%

Dev dependency count

15

increased by7.14%

Number of package files

20

decreased by-20%

Lines of code

846

decreased by-10.38%

Dependency changes

• + Addedangular@1.2.32

• + Addedangular@1.2.32(transitive)