feat(ScrollCollapse): Updated @thisissoon/angular-inviewport to v4.0.0 (#29)

BREAKING CHANGE: updated @thisissoon/angular-inviewport peer dependency to v4

Fix #28

Author: edoparearyee

package.json

@@ -51,7 +51,7 @@
   },
   "peerDependencies": {
     "@angular/core": ">=5.0.0 <7.0.0",
-    "@thisissoon/angular-inviewport": ">=3.0.0 <4.0.0",
+    "@thisissoon/angular-inviewport": ">=4.0.0 <5.0.0",
     "rxjs": ">=6.0.0 <7.0.0"
   },
   "devDependencies": {
@@ -68,7 +68,7 @@
     "@angular/platform-browser": "^6.1.9",
     "@angular/platform-browser-dynamic": "^6.1.9",
     "@angular/router": "^6.1.9",
-    "@thisissoon/angular-inviewport": "^3.0.1",
+    "@thisissoon/angular-inviewport": "^4.0.0",
     "@thisissoon/schematics": "^1.0.0-alpha.18",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",

src/app/app.module.ts

@@ -1,18 +1,12 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
+import { InViewportModule } from '@thisissoon/angular-inviewport';
 
 import { ScrollCollapseModule } from './scroll-collapse';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  imports: [
-    BrowserModule,
-    InViewportModule.forRoot([
-      { provide: WindowRef, useFactory: () => window },
-    ]),
-    ScrollCollapseModule,
-  ],
+  imports: [BrowserModule, InViewportModule, ScrollCollapseModule],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

src/app/scroll-collapse/scroll-collapse.directive.spec.ts

@@ -1,6 +1,5 @@
 import { fakeAsync, tick } from '@angular/core/testing';
 import { ElementRef, SimpleChanges } from '@angular/core';
-import { WindowRef } from '@thisissoon/angular-inviewport';
 
 import { ScrollCollapseDirective } from './scroll-collapse.directive';
 import { Direction } from './shared/direction.enum';

src/app/scroll-collapse/scroll-collapse.directive.ts

@@ -8,6 +8,7 @@ import {
   OnDestroy,
   Output,
   EventEmitter,
+  Inject,
 } from '@angular/core';
 import { fromEvent, merge, Subject } from 'rxjs';
 import {
@@ -19,7 +20,7 @@ import {
   distinctUntilChanged,
   tap,
 } from 'rxjs/operators';
-import { WindowRef } from '@thisissoon/angular-inviewport';
+import { WINDOW } from '@thisissoon/angular-inviewport';
 
 import { Viewport, Direction } from './shared';
 import * as eventData from './shared/event-data';
@@ -153,7 +154,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
   constructor(
     private el: ElementRef,
     private ngZone: NgZone,
-    private windowRef: WindowRef,
+    @Inject(WINDOW) private window: Window,
   ) {}
   /**
    * Subscribe to window resize events as an observable
@@ -167,14 +168,14 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
     // in an platform without the DOM
     if (typeof el.getBoundingClientRect === 'function') {
       const elBounds = el.getBoundingClientRect();
-      this.originalTop = elBounds.top + this.windowRef.pageYOffset;
+      this.originalTop = elBounds.top + this.window.pageYOffset;
     }
     this.originalHeight = el.offsetHeight;
 
     this.ngZone.runOutsideAngular(() => {
       merge(
-        fromEvent(this.windowRef as any, eventData.eventScroll),
-        fromEvent(this.windowRef as any, eventData.eventResize),
+        fromEvent(this.window as any, eventData.eventScroll),
+        fromEvent(this.window as any, eventData.eventResize),
       )
         .pipe(
           startWith(null),
@@ -261,10 +262,10 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
    */
   public getViewport(): Viewport {
     return {
-      height: this.windowRef.innerHeight,
-      width: this.windowRef.innerWidth,
-      pageYOffset: this.windowRef.pageYOffset,
-      pageXOffset: this.windowRef.pageXOffset,
+      height: this.window.innerHeight,
+      width: this.window.innerWidth,
+      pageYOffset: this.window.pageYOffset,
+      pageXOffset: this.window.pageXOffset,
     };
   }
   /**

yarn.lock

@@ -371,10 +371,10 @@
     semver "^5.3.0"
     semver-intersect "^1.1.2"
 
-"@thisissoon/angular-inviewport@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@thisissoon/angular-inviewport/-/angular-inviewport-3.0.1.tgz#3f17ab5f25d694a0bdb7b0c7506e948fc6a99a30"
-  integrity sha512-twIb1S+K7EOffgZ6o6zGJVKdHl9kHqoA7bljN1scRv6OzlLj7M7tmVTmqAOePb+Ue+xMhCiaZ56sKyNySqArAA==
+"@thisissoon/angular-inviewport@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@thisissoon/angular-inviewport/-/angular-inviewport-4.0.0.tgz#82054ee0a8cef28af13225fba7f4a4461abb1fe8"
+  integrity sha512-3Z+S4VHWzejpK4pNFazTlKRwnpCx5Y9cIcgovUsYqUh1kEBBzb0n4LdWyu1raA8ViHLzGacxNV0m2HjxXJ3/tw==
   dependencies:
     tslib "^1.9.0"