Skip to content

Commit 4ff938a

Browse files
dbrgndbrgn
committed
Implement page focus support
1 parent e7c57e0 commit 4ff938a

File tree

4 files changed

+105
-4
lines changed

4 files changed

+105
-4
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,10 @@ containing:
146146
visibility should be considered when marking an element as visible or not
147147
(default false).
148148

149+
- `considerDocumentFocus`: A boolean indicating whether or not the document
150+
focus should be considered when marking an element as visible or not
151+
(default false).
152+
149153
### InViewContainer
150154

151155
Use `in-view-container` when you have a scrollable container that contains `in-view`

‎angular-inview.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@ function inViewDirective ($parse) {
6969
viewportEventSignal = viewportEventSignal.merge(signalFromEvent(document, 'visibilitychange'));
7070
}
7171

72+
// Merged with the page focus/blur events
73+
if (options.considerPageFocus) {
74+
viewportEventSignal = viewportEventSignal.merge(signalFromEvent(window, 'focus blur'));
75+
}
76+
7277
// Merge with container's events signal
7378
if (container) {
7479
viewportEventSignal = viewportEventSignal.merge(container.eventsSignal);
@@ -100,8 +105,9 @@ function inViewDirective ($parse) {
100105
var elementRect = offsetRect(element[0].getBoundingClientRect(), options.offset);
101106
var isVisible = !!(element[0].offsetWidth || element[0].offsetHeight || element[0].getClientRects().length);
102107
var documentVisible = !options.considerPageVisibility || document.visibilityState === 'visible' || document.hidden === false;
108+
var documentFocussed = !options.considerPageFocus || document.hasFocus();
103109
var info = {
104-
inView: documentVisible && isVisible && intersectRect(elementRect, viewportRect),
110+
inView: documentVisible && documentFocussed && isVisible && intersectRect(elementRect, viewportRect),
105111
event: event,
106112
element: element,
107113
elementRect: elementRect,

‎examples/pagefocus.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="pageFocusApp">
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<title>angular-inview basic example</title>
6+
<style type="text/css">
7+
#hud {
8+
background: white;
9+
border: 1px solid gray;
10+
bottom: 0;
11+
margin: 20px;
12+
min-width: 220px;
13+
position: fixed;
14+
right: 0;
15+
top: 0;
16+
width: 25%;
17+
overflow: auto;
18+
}
19+
20+
#lines {
21+
list-style: none;
22+
margin: 0;
23+
padding: 0;
24+
}
25+
26+
#lines li {
27+
height: 100px;
28+
}
29+
30+
#lines li:nth-child(odd) {
31+
background-color: lightgray;
32+
}
33+
</style>
34+
</head>
35+
<body ng-controller="basicCtrl">
36+
37+
<div id="hud">
38+
<ul>
39+
<li ng-repeat="l in inviewLogs" ng-bind-html="l.message"></li>
40+
</ul>
41+
</div>
42+
43+
<ul id="lines">
44+
<li ng-repeat="t in testLines"
45+
in-view="lineInView($index, $inview, $inviewInfo)"
46+
in-view-options="{ considerPageFocus: true }">This is test line #{{$index}}</li>
47+
</ul>
48+
49+
<script src="../node_modules/angular/angular.js"></script>
50+
<script src="../angular-inview.js"></script>
51+
<script type="text/javascript">
52+
angular.module('pageFocusApp', ['angular-inview']).controller('basicCtrl', function basicCtrl ($scope, $sce) {
53+
var logId = 0;
54+
$scope.testLines = [];
55+
for (var i = 20; i >= 0; i--) {
56+
$scope.testLines.push(i);
57+
};
58+
$scope.inviewLogs = [];
59+
$scope.lineInView = function(index, inview, inviewInfo) {
60+
console.log('inview', index);
61+
var inViewReport = inview ? '<strong>enters</strong>' : '<strong>exit</strong>';
62+
var inviewpart = [];
63+
for (var p in inviewInfo.parts) {
64+
if (inviewInfo.parts[p]) {
65+
inviewpart.push(p);
66+
}
67+
}
68+
inviewpart = inviewpart.length % 4 === 0 ? 'all' : inviewpart.join(', ');
69+
if (typeof(inviewpart) != 'undefined') {
70+
inViewReport = '<strong>' + inviewpart + '</strong> parts ' + inViewReport;
71+
}
72+
$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Line <em>#' + index + '</em>: ' + inViewReport) });
73+
return false;
74+
}
75+
document.addEventListener('focus', () => {
76+
$scope.$apply(() => {
77+
$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: focussed') });
78+
});
79+
});
80+
document.addEventListener('blur', () => {
81+
$scope.$apply(() => {
82+
$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: lost focus') });
83+
});
84+
});
85+
});
86+
</script>
87+
</body>
88+
</html>

‎examples/pagevisibility.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
</div>
4242

4343
<ul id="lines">
44-
<li ng-repeat="t in testLines" in-view="lineInView($index, $inview, $inviewInfo)" in-view-options="{ considerPageVisibility: true }">This is test line #{{$index}}</li>
44+
<li ng-repeat="t in testLines"
45+
in-view="lineInView($index, $inview, $inviewInfo)"
46+
in-view-options="{ considerPageVisibility: true }">This is test line #{{$index}}</li>
4547
</ul>
4648

4749
<script src="../node_modules/angular/angular.js"></script>
@@ -71,8 +73,9 @@
7173
return false;
7274
}
7375
document.addEventListener('visibilitychange', () => {
74-
console.log('oh');
75-
$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: ' + document.visibilityState) });
76+
$scope.$apply(() => {
77+
$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: ' + document.visibilityState) });
78+
});
7679
});
7780
});
7881
</script>

0 commit comments

Comments
 (0)