refactor(image-loader component): Name change, placeholderLoaded and fullResLoaded updated to imageL

BREAKING CHANGE: Variable name changes affect the image-loader component API

Author: jackhkmatthews

src/app/app.component.html

@@ -1,13 +1,13 @@
 <h1>Scroll down ↓</h1>
-<h3>Placeholder image loaded: <span class="placeholder-boolean">{{ placeholderLoaded }}</span></h3>
+<h3>Placeholder image loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
 <div class="spacer"></div>
-<h3>fullResLoaded event count: <span class="full-res-count">{{ fullResLoadedEventCount }}</span></h3>
+<h3>imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
 <sn-image-loader
   [image]="image"
   [sizes]="sizes"
   imgClass="foo"
   alt="lorem ipsum"
-  (placeholderLoaded)="onPlaceholderLoad($event)"
-  (fullResLoaded)="onFullResLoad($event)"
+  (imagePlaceholderLoaded)="onPlaceholderLoad($event)"
+  (imageLoaded)="onFullResLoad($event)"
 ></sn-image-loader>
 <div class="spacer"></div>

src/app/app.component.ts

@@ -37,15 +37,15 @@ export class AppComponent {
    * @type {boolean}
    * @memberof AppComponent
    */
-  placeholderLoaded = false;
+  imagePlaceholderLoaded = false;
 
   /**
    * Incremented on each image load event.
    *
    * @type {number}
    * @memberof AppComponent
    */
-  fullResLoadedEventCount = 0;
+  imageLoadedEventCount = 0;
 
   /**
    * Increments event count on each image loaded event.
@@ -54,7 +54,7 @@ export class AppComponent {
    * @memberof AppComponent
    */
   public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
-    this.placeholderLoaded = true;
+    this.imagePlaceholderLoaded = true;
   }
 
   /**
@@ -64,6 +64,6 @@ export class AppComponent {
    * @memberof AppComponent
    */
   public onFullResLoad(imageLoadedEvent: ImageLoadedEvent) {
-    this.fullResLoadedEventCount++;
+    this.imageLoadedEventCount++;
   }
 }

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

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

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

@@ -29,8 +29,8 @@ import { ImageLoadedEvent, ResponsiveImage, RetinaImage, Size, Breakpoint, Retin
  *   [image]="image"
  *   [sizes]="sizes"
  *   imgClass="foo"
- *   (placeholderLoaded)="onPlaceholderLoad($event)"
- *   (fullResLoaded)="onFullResLoad($event)"
+ *   (imagePlaceholderLoaded)="onPlaceholderLoad($event)"
+ *   (imageLoaded)="onFullResLoad($event)"
  *   alt="lorem ipsum">
  * </sn-image-loader>
  * ```
@@ -155,15 +155,15 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * @memberof ImageLoaderComponent
    */
   @Output()
-  public placeholderLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
+  public imagePlaceholderLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
   /**
    * Output for full res image loaded event.
    *
    * @type {EventEmitter}
    * @memberof ImageLoaderComponent
    */
   @Output()
-  public fullResLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
+  public imageLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
   /**
    * If true means the image has not been loaded yet and
    * the placeholder image is currently displayed
@@ -297,10 +297,10 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
       srcset: this.srcset
     };
     if (!this.loaded) {
-      this.placeholderLoaded.emit(eventData);
+      this.imagePlaceholderLoaded.emit(eventData);
       return;
     }
-    this.fullResLoaded.emit(eventData);
+    this.imageLoaded.emit(eventData);
   }
   /**
    * Trigger `ngUnsubscribe` complete on