Merge e4ccf0c into 0cd9b77

ng-web-apis · Apr 9, 2020 · 76805cd · 76805cd
2 parents 0cd9b77 + e4ccf0c
commit 76805cd
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 13 deletions.
diff --git a/projects/intersection-observer/src/directives/intersection-observer.directive.ts b/projects/intersection-observer/src/directives/intersection-observer.directive.ts
@@ -1,15 +1,23 @@
 import {Attribute, Directive, Inject, Output} from '@angular/core';
 import {Observable} from 'rxjs';
 import {IntersectionObserverService} from '../services/intersection-observer.service';
-import {INTERSECTION_ROOT_MARGIN} from '../tokens/intersection-root-margin';
-import {INTERSECTION_THRESHOLD} from '../tokens/intersection-threshold';
+import {
+    INTERSECTION_ROOT_MARGIN,
+    INTERSECTION_ROOT_MARGIN_DEFAULT,
+} from '../tokens/intersection-root-margin';
+import {
+    INTERSECTION_THRESHOLD,
+    INTERSECTION_THRESHOLD_DEFAULT,
+} from '../tokens/intersection-threshold';
 
-export function rootMarginFactory(rootMargin: string | null): string | null {
-    return rootMargin;
+export function rootMarginFactory(rootMargin: string | null): string {
+    return rootMargin || INTERSECTION_ROOT_MARGIN_DEFAULT;
 }
 
-export function thresholdFactory(threshold: string | null): number[] | null {
-    return threshold ? threshold.split(',').map(parseFloat) : null;
+export function thresholdFactory(threshold: string | null): number | number[] {
+    return threshold
+        ? threshold.split(',').map(parseFloat)
+        : INTERSECTION_THRESHOLD_DEFAULT;
 }
 
 @Directive({

diff --git a/projects/intersection-observer/src/directives/tests/intersection-observer.spec.ts b/projects/intersection-observer/src/directives/tests/intersection-observer.spec.ts
@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {IntersectionObserverModule} from '../../module';
+import {INTERSECTION_ROOT_MARGIN} from '../../tokens/intersection-root-margin';
+import {INTERSECTION_THRESHOLD} from '../../tokens/intersection-threshold';
 
 describe('IntersectionObserverDirective', () => {
     @Component({
@@ -60,4 +62,10 @@ describe('IntersectionObserverDirective', () => {
             done();
         }, 100);
     });
+
+    it('Default options', () => {
+        // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
+        expect(TestBed.get(INTERSECTION_ROOT_MARGIN)).toBe('0px 0px 0px 0px');
+        expect(TestBed.get(INTERSECTION_THRESHOLD)).toBe(0);
+    });
 });
diff --git a/projects/intersection-observer/src/services/intersection-observer.service.ts b/projects/intersection-observer/src/services/intersection-observer.service.ts
@@ -11,9 +11,9 @@ export class IntersectionObserverService extends Observable<IntersectionObserver
     constructor(
         @Inject(ElementRef) {nativeElement}: ElementRef<Element>,
         @Inject(INTERSECTION_OBSERVER_SUPPORT) support: boolean,
+        @Inject(INTERSECTION_ROOT_MARGIN) rootMargin: string,
+        @Inject(INTERSECTION_THRESHOLD) threshold: number | number[],
         @Optional() @Inject(INTERSECTION_ROOT) root: ElementRef<Element> | null,
-        @Optional() @Inject(INTERSECTION_ROOT_MARGIN) rootMargin: string | null,
-        @Optional() @Inject(INTERSECTION_THRESHOLD) threshold: number | number[] | null,
     ) {
         let observer: IntersectionObserver;
 
@@ -27,9 +27,9 @@ export class IntersectionObserverService extends Observable<IntersectionObserver
                     subscriber.next(entries);
                 },
                 {
-                    root: root ? root.nativeElement : undefined,
-                    rootMargin: rootMargin ? rootMargin : undefined,
-                    threshold: threshold ? threshold : undefined,
+                    root: root && root.nativeElement,
+                    rootMargin,
+                    threshold,
                 },
             );
             observer.observe(nativeElement);

diff --git a/projects/intersection-observer/src/services/tests/intersection-observer.service.spec.ts b/projects/intersection-observer/src/services/tests/intersection-observer.service.spec.ts
@@ -8,8 +8,8 @@ describe('IntersectionObserverService', () => {
                 nativeElement: document.createElement('DIV'),
             },
             false,
-            null,
-            null,
+            '0px 0px 0px 0px',
+            0,
             null,
         );
 

diff --git a/projects/intersection-observer/src/tokens/intersection-root-margin.ts b/projects/intersection-observer/src/tokens/intersection-root-margin.ts
@@ -1,5 +1,10 @@
 import {InjectionToken} from '@angular/core';
 
+export const INTERSECTION_ROOT_MARGIN_DEFAULT = '0px 0px 0px 0px';
 export const INTERSECTION_ROOT_MARGIN = new InjectionToken<string>(
     'rootMargin for IntersectionObserver',
+    {
+        providedIn: 'root',
+        factory: () => INTERSECTION_ROOT_MARGIN_DEFAULT,
+    },
 );
diff --git a/projects/intersection-observer/src/tokens/intersection-threshold.ts b/projects/intersection-observer/src/tokens/intersection-threshold.ts
@@ -1,5 +1,10 @@
 import {InjectionToken} from '@angular/core';
 
+export const INTERSECTION_THRESHOLD_DEFAULT = 0;
 export const INTERSECTION_THRESHOLD = new InjectionToken<number | number[]>(
     'threshold for IntersectionObserver',
+    {
+        providedIn: 'root',
+        factory: () => INTERSECTION_THRESHOLD_DEFAULT,
+    },
 );