feat: IntersectionService

Author: xidedix

projects/coreui-angular/src/lib/carousel/intersection.service.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+
+import { IntersectionService } from './intersection.service';
+
+describe('IntersectionService', () => {
+  let service: IntersectionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [IntersectionService]
+    });
+    service = new IntersectionService();
+    // service = TestBed.inject(IntersectionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable()
+export class IntersectionService implements OnDestroy {
+
+  constructor() { }
+
+  private intersecting = new BehaviorSubject<boolean>(false);
+  intersecting$ = this.intersecting.asObservable();
+
+  private intersectionObserver!: IntersectionObserver;
+  private hostElement!: { nativeElement: Element; };
+
+  createIntersectionObserver(hostElement: { nativeElement: Element; }) {
+
+    this.hostElement = hostElement;
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.2
+    };
+
+    const handleIntersect = (entries: any[], observer: any) => {
+      entries.forEach((entry: any) => {
+        this.intersecting.next(entry.isIntersecting);
+      });
+    };
+
+    this.intersectionObserver = new IntersectionObserver(handleIntersect, options);
+    this.intersectionObserver.observe(hostElement.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    this.intersectionObserver?.unobserve(this.hostElement?.nativeElement);
+  }
+}