Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement page visibility support #122

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Implement page visibility support #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7c57e0
Implement page visibility support
dbrgn Mar 7, 2017
4ff938a
Implement page focus support
dbrgn Oct 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,14 @@ containing:
- `throttle`: a number indicating a millisecond value of throttle which will
limit the in-view event firing rate to happen every that many milliseconds

- `considerPageVisibility`: A boolean indicating whether or not the page
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`
Expand Down
16 changes: 14 additions & 2 deletions angular-inview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,17 @@ function inViewDirective ($parse) {
var viewportEventSignal = signalSingle({ type: 'initial' })

// Merged with the window events
.merge(signalFromEvent(window, 'checkInView click ready wheel mousewheel DomMouseScroll MozMousePixelScroll resize scroll touchmove mouseup keydown'))
.merge(signalFromEvent(window, 'checkInView click ready wheel mousewheel DomMouseScroll MozMousePixelScroll resize scroll touchmove mouseup keydown'));

// Merged with the page visibility events
if (options.considerPageVisibility) {
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) {
Expand Down Expand Up @@ -94,8 +104,10 @@ function inViewDirective ($parse) {
viewportRect = offsetRect(viewportRect, options.viewportOffset);
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: isVisible && intersectRect(elementRect, viewportRect),
inView: documentVisible && documentFocussed && isVisible && intersectRect(elementRect, viewportRect),
event: event,
element: element,
elementRect: elementRect,
Expand Down
88 changes: 88 additions & 0 deletions examples/pagefocus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
83 changes: 83 additions & 0 deletions examples/pagevisibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="pageVisibilityApp">
<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="{ considerPageVisibility: 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('pageVisibilityApp', ['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('visibilitychange', () => {
$scope.$apply(() => {
$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: ' + document.visibilityState) });
});
});
});
</script>
</body>
</html>