Implement page focus support

thenikso · Oct 23, 2018 · 4ff938a · 4ff938a
1 parent e7c57e0
commit 4ff938a
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -146,6 +146,10 @@ containing:
   visibility should be considered when marking an element as visible or not
   (default false).
 
+- `considerDocumentFocus`: A boolean indicating whether or not the document
+  focus should be considered when marking an element as visible or not
+  (default false).
+
 ### InViewContainer
 
 Use `in-view-container` when you have a scrollable container that contains `in-view`

diff --git a/angular-inview.js b/angular-inview.js
@@ -69,6 +69,11 @@ function inViewDirective ($parse) {
         viewportEventSignal = viewportEventSignal.merge(signalFromEvent(document, 'visibilitychange'));
       }
 
+      // Merged with the page focus/blur events
+      if (options.considerPageFocus) {
+        viewportEventSignal = viewportEventSignal.merge(signalFromEvent(window, 'focus blur'));
+      }
+
       // Merge with container's events signal
       if (container) {
         viewportEventSignal = viewportEventSignal.merge(container.eventsSignal);
@@ -100,8 +105,9 @@ function inViewDirective ($parse) {
         var elementRect = offsetRect(element[0].getBoundingClientRect(), options.offset);
         var isVisible = !!(element[0].offsetWidth || element[0].offsetHeight || element[0].getClientRects().length);
         var documentVisible = !options.considerPageVisibility || document.visibilityState === 'visible' || document.hidden === false;
+        var documentFocussed = !options.considerPageFocus || document.hasFocus();
         var info = {
-          inView: documentVisible && isVisible && intersectRect(elementRect, viewportRect),
+          inView: documentVisible && documentFocussed && isVisible && intersectRect(elementRect, viewportRect),
           event: event,
           element: element,
           elementRect: elementRect,

diff --git a/examples/pagefocus.html b/examples/pagefocus.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="pageFocusApp">
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>angular-inview basic example</title>
+	<style type="text/css">
+	#hud {
+		background: white;
+		border: 1px solid gray;
+		bottom: 0;
+		margin: 20px;
+		min-width: 220px;
+		position: fixed;
+		right: 0;
+		top: 0;
+		width: 25%;
+		overflow: auto;
+	}
+
+	#lines {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	#lines li {
+		height: 100px;
+	}
+
+	#lines li:nth-child(odd) {
+		background-color: lightgray;
+	}
+	</style>
+</head>
+<body ng-controller="basicCtrl">
+
+	<div id="hud">
+		<ul>
+			<li ng-repeat="l in inviewLogs" ng-bind-html="l.message"></li>
+		</ul>
+	</div>
+
+	<ul id="lines">
+		<li ng-repeat="t in testLines"
+            in-view="lineInView($index, $inview, $inviewInfo)"
+            in-view-options="{ considerPageFocus: true }">This is test line #{{$index}}</li>
+	</ul>
+
+	<script src="../node_modules/angular/angular.js"></script>
+	<script src="../angular-inview.js"></script>
+	<script type="text/javascript">
+	angular.module('pageFocusApp', ['angular-inview']).controller('basicCtrl', function basicCtrl ($scope, $sce) {
+		var logId = 0;
+		$scope.testLines = [];
+		for (var i = 20; i >= 0; i--) {
+			$scope.testLines.push(i);
+		};
+		$scope.inviewLogs = [];
+		$scope.lineInView = function(index, inview, inviewInfo) {
+            console.log('inview', index);
+			var inViewReport = inview ? '<strong>enters</strong>' : '<strong>exit</strong>';
+			var inviewpart = [];
+			for (var p in inviewInfo.parts) {
+				if (inviewInfo.parts[p]) {
+					inviewpart.push(p);
+				}
+			}
+			inviewpart = inviewpart.length % 4 === 0 ? 'all' : inviewpart.join(', ');
+			if (typeof(inviewpart) != 'undefined') {
+				inViewReport = '<strong>' + inviewpart + '</strong> parts ' + inViewReport;
+			}
+			$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Line <em>#' + index + '</em>: ' + inViewReport) });
+			return false;
+		}
+        document.addEventListener('focus', () => {
+            $scope.$apply(() => {
+                $scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: focussed') });
+            });
+        });
+        document.addEventListener('blur', () => {
+            $scope.$apply(() => {
+                $scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: lost focus') });
+            });
+        });
+	});
+	</script>
+</body>
+</html>
diff --git a/examples/pagevisibility.html b/examples/pagevisibility.html
@@ -41,7 +41,9 @@
 	</div>
 
 	<ul id="lines">
-		<li ng-repeat="t in testLines" in-view="lineInView($index, $inview, $inviewInfo)" in-view-options="{ considerPageVisibility: true }">This is test line #{{$index}}</li>
+		<li ng-repeat="t in testLines"
+            in-view="lineInView($index, $inview, $inviewInfo)"
+            in-view-options="{ considerPageVisibility: true }">This is test line #{{$index}}</li>
 	</ul>
 
 	<script src="../node_modules/angular/angular.js"></script>
@@ -71,8 +73,9 @@
 			return false;
 		}
         document.addEventListener('visibilitychange', () => {
-            console.log('oh');
-			$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: ' + document.visibilityState) });
+            $scope.$apply(() => {
+                $scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: ' + document.visibilityState) });
+            });
         });
 	});
 	</script>