refactor(app): Changed the models for ResponsiveImage and RetinaImage to allow for more flexible ima

Previously the keys for the ResponsiveImage object were the string representations of the breakpoint
sizes. This meant that any GraphQL server providing that image object would need to be aware of
those keys in order to provide an appropriate object. With the strings abstracted into a sizes
property, and retina images seperated from palceholder and dummy, the responsiveImage object is more
flexible.

BREAKING CHANGE: sn-image-loader component now expects a differently structured responsiveImage
object.

Author: jackhkmatthews

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'
+      }
+    ]
   };
 
   /**

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(() => {

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';
 
 /**
@@ -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;

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;