From 7a827277a9979e1140f0c2fdde50c00d5f8661b0 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 23 Mar 2016 23:51:20 -0500 Subject: [PATCH 1/3] feat(img): create ion-img 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. --- ionic/components/img/img.scss | 30 ++++++++++++ ionic/components/img/img.ts | 87 +++++++++++++++++++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 ionic/components/img/img.scss create mode 100644 ionic/components/img/img.ts diff --git a/ionic/components/img/img.scss b/ionic/components/img/img.scss new file mode 100644 index 0000000000..e5d49e7d1f --- /dev/null +++ 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 new file mode 100644 index 0000000000..6279d588d0 --- /dev/null +++ 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: + '
' + + '' + + '
' + + '' +}) +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; + } + +} From 349c577cb90fd31a433608ce24592f1bcf2e25d3 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 23 Mar 2016 23:54:57 -0500 Subject: [PATCH 2/3] fix(card): maintain card width when absolute positioned --- ionic/components/card/card.ios.scss | 2 ++ ionic/components/card/card.md.scss | 2 ++ ionic/components/card/card.wp.scss | 2 ++ 3 files changed, 6 insertions(+) diff --git a/ionic/components/card/card.ios.scss b/ionic/components/card/card.ios.scss index 72c32ae689..e2814af51a 100644 --- a/ionic/components/card/card.ios.scss +++ b/ionic/components/card/card.ios.scss @@ -38,6 +38,8 @@ $card-ios-header-color: #333 !default; ion-card { margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left; + width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)}); + border-radius: $card-ios-border-radius; font-size: $card-ios-font-size; diff --git a/ionic/components/card/card.md.scss b/ionic/components/card/card.md.scss index 09f0f91c38..29bc246c33 100644 --- a/ionic/components/card/card.md.scss +++ b/ionic/components/card/card.md.scss @@ -40,6 +40,8 @@ $card-md-header-color: #222 !default; ion-card { margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left; + width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)}); + border-radius: $card-md-border-radius; font-size: $card-md-font-size; diff --git a/ionic/components/card/card.wp.scss b/ionic/components/card/card.wp.scss index b5eb5a6d55..26c12c7041 100644 --- a/ionic/components/card/card.wp.scss +++ b/ionic/components/card/card.wp.scss @@ -41,6 +41,8 @@ $card-wp-header-color: #222 !default; ion-card { margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left; + width: calc(100% - #{($card-wp-margin-right + $card-wp-margin-left)}); + border-radius: $card-wp-border-radius; font-size: $card-wp-font-size; From 05823f9e62fe80f7156ada830d2399a76a2ac52a Mon Sep 17 00:00:00 2001 From: Trong Tran Date: Thu, 24 Mar 2016 18:32:22 +0700 Subject: [PATCH 3/3] fix(ion-infinite-scroll): Fix error leaving page This fix [5760](https://github.com/driftyco/ionic/issues/5760) --- ionic/components/content/content.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 303fb66a16..026ae8dbd2 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -162,6 +162,7 @@ export class Content extends Ion { this.scrollElement.addEventListener(type, handler); return () => { + if (!this.scrollElement) { return; } this.scrollElement.removeEventListener(type, handler); } }