javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '2.0' into loading

Browse Source
This commit is contained in:
Brandy Carney
2016-03-29 10:44:00 -04:00
parent a485cd00ed ba6f92b992
commit c25164943f
6 changed files with 124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/card/card.ios.scss
View File

@ -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;

2
ionic/components/card/card.md.scss
View File

@ -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;

2
ionic/components/card/card.wp.scss
View File

@ -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;

1
ionic/components/content/content.ts
View File

@ -162,6 +162,7 @@ export class Content extends Ion {
this.scrollElement.addEventListener(type, handler);
return () => {
if (!this.scrollElement) { return; }
this.scrollElement.removeEventListener(type, handler);
}
}

30
ionic/components/img/img.scss Normal file
View File

@ -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;
}

87
ionic/components/img/img.ts Normal file
View File

@ -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;
}
}