feat(): add ability to customize spinner

closes #38
zyra · Apr 18, 2017 · 5d0566d · 5d0566d
1 parent f3b2e31
commit 5d0566d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/src/components/img-loader.ts b/src/components/img-loader.ts
@@ -4,7 +4,7 @@ import { ImageLoaderConfig } from '../providers/image-loader-config';
 
 @Component({
   selector: 'img-loader',
-  template: '<ion-spinner *ngIf="spinner && isLoading && !fallbackAsPlaceholder"></ion-spinner>',
+  template: '<ion-spinner *ngIf="spinner && isLoading && !fallbackAsPlaceholder" [name]="spinnerName" [color]="spinnerColor"></ion-spinner>',
   styles: ['ion-spinner { float: none; margin-left: auto; margin-right: auto; display: block; }']
 })
 export class ImgLoader implements OnInit {
@@ -89,6 +89,16 @@ export class ImgLoader implements OnInit {
    */
   @Input() backgroundRepeat: string = this._config.backgroundRepeat;
 
+  /**
+   * Name of the spinner
+   */
+  @Input() spinnerName: string = this._config.spinnerName;
+
+  /**
+   * Color of the spinner
+   */
+  @Input() spinnerColor: string = this._config.spinnerColor;
+
   /**
    * Notify on image load..
    */

diff --git a/src/providers/image-loader-config.ts b/src/providers/image-loader-config.ts
@@ -31,6 +31,10 @@ export class ImageLoaderConfig {
 
   imageReturnType: string = 'uri';
 
+  spinnerName: string;
+
+  spinnerColor: string;
+
   private _cacheDirectoryName: string = 'image-loader-cache';
 
   set cacheDirectoryName(name: string) {
@@ -162,4 +166,20 @@ export class ImageLoaderConfig {
     this.imageReturnType = imageReturnType;
   }
 
+  /**
+   * Set the default spinnern ame
+   * @param name
+   */
+  setSpinnerName(name: string): void {
+    this.spinnerName = name;
+  }
+
+  /**
+   * Set the default spinner color
+   * @param color
+   */
+  setSpinnerColor(color: string): void {
+    this.spinnerColor = color;
+  }
+
 }
diff --git a/src/providers/image-loader.ts b/src/providers/image-loader.ts
@@ -68,15 +68,19 @@ export class ImageLoader {
     private transfer: Transfer,
     private platform: Platform
   ) {
-    if (window.location.protocol === 'http:' || window.location.protocol === 'https:') {
-      // we are running on a browser, or using livereload
-      // plugin will not function in this case
-      this.isInit = true;
-      this.throwWarning('You are running on a browser or using livereload, IonicImageLoader will not function, falling back to browser loading.');
-    } else {
-      this.platform.ready()
-        .then(() => this.initCache());
-    }
+    platform.ready().then(() => {
+
+      if ((<any> File).installed()) {
+        this.platform.ready()
+          .then(() => this.initCache());
+      } else {
+        // we are running on a browser, or using livereload
+        // plugin will not function in this case
+        this.isInit = true;
+        this.throwWarning('You are running on a browser or using livereload, IonicImageLoader will not function, falling back to browser loading.');
+      }
+
+    });
   }
 
   /**