refactor(IntersectionService): change next shape to {isIntersecting: boolean, hostElement: ElementRef}

Author: xidedix

projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts

@@ -13,7 +13,8 @@ import {
   Output
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { finalize, fromEvent, Subscription, withLatestFrom, zipWith } from 'rxjs';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter, finalize, withLatestFrom, zipWith } from 'rxjs/operators';
 
 import { IntersectionService } from '../../services/intersection.service';
 import { IListenersConfig, ListenersService } from '../../services/listeners.service';
@@ -96,7 +97,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
     };
   }
 
-  private timerId!: any;
+  private timerId: number | undefined = undefined;
   private activeItemInterval = 0;
   private swipeSubscription?: Subscription;
   readonly #destroyRef = inject(DestroyRef);
@@ -117,6 +118,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   }
 
   ngOnDestroy(): void {
+    this.resetTimer();
     this.clearListeners();
     this.swipeSubscribe(false);
   }
@@ -169,6 +171,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
 
   resetTimer(): void {
     clearTimeout(this.timerId);
+    this.timerId = undefined;
   }
 
   private carouselStateSubscribe(): void {
@@ -186,19 +189,20 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
       });
   }
 
-  private intersectionServiceSubscribe(subscribe: boolean = true): void {
-    this.intersectionService.createIntersectionObserver(this.hostElement);
+  private intersectionServiceSubscribe(): void {
     this.intersectionService.intersecting$
       .pipe(
+        filter(next => next.hostElement === this.hostElement),
         finalize(() => {
           this.intersectionService.unobserve(this.hostElement);
         }),
         takeUntilDestroyed(this.#destroyRef)
       )
-      .subscribe(isIntersecting => {
-        this.visible = isIntersecting;
-        isIntersecting ? this.setTimer() : this.resetTimer();
+      .subscribe(next => {
+        this.visible = next.isIntersecting;
+        next.isIntersecting ? this.setTimer() : this.resetTimer();
       });
+    this.intersectionService.createIntersectionObserver(this.hostElement);
   }
 
   private swipeSubscribe(subscribe: boolean = true): void {

projects/coreui-angular/src/lib/popover/popover.directive.ts

@@ -19,7 +19,7 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
-import { debounceTime, finalize } from 'rxjs/operators';
+import { debounceTime, filter, finalize } from 'rxjs/operators';
 import { createPopper, Instance, Options } from '@popperjs/core';
 
 import { Triggers } from '../coreui.types';
@@ -153,18 +153,19 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
     this.listenersService.clearListeners();
   }
 
-  private intersectionServiceSubscribe(subscribe: boolean = true): void {
+  private intersectionServiceSubscribe(): void {
     this.intersectionService.createIntersectionObserver(this.hostElement);
     this.intersectionService.intersecting$
       .pipe(
+        filter(next => next.hostElement === this.hostElement),
         debounceTime(100),
         finalize(() => {
           this.intersectionService.unobserve(this.hostElement);
         }),
         takeUntilDestroyed(this.#destroyRef)
       )
-      .subscribe(isIntersecting => {
-        this.visible = isIntersecting ? this.visible : false;
+      .subscribe(next => {
+        this.visible = next.isIntersecting ? this.visible : false;
         !this.visible && this.removePopoverElement();
       });
   }

projects/coreui-angular/src/lib/services/intersection.service.ts

@@ -8,19 +8,16 @@ export interface IIntersectionObserverInit {
   threshold?: number | number[];
 }
 
-@Injectable(
-  { providedIn: 'root' }
-)
+@Injectable({
+  providedIn: 'root'
+})
 export class IntersectionService implements OnDestroy {
 
   platformId = inject(PLATFORM_ID);
 
-  readonly #intersecting = new BehaviorSubject<boolean>(false);
+  readonly #intersecting: BehaviorSubject<any> = new BehaviorSubject({ isIntersecting: false });
   readonly intersecting$ = this.#intersecting.asObservable();
 
-  private intersectionObserver!: IntersectionObserver;
-  private hostElement!: ElementRef;
-
   private defaultObserverOptions: IIntersectionObserverInit = {
     root: null,
     rootMargin: '0px',
@@ -32,23 +29,20 @@ export class IntersectionService implements OnDestroy {
   createIntersectionObserver(hostElement: ElementRef, observerOptions = this.defaultObserverOptions) {
 
     if (isPlatformServer(this.platformId)) {
-      this.#intersecting.next(true);
+      this.#intersecting.next({ isIntersecting: true, hostElement });
       return;
     }
 
-    // this.hostElement = hostElement;
-    const options = { ...this.defaultObserverOptions, ...observerOptions };
+    const options: IIntersectionObserverInit = { ...this.defaultObserverOptions, ...observerOptions };
 
     const handleIntersect = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
       entries.forEach((entry: any) => {
-        this.#intersecting.next(entry.isIntersecting);
+        this.#intersecting.next({ isIntersecting: entry.isIntersecting, hostElement });
       });
     };
 
-    const intersectionObserver: IntersectionObserver = new IntersectionObserver(handleIntersect, options);
-    intersectionObserver.observe(hostElement.nativeElement);
-    this.hostElementRefs.set(hostElement, intersectionObserver);
-
+    this.hostElementRefs.set(hostElement, new IntersectionObserver(handleIntersect, options));
+    this.hostElementRefs.get(hostElement)?.observe(hostElement.nativeElement);
   }
 
   unobserve(elementRef: ElementRef) {

projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts

@@ -19,7 +19,7 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
-import { debounceTime, finalize } from 'rxjs/operators';
+import { debounceTime, filter, finalize } from 'rxjs/operators';
 import { createPopper, Instance, Options } from '@popperjs/core';
 
 import { Triggers } from '../coreui.types';
@@ -153,18 +153,19 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit, AfterView
     this.listenersService.clearListeners();
   }
 
-  private intersectionServiceSubscribe(subscribe: boolean = true): void {
+  private intersectionServiceSubscribe(): void {
     this.intersectionService.createIntersectionObserver(this.hostElement);
     this.intersectionService.intersecting$
       .pipe(
+        filter(next => next.hostElement === this.hostElement),
         debounceTime(100),
         finalize(() => {
           this.intersectionService.unobserve(this.hostElement);
         }),
         takeUntilDestroyed(this.#destroyRef)
       )
-      .subscribe(isIntersecting => {
-        this.visible = isIntersecting ? this.visible : false;
+      .subscribe(next => {
+        this.visible = next.isIntersecting ? this.visible : false;
         !this.visible && this.removeTooltipElement();
       });
   }