From 237a1a8bc6159cf54129c74434052299cd7b2a11 Mon Sep 17 00:00:00 2001
From: janjoosse <24371035+janjoosse@users.noreply.github.com>
Date: Tue, 23 May 2023 19:07:34 +0200
Subject: [PATCH] fix: 'ishIntersectionObserver' emits 'NotVisible' events when
 target element moves out of viewport (#1433)

* migration note for 'ishIntersectionObserver' returning now `NotVisible` status change as well

BREAKING CHANGES: The `ishIntersectionObserver` returns `NotVisible` status now too (see [Migrations / 4.0 to 4.1](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/migrations.md#40-to-41) for more details).
---
 docs/guides/migrations.md                              |  3 +++
 .../core/directives/intersection-observer.directive.ts | 10 +---------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
index da5bfd1408..aa0e66b464 100644
--- a/docs/guides/migrations.md
+++ b/docs/guides/migrations.md
@@ -17,6 +17,9 @@ If the `addGlobalGuard` function is used for customizations make sure it now wor
 The input parameter `id` of the component `ish-product-quantity` caused issues with duplicate IDs within the page html, therefore it was renamed to `elementId`.
 If the input parameter 'id' of this component has already been used it has to be renamed accordingly.
 
+The `ishIntersectionObserver` returns all 3 `IntersectionStatus` change events `Visible`, `Pending` and now `NotVisible` as well.
+The custom project code needs to be adapted if it does not filter the events where it is used (e.g `if (event === 'Visible')`).
+
 ## 3.3 to 4.0
 
 The Intershop PWA now uses Node.js 18.15.0 LTS with the corresponding npm version 9.5.0 and the `"lockfileVersion": 3,`.
diff --git a/src/app/core/directives/intersection-observer.directive.ts b/src/app/core/directives/intersection-observer.directive.ts
index 353b476346..503c14c848 100644
--- a/src/app/core/directives/intersection-observer.directive.ts
+++ b/src/app/core/directives/intersection-observer.directive.ts
@@ -55,11 +55,7 @@ const fromIntersectionObserver = (element: HTMLElement, config: IntersectionObse
     }>();
 
     const intersectionObserver = new IntersectionObserver((entries, observer) => {
-      entries.forEach(entry => {
-        if (isIntersecting(entry)) {
-          subject$.next({ entry, observer });
-        }
-      });
+      entries.forEach(entry => subject$.next({ entry, observer }));
     }, config);
 
     subject$.subscribe(() => {
@@ -97,7 +93,3 @@ async function isVisible(element: HTMLElement) {
     observer.observe(element);
   });
 }
-
-function isIntersecting(entry: IntersectionObserverEntry) {
-  return entry.isIntersecting || entry.intersectionRatio > 0;
-}