feat(img): create ion-img

adamdbradley · adamdbradley · commit 7a827277a997 · 2016-03-23T23:51:20.000-05:00
ion-img is useful for virtual scrolling. It allows ionic to control
image HTTP requests, along with controlling when images should be
rendered within the DOM.
diff --git a/ionic/components/img/img.scss b/ionic/components/img/img.scss
@@ -0,0 +1,30 @@
+@import "../../globals.core";
+
+// Img
+// --------------------------------------------------
+
+ion-img {
+  position: relative;
+  display: block;
+}
+
+ion-img img {
+  display: block;
+}
+
+ion-img .img-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  background: #ddd;
+
+  transition: opacity 200ms;
+}
+
+ion-img.img-loaded .img-placeholder {
+  opacity: 0;
+}
diff --git a/ionic/components/img/img.ts b/ionic/components/img/img.ts
@@ -0,0 +1,87 @@
+import {Component, Input, HostBinding, ViewChild, ElementRef} from 'angular2/core';
+
+import {isPresent} from '../../util/util';
+
+
+@Component({
+  selector: 'ion-img',
+  template:
+    '<div *ngIf="_useA" class="img-placeholder" [style.height]="_h" [style.width]="_w"></div>' +
+    '<img #imgA *ngIf="_useA" (load)="_onLoad()" [src]="_srcA" [style.height]="_h" [style.width]="_w">' +
+    '<div *ngIf="!_useA" class="img-placeholder" [style.height]="_h" [style.width]="_w"></div>' +
+    '<img #imgB *ngIf="!_useA" (load)="_onLoad()" [src]="_srcB" [style.height]="_h" [style.width]="_w">'
+})
+export class Img {
+  private _src: string = '';
+  private _srcA: string = '';
+  private _srcB: string = '';
+  private _useA: boolean = true;
+  private _w: string;
+  private _h: string;
+  private _enabled: boolean = true;
+
+  constructor(private _elementRef: ElementRef) {}
+
+  @ViewChild('imgA') private _imgA: ElementRef;
+  @ViewChild('imgB') private _imgB: ElementRef;
+
+  @Input()
+  set src(val: string) {
+    val = (isPresent(val) ? val : '');
+
+    if (this._src !== val) {
+      this._src = val;
+      this._loaded = false;
+      this._srcA = this._srcB = '';
+      this._useA = !this._useA;
+      this._update();
+    }
+  }
+
+  private _update() {
+    if (this._enabled) {
+      if (this._useA) {
+        this._srcA = this._src;
+
+      } else {
+        this._srcB = this._src;
+      }
+    }
+  }
+
+  enable(shouldEnable: boolean) {
+    this._enabled = shouldEnable;
+    this._update();
+  }
+
+  @HostBinding('class.img-loaded')
+  private _loaded: boolean = false;
+
+  private _onLoad() {
+    this._loaded = this.isLoaded();
+  }
+
+  isLoaded() {
+    let imgEle: HTMLImageElement;
+
+    if (this._useA && this._imgA) {
+      imgEle = this._imgA.nativeElement;
+
+    } else if (this._imgB) {
+      imgEle = this._imgB.nativeElement;
+
+    }
+    return (imgEle && imgEle.src !== '' && imgEle.complete);
+  }
+
+  @Input()
+  set width(val: string | number) {
+    this._w = (typeof val === 'number') ? val + 'px' : val;
+  }
+
+  @Input()
+  set height(val: string | number) {
+    this._h = (typeof val === 'number') ? val + 'px' : val;
+  }
+
+}
