feat: Support different options with same root

Author: k3nsei

projects/ng-in-viewport/src/lib/in-viewport-config.ts

@@ -23,16 +23,48 @@ export interface InViewportConfigOptions {
   checkFn?: InViewportConfigCheckFn;
 }
 
-const DEFAULT_THRESHOLD = [0, 1];
-
 export class InViewportConfig {
+  private static readonly DEFAULT_THRESHOLD = [0, 1];
+
+  private static readonly STRINGIFY_DELIMITER = '|';
+
   private _root: Element;
   private _rootMargin: string = '0px 0px 0px 0px';
-  private _threshold: number | number[] = [...DEFAULT_THRESHOLD];
+  private _threshold: number | number[] = [...InViewportConfig.DEFAULT_THRESHOLD];
   private _partial: boolean = true;
   private _direction: InViewportConfigDirection = InViewportConfigDirection.BOTH;
+  private _hash: string;
   private _checkFn: InViewportConfigCheckFn;
 
+  private static stringify(input: object): string {
+    if (Array.isArray(input)) {
+      const stringifiedArr = [];
+
+      for (const v of input) {
+        stringifiedArr.push(InViewportConfig.stringify(v));
+      }
+
+      return `[${stringifiedArr.join(',')}]`;
+    } else if (typeof input === 'object' && input !== null) {
+      const acc = [];
+      const sortedKeys = Object.keys(input).sort();
+
+      for (const k of sortedKeys) {
+        const v = InViewportConfig.stringify(input[k]);
+
+        acc.push(`${k}:${v}`);
+      }
+
+      return acc.join(InViewportConfig.STRINGIFY_DELIMITER);
+    }
+
+    return String(input);
+  }
+
+  private static hash(input: object): string {
+    return btoa(InViewportConfig.stringify(input));
+  }
+
   constructor(options?: InViewportConfigOptions) {
     if (Object.prototype.toString.call(options) === '[object Object]') {
       ['root', 'rootMargin', 'threshold', 'partial', 'direction', 'checkFn'].forEach((prop) => {
@@ -41,6 +73,14 @@ export class InViewportConfig {
         }
       });
     }
+
+    this._hash = InViewportConfig.hash({
+      rootMargin: this.rootMargin,
+      threshold: this.threshold,
+      partial: this.partial,
+      direction: this.direction,
+      checkFn: String(this.checkFn)
+    });
   }
 
   public get root(): Element {
@@ -56,7 +96,24 @@ export class InViewportConfig {
   }
 
   public set rootMargin(value: string) {
-    this._rootMargin = value && typeof value === 'string' ? value : '0px 0px 0px 0px';
+    if (!value || typeof value !== 'string') {
+      this._rootMargin = '0px 0px 0px 0px';
+    } else {
+      const marginString: string = value || '0px';
+      const margins: string[] = marginString.split(new RegExp('\\s+')).map((margin) => {
+        const parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
+        if (!parts) {
+          throw new TypeError('rootMargin must be specified in pixels or percent');
+        }
+        return `${parts[1]}${parts[2]}`;
+      });
+
+      margins[1] = margins[1] || margins[0];
+      margins[2] = margins[2] || margins[0];
+      margins[3] = margins[3] || margins[1];
+
+      this._rootMargin = margins.join(' ');
+    }
   }
 
   public get threshold(): number | number[] {
@@ -72,7 +129,7 @@ export class InViewportConfig {
       threshold = value.filter((val) => isValidThreshold(val));
     }
     if (threshold.length === 0) {
-      threshold = [...DEFAULT_THRESHOLD];
+      threshold = [...InViewportConfig.DEFAULT_THRESHOLD];
     }
     this._threshold = threshold;
   }
@@ -102,6 +159,10 @@ export class InViewportConfig {
     this._direction = isValidValue(value) ? value : InViewportConfigDirection.BOTH;
   }
 
+  public get hash(): string {
+    return this._hash;
+  }
+
   public get checkFn(): InViewportConfigCheckFn {
     return this._checkFn;
   }

projects/ng-in-viewport/src/lib/in-viewport.directive.spec.ts

@@ -8,18 +8,24 @@ import { InViewportDirective } from './in-viewport.directive';
 @Component({
   template: `
     <div class="list" #listElement>
-      <div class="item inactive" inViewport
-           [inViewportOptions]="{ partial: true, root: listElement }"
-           (inViewportAction)="handleAction($event)">
-      </div>
-      <div class="item inactive" inViewport
-           [inViewportOptions]="{ partial: true, root: listElement }"
-           (inViewportAction)="handleAction($event)">
-      </div>
-      <div class="item inactive" inViewport
-           [inViewportOptions]="{ partial: true, root: listElement }"
-           (inViewportAction)="handleAction($event)">
-      </div>
+      <div
+        class="item inactive"
+        inViewport
+        [inViewportOptions]="{ partial: true, root: listElement }"
+        (inViewportAction)="handleAction($event)"
+      ></div>
+      <div
+        class="item inactive"
+        inViewport
+        [inViewportOptions]="{ partial: true, root: listElement }"
+        (inViewportAction)="handleAction($event)"
+      ></div>
+      <div
+        class="item inactive"
+        inViewport
+        [inViewportOptions]="{ partial: true, root: listElement }"
+        (inViewportAction)="handleAction($event)"
+      ></div>
     </div>
   `,
   styles: [

projects/ng-in-viewport/src/lib/in-viewport.service.ts

@@ -4,6 +4,7 @@ import { InViewportConfig } from './in-viewport-config';
 
 export interface InViewportRegistryEntry {
   root: Element;
+  configHash: string;
   targets: Set<Element>;
   observer: IntersectionObserver;
 }
@@ -26,28 +27,30 @@ export class InViewportService {
     }
   }
 
-  private getRootElement(element?: Element) {
-    return element && element.nodeType === Node.ELEMENT_NODE ? element : undefined;
+  private getRootElement(element?: Element): Element | null {
+    return element && element.nodeType === Node.ELEMENT_NODE ? element : null;
   }
 
-  private findEntry(root: Element) {
-    return this.registry.find((entry) => entry.root === this.getRootElement(root));
+  private findEntry(root: Element, configHash: string) {
+    return this.registry.find((entry) => entry.root === this.getRootElement(root) && entry.configHash === configHash);
   }
 
   public register(target: Element, config: InViewportConfig): void {
     this.ngZone.runOutsideAngular(() => {
-      const foundedEntry = this.findEntry(config.root);
+      const foundedEntry = this.findEntry(config.root, config.hash);
       if (foundedEntry && !foundedEntry.targets.has(target)) {
         foundedEntry.targets.add(target);
         foundedEntry.observer.observe(target);
       } else {
+        const root: Element | null = this.getRootElement(config.root);
         const options: any = {
-          root: this.getRootElement(config.root),
+          root: root !== null ? root : undefined,
           rootMargin: config.rootMargin,
           threshold: config.threshold
         };
         const entry: InViewportRegistryEntry = {
-          root: this.getRootElement(config.root),
+          root,
+          configHash: config.hash,
           targets: new Set([target]),
           observer: new IntersectionObserver(
             (entries: IntersectionObserverEntry[]) => this.ngZone.run(() => this.emitTrigger(entries)),
@@ -62,7 +65,7 @@ export class InViewportService {
 
   public unregister(target: Element, config: InViewportConfig): void {
     this.ngZone.runOutsideAngular(() => {
-      const foundedEntry = this.findEntry(config.root);
+      const foundedEntry = this.findEntry(config.root, config.hash);
       if (foundedEntry) {
         const { observer, targets } = foundedEntry;
         if (targets.has(target)) {

src/app/invp-example/invp-example.component.html

@@ -1,14 +1,14 @@
 <section #firstSection>
-  <ng-container *ngFor="let element of elements">
-    <div class="item" inViewport [inViewportOptions]="{ root: firstSection }" (inViewportAction)="handleAction($event)">
+  <ng-container *ngFor="let element of elements; odd as odd">
+    <div class="item" [class.is-odd]="odd" inViewport [inViewportOptions]="{ root: firstSection }" (inViewportAction)="handleAction($event)">
       {{ element }}
     </div>
   </ng-container>
 </section>
 
 <section>
-  <ng-container *ngFor="let element of elements">
-    <div class="item" inViewport (inViewportAction)="handleAction($event)">
+  <ng-container *ngFor="let element of elements; odd as odd">
+    <div class="item" [class.is-odd]="odd" inViewport (inViewportAction)="handleAction($event)">
       {{ element }}
     </div>
   </ng-container>

src/app/invp-example/invp-example.component.scss

@@ -63,5 +63,9 @@ section {
       2.1213203436px 2.1213203436px 0 rgba(#6272a4, 0.5),
       2.4748737342px 2.4748737342px 0 rgba(#6272a4, 0.5),
       2.8284271247px 2.8284271247px 0 rgba(#6272a4, 0.5);
+
+    &.is-odd {
+      background-color: lighten(#50fa7b, 5%);
+    }
   }
 }