chore(): fix pull-to-refresh types

This commit is contained in:
Adam Bradley
2016-01-14 13:20:52 -06:00
parent e67c79104f
commit 6dc7b25c5f
4 changed files with 44 additions and 56 deletions

View File

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

View File

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

View File

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

View File

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