mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
chore(): fix pull-to-refresh types
This commit is contained in:
@ -1,5 +1,6 @@
|
|||||||
import {Component, ElementRef, Optional, NgZone} from 'angular2/core';
|
import {Component, ElementRef, Optional, NgZone} from 'angular2/core';
|
||||||
|
|
||||||
|
import {Ion} from '../ion';
|
||||||
import {IonicApp} from '../app/app';
|
import {IonicApp} from '../app/app';
|
||||||
import {Config} from '../../config/config';
|
import {Config} from '../../config/config';
|
||||||
import {raf} from '../../util/dom';
|
import {raf} from '../../util/dom';
|
||||||
@ -31,7 +32,7 @@ import {ScrollTo} from '../../animations/scroll-to';
|
|||||||
'<ng-content></ng-content>' +
|
'<ng-content></ng-content>' +
|
||||||
'</scroll-content>'
|
'</scroll-content>'
|
||||||
})
|
})
|
||||||
export class Content {
|
export class Content extends Ion {
|
||||||
private _padding: number = 0;
|
private _padding: number = 0;
|
||||||
private _scrollEle: HTMLElement;
|
private _scrollEle: HTMLElement;
|
||||||
private _onScroll: any;
|
private _onScroll: any;
|
||||||
@ -48,6 +49,8 @@ export class Content {
|
|||||||
private _zone: NgZone,
|
private _zone: NgZone,
|
||||||
@Optional() viewCtrl: ViewController
|
@Optional() viewCtrl: ViewController
|
||||||
) {
|
) {
|
||||||
|
super(_elementRef);
|
||||||
|
|
||||||
if (viewCtrl) {
|
if (viewCtrl) {
|
||||||
viewCtrl.setContent(this);
|
viewCtrl.setContent(this);
|
||||||
viewCtrl.setContentRef(_elementRef);
|
viewCtrl.setContentRef(_elementRef);
|
||||||
@ -275,7 +278,7 @@ export class Content {
|
|||||||
* {Number} dimensions.scrollLeft scroll scrollLeft
|
* {Number} dimensions.scrollLeft scroll scrollLeft
|
||||||
* {Number} dimensions.scrollRight scroll scrollLeft + scrollWidth
|
* {Number} dimensions.scrollRight scroll scrollLeft + scrollWidth
|
||||||
*/
|
*/
|
||||||
getDimensions() {
|
getContentDimensions() {
|
||||||
let _scrollEle = this._scrollEle;
|
let _scrollEle = this._scrollEle;
|
||||||
let parentElement = _scrollEle.parentElement;
|
let parentElement = _scrollEle.parentElement;
|
||||||
|
|
||||||
@ -303,9 +306,9 @@ export class Content {
|
|||||||
* Adds padding to the bottom of the scroll element when the keyboard is open
|
* Adds padding to the bottom of the scroll element when the keyboard is open
|
||||||
* so content below the keyboard can be scrolled into view.
|
* so content below the keyboard can be scrolled into view.
|
||||||
*/
|
*/
|
||||||
add_padding(newPadding) {
|
addScrollPadding(newPadding) {
|
||||||
if (newPadding > this._padding) {
|
if (newPadding > this._padding) {
|
||||||
console.debug('content add padding', newPadding);
|
console.debug('content addScrollPadding', newPadding);
|
||||||
|
|
||||||
this._padding = newPadding;
|
this._padding = newPadding;
|
||||||
this._scrollEle.style.paddingBottom = newPadding + 'px';
|
this._scrollEle.style.paddingBottom = newPadding + 'px';
|
||||||
|
@ -276,7 +276,7 @@ export class ItemInput {
|
|||||||
// find out if text input should be manually scrolled into view
|
// find out if text input should be manually scrolled into view
|
||||||
let ele = this._elementRef.nativeElement;
|
let ele = this._elementRef.nativeElement;
|
||||||
|
|
||||||
let scrollData = ItemInput.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getDimensions(), this.keyboardHeight, this._platform.height());
|
let scrollData = ItemInput.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getContentDimensions(), this.keyboardHeight, this._platform.height());
|
||||||
if (scrollData.scrollAmount > -3 && scrollData.scrollAmount < 3) {
|
if (scrollData.scrollAmount > -3 && scrollData.scrollAmount < 3) {
|
||||||
// the text input is in a safe position that doesn't require
|
// the text input is in a safe position that doesn't require
|
||||||
// it to be scrolled into view, just set focus now
|
// it to be scrolled into view, just set focus now
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import {Component, ElementRef, EventEmitter, Host} from 'angular2/core'
|
import {Component, ElementRef, EventEmitter, Host, Input, Output} from 'angular2/core'
|
||||||
import {NgIf, NgClass} from 'angular2/common';
|
import {NgIf, NgClass} from 'angular2/common';
|
||||||
|
|
||||||
import {Content} from '../content/content';
|
import {Content} from '../content/content';
|
||||||
import * as util from '../../util';
|
import {Icon} from '../icon/icon';
|
||||||
|
import {isDefined, defaults} from '../../util/util';
|
||||||
import {raf, ready, CSS} from '../../util/dom';
|
import {raf, ready, CSS} from '../../util/dom';
|
||||||
|
|
||||||
|
|
||||||
@ -61,15 +62,6 @@ import {raf, ready, CSS} from '../../util/dom';
|
|||||||
*/
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ion-refresher',
|
selector: 'ion-refresher',
|
||||||
inputs: [
|
|
||||||
'pullingIcon',
|
|
||||||
'pullingText',
|
|
||||||
'refreshingIcon',
|
|
||||||
'refreshingText',
|
|
||||||
'spinner',
|
|
||||||
'disablePullingRotation'
|
|
||||||
],
|
|
||||||
outputs: ['refresh', 'starting', 'pulling'],
|
|
||||||
host: {
|
host: {
|
||||||
'[class.active]': 'isActive',
|
'[class.active]': 'isActive',
|
||||||
'[class.refreshing]': 'isRefreshing',
|
'[class.refreshing]': 'isRefreshing',
|
||||||
@ -78,74 +70,67 @@ import {raf, ready, CSS} from '../../util/dom';
|
|||||||
template:
|
template:
|
||||||
'<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">' +
|
'<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">' +
|
||||||
'<div class="icon-pulling">' +
|
'<div class="icon-pulling">' +
|
||||||
'<i class="icon" [ngClass]="pullingIcon"></i>' +
|
'<ion-icon [name]="pullingIcon"></ion-icon>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div class="text-pulling" [innerHTML]="pullingText" *ngIf="pullingText"></div>' +
|
'<div class="text-pulling" [innerHTML]="pullingText" *ngIf="pullingText"></div>' +
|
||||||
'<div class="icon-refreshing">' +
|
'<div class="icon-refreshing">' +
|
||||||
'<i class="icon" [ngClass]="refreshingIcon"></i>' +
|
'<ion-icon [name]="refreshingIcon"></ion-icon>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div class="text-refreshing" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>' +
|
'<div class="text-refreshing" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>' +
|
||||||
'</div>',
|
'</div>',
|
||||||
directives: [NgIf, NgClass]
|
directives: [NgIf, NgClass, Icon]
|
||||||
})
|
})
|
||||||
export class Refresher {
|
export class Refresher {
|
||||||
/**
|
private ele: HTMLElement;
|
||||||
* @private
|
|
||||||
* @param {Content} content TODO
|
isDragging: boolean = false;
|
||||||
* @param {ElementRef} elementRef TODO
|
isOverscrolling: boolean = false;
|
||||||
*/
|
dragOffset: number = 0;
|
||||||
|
lastOverscroll: number = 0;
|
||||||
|
ptrThreshold: number = 0;
|
||||||
|
activated: boolean = false;
|
||||||
|
scrollTime: number = 500;
|
||||||
|
canOverscroll: boolean = false;
|
||||||
|
|
||||||
|
@Input() pullingIcon: string;
|
||||||
|
@Input() pullingText: string;
|
||||||
|
@Input() refreshingIcon: string;
|
||||||
|
@Input() refreshingText: string;
|
||||||
|
@Input() spinner: string;
|
||||||
|
|
||||||
|
@Output() pulling: EventEmitter<any> = new EventEmitter();
|
||||||
|
@Output() refresh: EventEmitter<any> = new EventEmitter();
|
||||||
|
@Output() starting: EventEmitter<any> = new EventEmitter();
|
||||||
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@Host() content: Content,
|
@Host() private content: Content,
|
||||||
element: ElementRef
|
element: ElementRef
|
||||||
) {
|
) {
|
||||||
this.ele = element.nativeElement;
|
this.ele = element.nativeElement;
|
||||||
this.ele.classList.add('content');
|
this.ele.classList.add('content');
|
||||||
|
|
||||||
this.content = content;
|
|
||||||
|
|
||||||
this.refresh = new EventEmitter('refresh');
|
|
||||||
this.starting = new EventEmitter('starting');
|
|
||||||
this.pulling = new EventEmitter('pulling');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.initEvents();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
* Initialize touch and scroll event listeners.
|
|
||||||
*/
|
|
||||||
initEvents() {
|
|
||||||
|
|
||||||
let sp = this.content.getNativeElement();
|
let sp = this.content.getNativeElement();
|
||||||
let sc = this.content.scrollElement;
|
let sc = this.content.scrollElement;
|
||||||
|
|
||||||
this.isDragging = false;
|
|
||||||
this.isOverscrolling = false;
|
|
||||||
this.dragOffset = 0;
|
|
||||||
this.lastOverscroll = 0;
|
|
||||||
this.ptrThreshold = 60;
|
|
||||||
this.activated = false;
|
|
||||||
this.scrollTime = 500;
|
|
||||||
this.startY = null;
|
this.startY = null;
|
||||||
this.deltaY = null;
|
this.deltaY = null;
|
||||||
this.canOverscroll = true;
|
|
||||||
this.scrollHost = sp;
|
this.scrollHost = sp;
|
||||||
this.scrollChild = sc;
|
this.scrollChild = sc;
|
||||||
|
|
||||||
util.defaults(this, {
|
defaults(this, {
|
||||||
pullingIcon: 'ion-android-arrow-down',
|
pullingIcon: 'md-arrow-down',
|
||||||
refreshingIcon: 'ion-ionic'
|
refreshingIcon: 'ionic'
|
||||||
//refreshingText: 'Updating'
|
|
||||||
})
|
})
|
||||||
|
|
||||||
this.showSpinner = !util.isDefined(this.refreshingIcon) && this.spinner != 'none';
|
this.showSpinner = !isDefined(this.refreshingIcon) && this.spinner != 'none';
|
||||||
|
|
||||||
this.showIcon = util.isDefined(this.refreshingIcon);
|
this.showIcon = isDefined(this.refreshingIcon);
|
||||||
|
|
||||||
this._touchMoveListener = this._handleTouchMove.bind(this);
|
this._touchMoveListener = this._handleTouchMove.bind(this);
|
||||||
this._touchEndListener = this._handleTouchEnd.bind(this);
|
this._touchEndListener = this._handleTouchEnd.bind(this);
|
||||||
|
@ -60,7 +60,7 @@ export class TextInput {
|
|||||||
this.element().focus();
|
this.element().focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
relocate(shouldRelocate, inputRelativeY) {
|
relocate(shouldRelocate: boolean, inputRelativeY?) {
|
||||||
if (this._relocated !== shouldRelocate) {
|
if (this._relocated !== shouldRelocate) {
|
||||||
|
|
||||||
let focusedInputEle = this.element();
|
let focusedInputEle = this.element();
|
||||||
|
Reference in New Issue
Block a user