feat(): extend global config and add fallback image

Author: ihadeed

src/components/img-loader/img-loader.ts

@@ -13,13 +13,21 @@ export class ImgLoader implements OnInit {
    */
   @Input('src') imageUrl: string;
 
+  @Input('fallback') fallbackUrl: string;
+
   @Input() spinner: boolean;
 
-  @Input() useImg: boolean = false;
+  @Input() useImg: boolean;
+
+  @Input() width: string;
+
+  @Input() height: string;
+
+  @Input() display: string;
 
-  @Input() width: string = '100%';
+  @Input() backgroundSize: string;
 
-  @Input() height: string = '100%';
+  @Input() backgroundRepeat: string;
 
   isLoading: boolean = true;
 
@@ -29,35 +37,94 @@ export class ImgLoader implements OnInit {
     , private imageLoader: ImageLoader
     , private config: ImageLoaderConfig
   ) {
-    if (typeof this.spinner === 'undefined' && config.spinnerEnabled) {
+    if (!this.spinner && config.spinnerEnabled) {
       this.spinner = true;
     }
+
+    if (!this.fallbackUrl) {
+      this.fallbackUrl = config.fallbackUrl;
+    }
+
+    if (!this.useImg) {
+      this.useImg = config.useImg;
+    }
+
+    if (!this.width) {
+      this.width = config.width;
+    }
+
+    if (!this.height) {
+      this.height = config.height;
+    }
+
+    if (!this.display) {
+      this.display = config.display;
+    }
+
+    if (!this.backgroundSize) {
+      this.backgroundSize = config.backgroundSize;
+    }
+
+    if (!this.backgroundRepeat) {
+      this.backgroundRepeat = config.backgroundRepeat;
+    }
+
   }
 
   ngOnInit(): void {
+    if (!this.imageUrl) {
+      // image url was not passed
+      // this can happen when [src] is set to a variable that turned out to be undefined
+      // one example could be a list of users with their profile pictures
+      // in this case, it would be useful to use the fallback image instead
+      if (this.fallbackUrl) {
+        // we're not going to cache the fallback image since it should be locally saved
+        this.setImage(this.fallbackUrl);
+      }
+      // remove the spinner just in case there is no fallback image
+      this.isLoading = false;
+      return;
+    }
+
     this.imageLoader.getImagePath(this.imageUrl)
-      .then((imageUrl: string) => {
+      .then((imageUrl: string) => this.setImage(imageUrl));
+  }
+
+  private setImage(imageUrl: string): void {
+    let element;
+
+    this.isLoading = false;
+
+    if (this.useImg) {
+      this.renderer.createElement(this.element.nativeElement, 'img');
+      element = <HTMLImageElement>this.element.nativeElement.getElementsByTagName('IMG')[0];
+      this.renderer.setElementAttribute(element, 'src', imageUrl);
+    } else {
 
-        let element;
+      element = this.element.nativeElement;
 
-        this.isLoading = false;
+      if (this.display) {
+        this.renderer.setElementStyle(element, 'display', this.display);
+      }
 
-        if (this.useImg) {
-          this.renderer.createElement(this.element.nativeElement, 'img');
-          element = <HTMLImageElement>this.element.nativeElement.getElementsByTagName('IMG')[0];
-          this.renderer.setElementAttribute(element, 'src', imageUrl);
-        } else {
+      if (this.height) {
+        this.renderer.setElementStyle(element, 'height', this.height);
+      }
 
-          element = this.element.nativeElement;
+      if (this.width) {
+        this.renderer.setElementStyle(element, 'width', this.width);
+      }
 
-          this.renderer.setElementStyle(element, 'width', this.width);
-          this.renderer.setElementStyle(element, 'height', this.height);
-          this.renderer.setElementStyle(element, 'display', 'block');
-          this.renderer.setElementStyle(element, 'background-size', 'contain');
-          this.renderer.setElementStyle(element, 'background-repeat', 'no-repeat');
-          this.renderer.setElementStyle(element, 'background-image', 'url(\'' + imageUrl +'\')');
-        }
-      });
+      if (this.backgroundSize) {
+        this.renderer.setElementStyle(element, 'background-size', this.backgroundSize);
+      }
+
+      if (this.backgroundRepeat) {
+        this.renderer.setElementStyle(element, 'background-repeat', this.backgroundRepeat);
+      }
+
+      this.renderer.setElementStyle(element, 'background-image', 'url(\'' + imageUrl +'\')');
+    }
   }
 
 }

src/providers/image-loader-config.ts

@@ -7,6 +7,20 @@ export class ImageLoaderConfig {
 
   spinnerEnabled: boolean = true;
 
+  backgroundSize: string = 'contain';
+
+  backgroundRepeat: string = 'no-repeat';
+
+  display: string = 'block';
+
+  width: string = '100%';
+
+  height: string = '100%';
+
+  useImg: boolean = false;
+
+  fallbackUrl: string;
+
   private _cacheDirectoryName: string = 'image-loader-cache';
 
   set cacheDirectoryName(name: string) {
@@ -30,4 +44,32 @@ export class ImageLoaderConfig {
     this.cacheDirectoryName = name;
   }
 
+  setHeight(height: string): void {
+    this.height = height;
+  }
+
+  setWidth(width: string): void {
+    this.width = width;
+  }
+
+  enableBlock(enable: string): void {
+    this.display = enable;
+  }
+
+  useImageTag(use: boolean): void {
+    this.useImg = use;
+  }
+
+  setBackgroundSize(backgroundSize: string): void {
+    this.backgroundSize = backgroundSize;
+  }
+
+  setBackgroundRepeat(backgroundRepeat: string): void {
+    this.backgroundRepeat = backgroundRepeat;
+  }
+
+  setFallbackUrl(fallbackUrl: string): void {
+    this.fallbackUrl = fallbackUrl;
+  }
+
 }