From e7c57e031489b2e7c2aaeed6dff09455495fcb51 Mon Sep 17 00:00:00 2001 From: Danilo Bargen Date: Tue, 7 Mar 2017 11:32:10 +0100 Subject: [PATCH 1/2] Implement page visibility support --- README.md | 4 ++ angular-inview.js | 10 ++++- examples/pagevisibility.html | 80 ++++++++++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 examples/pagevisibility.html diff --git a/README.md b/README.md index ffb00a6..9225fab 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,10 @@ 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). + ### 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 index debc09e..5dadbe8 100644 --- a/angular-inview.js +++ b/angular-inview.js @@ -62,7 +62,12 @@ 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')); + } // Merge with container's events signal if (container) { @@ -94,8 +99,9 @@ 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 info = { - inView: isVisible && intersectRect(elementRect, viewportRect), + inView: documentVisible && isVisible && intersectRect(elementRect, viewportRect), event: event, element: element, elementRect: elementRect, diff --git a/examples/pagevisibility.html b/examples/pagevisibility.html new file mode 100644 index 0000000..9aa84ba --- /dev/null +++ b/examples/pagevisibility.html @@ -0,0 +1,80 @@ + + + + + angular-inview basic example + + + + +
+ +
+ + + + + + + + From 4ff938a6ff1f88d459e5fd6d87076cd123a25223 Mon Sep 17 00:00:00 2001 From: Danilo Bargen Date: Tue, 23 Oct 2018 13:22:16 +0200 Subject: [PATCH 2/2] Implement page focus support --- README.md | 4 ++ angular-inview.js | 8 +++- examples/pagefocus.html | 88 ++++++++++++++++++++++++++++++++++++ examples/pagevisibility.html | 9 ++-- 4 files changed, 105 insertions(+), 4 deletions(-) create mode 100644 examples/pagefocus.html diff --git a/README.md b/README.md index 9225fab..be79f04 100644 --- 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 index 5dadbe8..1d2cf26 100644 --- 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 new file mode 100644 index 0000000..8c2401c --- /dev/null +++ b/examples/pagefocus.html @@ -0,0 +1,88 @@ + + + + + angular-inview basic example + + + + +
+
    +
  • +
+
+ + + + + + + + diff --git a/examples/pagevisibility.html b/examples/pagevisibility.html index 9aa84ba..40d3e8a 100644 --- a/examples/pagevisibility.html +++ b/examples/pagevisibility.html @@ -41,7 +41,9 @@ @@ -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) }); + }); }); });