feat(ImageLoader): add ability to manually check inviewport status

Author: edoparearyee

README.md

@@ -134,6 +134,20 @@ export class AppComponent {
 }
 ```
 
+### Check inviewport status manually
+
+```html
+<sn-image-loader
+  [image]="image"
+  [sizes]="sizes"
+  imgClass="img"
+  alt="lorem ipsum"
+  #imgEl>
+</sn-image-loader>
+
+<button (click)="imgEl.checkInViewportStatus()">Check status</button>
+```
+
 ## Video Loader Example
 
 ### `app.component.html`

src/app/app.component.html

@@ -19,8 +19,10 @@ <h3>Bottom image</h3>
   alt="lorem ipsum"
   (placeholderLoaded)="onPlaceholderLoad($event)"
   (imageLoaded)="onImageLoad($event)"
-  class="sn-image-loader sn-image-loader--bottom">
+  class="sn-image-loader sn-image-loader--bottom"
+  #imgEl>
 </sn-image-loader>
+<button (click)="imgEl.checkInViewportStatus()">Check</button>
 <h3>Bottom image imageLoaded event count: <span class="image-loaded-count">{{ imageLoadedEventCount }}</span></h3>
 <div class="spacer"></div>
 

src/app/image-loader/image-loader/image-loader.component.html

@@ -1,5 +1,6 @@
 <img
   #img
+  #snInViewport="snInViewport"
   [src]="src"
   [srcset]="srcset"
   [alt]="alt"

src/app/image-loader/image-loader/image-loader.component.spec.ts

@@ -2,7 +2,7 @@ import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
-import { WindowRef } from '@thisissoon/angular-inviewport';
+import { InViewportModule } from '@thisissoon/angular-inviewport';
 
 import { ImageLoaderComponent } from './image-loader.component';
 import { ResponsiveImage } from '../shared/image.model';
@@ -50,8 +50,8 @@ describe('ImageLoaderComponent', () => {
       declarations: [
         ImageLoaderComponent
       ],
-      providers: [
-        WindowRef
+      imports: [
+        InViewportModule.forRoot()
       ],
     });
 
@@ -207,4 +207,9 @@ describe('ImageLoaderComponent', () => {
     expect(component.src).toEqual('');
   });
 
+  it('should check inviewport status', () => {
+    const spy = spyOn(component.snInViewport, 'calculateInViewportStatus');
+    component.checkInViewportStatus();
+    expect(spy).toHaveBeenCalled();
+  });
 });

src/app/image-loader/image-loader/image-loader.component.ts

@@ -16,7 +16,7 @@ import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 import { takeUntil, debounceTime } from 'rxjs/operators';
-import { WindowRef } from '@thisissoon/angular-inviewport';
+import { WindowRef, InViewportDirective } from '@thisissoon/angular-inviewport';
 
 import * as classes from '../shared/classes';
 import * as events from '../shared/events';
@@ -33,7 +33,7 @@ import {
  * for the device size
  *
  * @example
- * ```
+ * ```html
  * <sn-image-loader
  *   [image]="image"
  *   [sizes]="sizes"
@@ -128,12 +128,19 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   public ngUnsubscribe$ = new Subject<void>();
   /**
-   * Reference to dummy image element
+   * Reference to image element
    *
    * @memberof ImageLoaderComponent
    */
   @ViewChild('img')
   public img: ElementRef;
+  /**
+   * Reference to instance of inViewport directive instance
+   *
+   * @memberof ImageLoaderComponent
+   */
+  @ViewChild('snInViewport')
+  public snInViewport: InViewportDirective;
   /**
    * If true it means the browser supports `srcset`
    * @memberof ImageLoaderComponent
@@ -210,6 +217,12 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
         );
     });
   }
+  /**
+   * Checks if image element is in viewport
+   */
+  public checkInViewportStatus(): void {
+    this.snInViewport.calculateInViewportStatus();
+  }
   /**
    * If element is in viewport preload image by setting the src
    * of the dummy image element.

src/app/video-loader/video-loader/video-loader.component.html

@@ -11,7 +11,7 @@
   [attr.playsinline]="playsInline"
   (loadeddata)="onVideoLoad()"
   (inViewportChange)="onInViewportChange($event)"
-  #videoEl="snInViewport"
+  #snInViewport="snInViewport"
   snInViewport>
 
   <sn-image-loader

src/app/video-loader/video-loader/video-loader.component.spec.ts

@@ -101,7 +101,7 @@ describe('VideoLoaderComponent', () => {
   });
 
   it('should check inviewport status', () => {
-    const spy = spyOn(component.videoEl, 'calculateInViewportStatus');
+    const spy = spyOn(component.snInViewport, 'calculateInViewportStatus');
     component.checkInViewportStatus();
     expect(spy).toHaveBeenCalled();
   });

src/app/video-loader/video-loader/video-loader.component.ts

@@ -26,7 +26,7 @@ import { ImageLoadedEvent } from '../../image-loader/shared/image-loaded-event.m
  * video and poster for the device size
  *
  * @example
- * ```
+ * ```html
  * <sn-video-loader
  *   [sizes]="sizes"
  *   [video]="video"
@@ -104,11 +104,9 @@ export class VideoLoaderComponent implements AfterViewInit, OnDestroy {
   /**
    * Reference to inviewport directive instance
    *
-   * @type {InViewportDirective}
-   * @memberof VideoLoaderComponent
    */
-  @ViewChild('videoEl')
-  public videoEl: InViewportDirective;
+  @ViewChild('snInViewport')
+  public snInViewport: InViewportDirective;
   /**
    * List of breakpoints to select video from
    *
@@ -235,7 +233,7 @@ export class VideoLoaderComponent implements AfterViewInit, OnDestroy {
    * @memberof VideoLoaderComponent
    */
   public checkInViewportStatus(): void {
-    this.videoEl.calculateInViewportStatus();
+    this.snInViewport.calculateInViewportStatus();
   }
   /**
    * On width change, determine if device has changed and