Merge pull request #7 from thisissoon/feature/responsive-image-format

refactor(app): Changed the models for ResponsiveImage and RetinaImage…

Author: Jack Matthews

README.md

@@ -49,8 +49,8 @@ A working example can be found inside [/src](https://github.com/thisissoon/angul
 	[sizes]="sizes"
 	imgClass="foo"
 	alt="lorem ipsum"
-	(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
-	(imageLoaded)="onFullResLoad($event)">
+	(placeholderLoaded)="onPlaceholderLoad($event)"
+	(imageLoaded)="onImageLoad($event)">
 </sn-image-loader>
 ```
 
@@ -67,25 +67,30 @@ export class AppComponent {
   image: ResponsiveImage = {
     placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
     fallback: 'http://via.placeholder.com/350x150?text=fallback',
-    xs: {
-      '@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
-      '@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
-    },
-    md: {
-      '@1x': 'http://via.placeholder.com/350x250?text=md+1x',
-      '@2x': 'http://via.placeholder.com/700x500?text=md+2x'
-    },
-    lg: {
-      '@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
-      '@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
-    }
+    images: [
+      {
+        size: 'xs',
+        x1: 'http://via.placeholder.com/150x350?text=xs+1x',
+        x2: 'http://via.placeholder.com/300x700?text=xs+2x'
+      },
+      {
+        size: 'md',
+        x1: 'http://via.placeholder.com/350x250?text=md+1x',
+        x2: 'http://via.placeholder.com/700x500?text=md+2x'
+      },
+      {
+        size: 'lg',
+        x1: 'http://via.placeholder.com/700x400?text=lg+1x',
+        x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
+      }
+    ]
   };
 
   public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
     // Do something
   }
 
-  public onFullResLoad(imageLoadedEvent: ImageLoadedEvent) {
+  public onImageLoad(imageLoadedEvent: ImageLoadedEvent) {
     // Do something
   }
 }

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

@@ -17,18 +17,23 @@ export class AppComponent {
   image: ResponsiveImage = {
     placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
     fallback: 'http://via.placeholder.com/350x150?text=fallback',
-    xs: {
-      '@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
-      '@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
-    },
-    md: {
-      '@1x': 'http://via.placeholder.com/350x250?text=md+1x',
-      '@2x': 'http://via.placeholder.com/700x500?text=md+2x'
-    },
-    lg: {
-      '@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
-      '@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
-    }
+    images: [
+      {
+        size: 'xs',
+        x1: 'http://via.placeholder.com/150x350?text=xs+1x',
+        x2: 'http://via.placeholder.com/300x700?text=xs+2x'
+      },
+      {
+        size: 'md',
+        x1: 'http://via.placeholder.com/350x250?text=md+1x',
+        x2: 'http://via.placeholder.com/700x500?text=md+2x'
+      },
+      {
+        size: 'lg',
+        x1: 'http://via.placeholder.com/700x400?text=lg+1x',
+        x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
+      }
+    ]
   };
 
   /**
@@ -37,7 +42,7 @@ export class AppComponent {
    * @type {boolean}
    * @memberof AppComponent
    */
-  imagePlaceholderLoaded = false;
+  placeholderLoaded = false;
 
   /**
    * Incremented on each image load event.
@@ -54,7 +59,7 @@ export class AppComponent {
    * @memberof AppComponent
    */
   public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
-    this.imagePlaceholderLoaded = true;
+    this.placeholderLoaded = true;
   }
 
   /**
@@ -63,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

@@ -24,18 +24,23 @@ describe('ImageLoaderComponent', () => {
   const image: ResponsiveImage = {
     placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
     fallback: 'http://via.placeholder.com/350x150?text=fallback',
-    xs: {
-      '@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
-      '@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
-    },
-    md: {
-      '@1x': 'http://via.placeholder.com/350x250?text=md+1x',
-      '@2x': 'http://via.placeholder.com/700x500?text=md+2x'
-    },
-    lg: {
-      '@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
-      '@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
-    }
+    images: [
+      {
+        size: 'xs',
+        x1: 'http://via.placeholder.com/150x350?text=xs+1x',
+        x2: 'http://via.placeholder.com/300x700?text=xs+2x'
+      },
+      {
+        size: 'md',
+        x1: 'http://via.placeholder.com/350x250?text=md+1x',
+        x2: 'http://via.placeholder.com/700x500?text=md+2x'
+      },
+      {
+        size: 'lg',
+        x1: 'http://via.placeholder.com/700x400?text=lg+1x',
+        x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
+      }
+    ]
   };
 
   beforeEach(async(() => {
@@ -72,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

@@ -17,7 +17,7 @@ import 'rxjs/add/operator/debounceTime';
 
 import * as classes from './shared/classes';
 import * as events from './shared/events';
-import { ImageLoadedEvent, ResponsiveImage, RetinaImage, Size, Breakpoint, Retina } from './shared';
+import { ImageLoadedEvent, ResponsiveImage, RetinaImage, Size, Breakpoint } from './shared';
 import { WindowRef } from '@thisissoon/angular-inviewport';
 
 /**
@@ -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.
    *
@@ -272,8 +272,9 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   public preloadImage(): void {
     if (this.inViewport && this.notLoaded) {
-      const imageNormal = this.image[this.size]['@1x'];
-      const imageRetina = this.image[this.size]['@2x'];
+      const retinaImg = this.image.images.filter(retinaImage => retinaImage.size === this.size)[0];
+      const imageNormal = retinaImg.x1;
+      const imageRetina = retinaImg.x2;
       this.supportsSrcSet ?
         this.preloadSrcset = `${imageNormal} 1x, ${imageRetina} 2x` :
         this.preloadSrc = `${imageNormal}`;
@@ -286,8 +287,9 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * @memberof ImageLoaderComponent
    */
   public onImagePreload(): void {
-    const imageNormal = this.image[this.size]['@1x'];
-    const imageRetina = this.image[this.size]['@2x'];
+    const retinaImg = this.image.images.filter(retinaImage => retinaImage.size === this.size)[0];
+    const imageNormal = retinaImg.x1;
+    const imageRetina = retinaImg.x2;
     this.supportsSrcSet ?
       this.srcset = `${imageNormal} 1x, ${imageRetina} 2x` :
       this.src = this.preloadSrc;
@@ -306,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);

src/app/image-loader/shared/image.model.ts

@@ -1,22 +1,17 @@
 export interface ResponsiveImage {
-  xs?: RetinaImage;
-  sm?: RetinaImage;
-  md?: RetinaImage;
-  lg?: RetinaImage;
-  xl?: RetinaImage;
   placeholder: string;
   fallback: string;
+  images: RetinaImage[];
 }
 
 export interface RetinaImage {
-  '@1x'?: string;
-  '@2x'?: string;
+  size: Size;
+  x1?: string;
+  x2?: string;
 }
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-export type Retina = '@1x' | '@2x';
-
 export interface Breakpoint {
   size: Size;
   width: number;