Add requireOffsetParent option

angular-inview.js

@@ -73,6 +73,13 @@ function inViewDirective ($parse) {
       if (options.throttle) {
         viewportEventSignal = viewportEventSignal.throttle(options.throttle);
       }
+      // Apply a default short throttle when requiring an offset parent.
+      // This should allow time for a digest cycle to take place which may
+      // be significant if the event triggered changed the visiblity of the
+      // offset parent
+      else if (options.requireOffsetParent) {
+        viewportEventSignal = viewportEventSignal.throttle(100);
+      }
 
       // Map to viewport intersection and in-view informations
       var inviewInfoSignal = viewportEventSignal
@@ -93,8 +100,13 @@ function inViewDirective ($parse) {
         }
         viewportRect = offsetRect(viewportRect, options.viewportOffset);
         var elementRect = offsetRect(element[0].getBoundingClientRect(), options.offset);
+        var inView = intersectRect(elementRect, viewportRect);
+
+        if (inView && options.requireOffsetParent) {
+          inView = element[0].offsetParent !== null;
+        }
         var info = {
-          inView: intersectRect(elementRect, viewportRect),
+          inView: inView,
           event: event,
           element: element,
           elementRect: elementRect,
@@ -378,4 +390,4 @@ if (typeof define === 'function' && define.amd) {
   module.exports = angularInviewModule;
 }
 
-})();
+})();

angular-inview.spec.js

@@ -302,6 +302,79 @@ describe("angular-inview", function() {
 
 	});
 
+	describe("requiring an offsetParent", function() {
+		it("should trigger for visible elements as normal", function(done) {
+			makeTestForHtml(
+				'<div in-view="spy($inview)" ' +
+				'     in-view-options="{requireOffsetParent: true}">' +
+				'</div>'
+			)
+			.then(function (test) {
+				expect(test.spy.calls.count()).toBe(1);
+				expect(test.spy).toHaveBeenCalledWith(true);
+			})
+			.then(done);
+		});
+
+		it("should not trigger for elements with hidden parents", function(done) {
+			makeTestForHtml(
+				'<div style="display: none;">' +
+				'  <div in-view="spy($inview)" ' +
+				'       in-view-options="{requireOffsetParent: true}">' +
+				'  </div>' +
+				'</div>'
+			)
+			.then(function (test) {
+				expect(test.spy).not.toHaveBeenCalled();
+			})
+			.then(done);
+		});
+
+		it("should report positive when the parent becomes visible", function(done) {
+			makeTestForHtml(
+				'<div style="display: none;">' +
+				'  <div in-view="spy($inview)" ' +
+				'       in-view-options="{requireOffsetParent: true}">' +
+				'  </div>' +
+				'</div>'
+			)
+			.then(function (test) {
+				expect(test.spy).not.toHaveBeenCalled();
+				test.element.removeAttr('style');
+				angular.element(window).triggerHandler('click');
+				return test;
+			})
+			.then(lazyWait(150))
+			.then(function (test) {
+				expect(test.spy.calls.count()).toEqual(1);
+				expect(test.spy).toHaveBeenCalledWith(true);
+			})
+			.then(done);
+		});
+
+		it("should report negative when the parent becomes hidden", function(done) {
+			makeTestForHtml(
+				'<div>' +
+				'  <div in-view="spy($inview)" ' +
+				'       in-view-options="{requireOffsetParent: true}">' +
+				'  </div>' +
+				'</div>'
+			)
+			.then(function (test) {
+				test.spy.calls.reset();
+				test.element.attr('style', 'display: none;');
+				angular.element(window).triggerHandler('click');
+				return test;
+			})
+			.then(lazyWait(150))
+			.then(function (test) {
+				expect(test.spy.calls.count()).toEqual(1);
+				expect(test.spy).toHaveBeenCalledWith(false);
+			})
+			.then(done);
+		});
+	})
+
 	// A test object has the properties:
 	//
 	//  - `element`: An angular element inserted in the test page
@@ -405,5 +478,4 @@ describe("angular-inview", function() {
 			});
 		}
 	}
-
 });

package.json

@@ -22,14 +22,15 @@
   },
   "homepage": "https://github.com/thenikso/angular-inview#readme",
   "peerDependencies": {
-    "angular": "^1.5.8"
+    "angular": "^1.5.8",
+    "jasmine-core": "^2.5.2"
   },
   "devDependencies": {
     "docco": "^0.7.0",
     "gh-pages": "^0.11.0",
-    "karma": "^0.12.24",
-    "karma-chrome-launcher": "^0.1.5",
-    "karma-jasmine": "~0.2",
+    "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-jasmine": "^1.0.2",
     "angular-mocks": "^1.5.8"
   }
 }