diff --git a/src/components/content/content.ts b/src/components/content/content.ts index da8ee2213b3..ac2dffd5482 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -64,8 +64,6 @@ export class Content extends Ion { private _paddingRight: number; private _paddingBottom: number; private _paddingLeft: number; - private _lastTop: number; - private _lastBottom: number; private _scrollPadding: number; private _headerHeight: number; private _footerHeight: number; @@ -78,6 +76,16 @@ export class Content extends Ion { private _sbPadding: boolean; private _fullscreen: boolean; + /** + * @private + */ + adjustedTop: number; + + /** + * @private + */ + adjustedBottom: number; + constructor( private _elementRef: ElementRef, private _config: Config, @@ -185,7 +193,7 @@ export class Content extends Ion { } }; } - + /** * @private */ @@ -510,16 +518,18 @@ export class Content extends Ion { if (this._tabbarPlacement === 'top') { newVal += this._tabbarHeight; } - if (newVal !== this._lastTop) { + if (newVal !== this.adjustedTop) { this._scrollEle.style.paddingTop = (newVal > 0 ? newVal + 'px' : ''); + this.adjustedTop = newVal; } newVal = this._footerHeight + this._paddingBottom; if (this._tabbarPlacement === 'bottom') { newVal += this._tabbarHeight; } - if (newVal !== this._lastBottom) { + if (newVal !== this.adjustedBottom) { this._scrollEle.style.paddingBottom = (newVal > 0 ? newVal + 'px' : ''); + this.adjustedBottom = newVal; } } else { @@ -528,16 +538,18 @@ export class Content extends Ion { if (this._tabbarPlacement === 'top') { newVal += this._tabbarHeight; } - if (newVal !== this._lastTop) { + if (newVal !== this.adjustedTop) { this._scrollEle.style.marginTop = (newVal > 0 ? newVal + 'px' : ''); + this.adjustedTop = newVal; } newVal = this._footerHeight; if (this._tabbarPlacement === 'bottom') { newVal += this._tabbarHeight; } - if (newVal !== this._lastBottom) { + if (newVal !== this.adjustedBottom) { this._scrollEle.style.marginBottom = (newVal > 0 ? newVal + 'px' : ''); + this.adjustedBottom = newVal; } } diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss index ebf1f5dd904..360aa198652 100644 --- a/src/components/item/item-reorder.scss +++ b/src/components/item/item-reorder.scss @@ -16,7 +16,7 @@ ion-reorder { pointer-events: all; touch-action: manipulation; - + ion-icon { pointer-events: none; } @@ -39,7 +39,7 @@ ion-item.reorder-active { box-shadow: 0 0 10px rgba(0, 0, 0, .5); opacity: .8; transition: none; - + pointer-events: none; ion-reorder { diff --git a/src/components/refresher/refresher.ts b/src/components/refresher/refresher.ts index 06a9c729274..f3ad5bc00a5 100644 --- a/src/components/refresher/refresher.ts +++ b/src/components/refresher/refresher.ts @@ -1,10 +1,9 @@ -import {Directive, ElementRef, EventEmitter, Host, Input, Output, NgZone} from '@angular/core'; +import { Directive, EventEmitter, Host, Input, Output, NgZone } from '@angular/core'; -import {Content} from '../content/content'; -import {Icon} from '../icon/icon'; -import {isTrueProperty} from '../../util/util'; -import {CSS, pointerCoord, transitionEnd} from '../../util/dom'; -import {PointerEvents, UIEventManager} from '../../util/ui-event-manager'; +import { Content } from '../content/content'; +import { CSS, pointerCoord } from '../../util/dom'; +import { isTrueProperty } from '../../util/util'; +import { PointerEvents, UIEventManager } from '../../util/ui-event-manager'; /** @@ -90,7 +89,8 @@ import {PointerEvents, UIEventManager} from '../../util/ui-event-manager'; @Directive({ selector: 'ion-refresher', host: { - '[class.refresher-active]': 'state !== "inactive"' + '[class.refresher-active]': 'state !== "inactive"', + '[style.top]': '_top' } }) export class Refresher { @@ -100,6 +100,7 @@ export class Refresher { private _isEnabled: boolean = true; private _events: UIEventManager = new UIEventManager(false); private _pointerEvents: PointerEvents; + private _top: string = ''; /** * The current state which the refresher is in. The refresher's states include: @@ -195,23 +196,8 @@ export class Refresher { @Output() ionStart: EventEmitter = new EventEmitter(); - constructor( - @Host() private _content: Content, - private _zone: NgZone, - elementRef: ElementRef) { + constructor(@Host() private _content: Content, private _zone: NgZone) { _content.addCssClass('has-refresher'); - - // deprecated warning - let ele = elementRef.nativeElement; - let deprecatedAttrs = ['pullingIcon', 'pullingText', 'refreshingIcon', 'refreshingText', 'spinner']; - deprecatedAttrs.forEach(attrName => { - if (ele.hasAttribute(attrName)) { - console.warn(' property "' + attrName + '" should now be placed on the inner component instead of . Please review the Refresher docs for API updates.'); - } - }); - if (!ele.children.length) { - console.warn(' should now have an inner component. Please review the Refresher docs for API updates.'); - } } private _onStart(ev: TouchEvent): any { @@ -233,6 +219,13 @@ export class Refresher { let coord = pointerCoord(ev); console.debug('Pull-to-refresh, onStart', ev.type, 'y:', coord.y); + if (this._content.adjustedTop > 0) { + let newTop = this._content.adjustedTop + 'px'; + if (this._top !== newTop) { + this._top = newTop; + } + } + this.startY = this.currentY = coord.y; this.progress = 0; this.state = STATE_PULLING; diff --git a/src/components/refresher/test/basic/index.ts b/src/components/refresher/test/basic/index.ts index d1648bbb499..ade4173ee03 100644 --- a/src/components/refresher/test/basic/index.ts +++ b/src/components/refresher/test/basic/index.ts @@ -1,12 +1,12 @@ import {Component} from '@angular/core'; -import {ionicBootstrap} from '../../../../../src'; +import {ionicBootstrap, Refresher} from '../../../../../src'; @Component({ templateUrl: 'main.html' }) -class E2EApp { - items = []; +class Page1 { + items: string[] = []; constructor() { for (var i = 0; i < 15; i++) { @@ -14,10 +14,10 @@ class E2EApp { } } - doRefresh(refresher) { + doRefresh(refresher: Refresher) { console.info('Begin async operation'); - getAsyncData().then(newData => { + getAsyncData().then((newData: string[]) => { for (var i = 0; i < newData.length; i++) { this.items.unshift( newData[i] ); } @@ -27,11 +27,11 @@ class E2EApp { }); } - doStart(refresher) { + doStart(refresher: Refresher) { console.info('Refresher, start'); } - doPulling(refresher) { + doPulling(refresher: Refresher) { console.info('Pulling', refresher.progress); } @@ -42,7 +42,7 @@ function getAsyncData() { return new Promise(resolve => { setTimeout(() => { - let data = []; + let data: string[] = []; for (var i = 0; i < 3; i++) { data.push( getRandomData() ); } @@ -85,4 +85,12 @@ const data = [ 'Drive Angry' ]; + +@Component({ + template: '' +}) +class E2EApp { + rootPage = Page1; +} + ionicBootstrap(E2EApp);