refactor(function and variable names): updated image and full res image loaded event handlers and tr

BREAKING CHANGE: imagePlaceholderLoaded output changed to placeholderLoaded

Author: jackhkmatthews

src/app/app.component.html

@@ -8,7 +8,7 @@ <h3>Top image</h3>
 ></sn-image-loader>
 
 <h1>Scroll down for bottom image ↓</h1>
-<h3>Bottom image placeholder loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
+<h3>Bottom placeholder loaded: <span class="placeholder-boolean">{{ placeholderLoaded }}</span></h3>
 <div class="spacer"></div>
 
 <h3>Bottom image</h3>
@@ -17,8 +17,8 @@ <h3>Bottom image</h3>
 [sizes]="sizes"
 imgClass="img img--bottom"
 alt="lorem ipsum"
-(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
-(imageLoaded)="onFullResLoad($event)"
+(placeholderLoaded)="onPlaceholderLoad($event)"
+(imageLoaded)="onImageLoad($event)"
 class="sn-image-loader sn-image-loader--bottom"
 ></sn-image-loader>
 <h3>Bottom image imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>

src/app/app.component.ts

@@ -42,7 +42,7 @@ export class AppComponent {
    * @type {boolean}
    * @memberof AppComponent
    */
-  imagePlaceholderLoaded = false;
+  placeholderLoaded = false;
 
   /**
    * Incremented on each image load event.
@@ -59,7 +59,7 @@ export class AppComponent {
    * @memberof AppComponent
    */
   public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
-    this.imagePlaceholderLoaded = true;
+    this.placeholderLoaded = true;
   }
 
   /**
@@ -68,7 +68,7 @@ export class AppComponent {
    *
    * @memberof AppComponent
    */
-  public onFullResLoad(imageLoadedEvent: ImageLoadedEvent) {
+  public onImageLoad(imageLoadedEvent: ImageLoadedEvent) {
     this.imageLoadedEventCount++;
   }
 }

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

@@ -77,7 +77,7 @@ describe('ImageLoaderComponent', () => {
   });
 
   it('should fire placeholder loaded event on image load when loaded is false', () => {
-    const spy = spyOn(component.imagePlaceholderLoaded, 'emit');
+    const spy = spyOn(component.placeholderLoaded, 'emit');
     component.loaded = false;
     const imageElement = fixture.debugElement.query(By.css('img'));
     imageElement.triggerEventHandler('load', null);

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

@@ -30,8 +30,8 @@ import { WindowRef } from '@thisissoon/angular-inviewport';
  *   [image]="image"
  *   [sizes]="sizes"
  *   imgClass="foo"
- *   (imagePlaceholderLoaded)="onPlaceholderLoad($event)"
- *   (imageLoaded)="onFullResLoad($event)"
+ *   (placeholderLoaded)="onPlaceholderLoad($event)"
+ *   (imageLoaded)="onImageLoad($event)"
  *   alt="lorem ipsum">
  * </sn-image-loader>
  * ```
@@ -156,7 +156,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * @memberof ImageLoaderComponent
    */
   @Output()
-  public imagePlaceholderLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
+  public placeholderLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
   /**
    * Output for full res image loaded event.
    *
@@ -308,7 +308,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
       srcset: this.srcset
     };
     if (!this.loaded) {
-      this.imagePlaceholderLoaded.emit(eventData);
+      this.placeholderLoaded.emit(eventData);
       return;
     }
     this.imageLoaded.emit(eventData);