From 083df1a482575e797a6541cc35fd5108931afba3 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 6 Jul 2015 08:34:45 -0500 Subject: [PATCH] Working PTR --- ionic/components/content/content.ts | 11 ++-- ionic/components/item/extensions/ios.scss | 1 + ionic/components/scroll/pull-to-refresh.scss | 4 +- ionic/components/scroll/pull-to-refresh.ts | 50 ++++++++++++++----- .../scroll/test/pull-to-refresh/index.ts | 8 ++- .../scroll/test/pull-to-refresh/main.html | 3 +- ionic/components/toolbar/toolbar.scss | 3 ++ 7 files changed, 57 insertions(+), 23 deletions(-) diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 221070d453..4efc136f18 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -1,4 +1,4 @@ -import {Component, View, ElementRef} from 'angular2/angular2'; +import {Component, View, ElementRef, onInit} from 'angular2/angular2'; import {Ion} from '../ion'; @@ -7,7 +7,8 @@ import {Ion} from '../ion'; selector: 'ion-content', properties: [ 'parallax' - ] + ], + lifecycle: [onInit] }) @View({ template: '
' @@ -15,10 +16,10 @@ import {Ion} from '../ion'; export class Content extends Ion { constructor(elementRef: ElementRef) { super(elementRef); + } - setTimeout(() => { - this.scrollElement = elementRef.nativeElement.children[0]; - }); + onInit() { + this.scrollElement = this.elementRef.nativeElement.children[0]; } addScrollEventListener(handler) { diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss index b44dc55f3b..618e12c95e 100644 --- a/ionic/components/item/extensions/ios.scss +++ b/ionic/components/item/extensions/ios.scss @@ -52,5 +52,6 @@ $item-ios-border-color: $list-ios-border-color !default; } .list-ios .item-group-title { + // TODO: This doesn't look great when it's a header for the first item @include hairline(bottom, $item-ios-border-color, $z-index-list-border); } diff --git a/ionic/components/scroll/pull-to-refresh.scss b/ionic/components/scroll/pull-to-refresh.scss index c97342b22f..485888130b 100644 --- a/ionic/components/scroll/pull-to-refresh.scss +++ b/ionic/components/scroll/pull-to-refresh.scss @@ -74,8 +74,8 @@ ion-refresher { } } } -.scroll-content.overscroll{ - position:fixed; +.scroll-content.overscroll { + overflow: visible; } /* -webkit-overflow-scrolling:touch; diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts index fbf5c0d1a0..cf76a3f1b9 100644 --- a/ionic/components/scroll/pull-to-refresh.ts +++ b/ionic/components/scroll/pull-to-refresh.ts @@ -1,4 +1,4 @@ -import {Component, View, NgIf, CSSClass, ElementRef, EventEmitter, Parent} from 'angular2/angular2' +import {Component, View, NgIf, CSSClass, ElementRef, EventEmitter, Parent, onInit} from 'angular2/angular2' import {Content} from '../content/content'; @@ -20,19 +20,20 @@ import {raf, ready, CSS} from 'ionic/util/dom'; '[class.active]': 'isActive', '[class.refreshing]': 'isRefreshing', '[class.refreshingTail]': 'isRefreshingTail' - } + }, + lifecycle: [onInit] }) @View({ - template: `
+ template: `
-
+
-
+
`, directives: [NgIf, CSSClass] }) @@ -49,10 +50,10 @@ export class Refresher { this.refresh = new EventEmitter('refresh'); this.starting = new EventEmitter('starting'); this.pulling = new EventEmitter('pulling'); + } - setTimeout(() => { - this.initEvents(); - }, 1000); + onInit() { + this.initEvents(); } initEvents() { @@ -73,9 +74,11 @@ export class Refresher { this.scrollParent = sp; this.scrollChild = sc; - if(!util.isDefined(this.pullingIcon)) { - this.pullingIcon = 'ion-android-arrow-down'; - } + util.defaults(this, { + pullingIcon: 'ion-android-arrow-down', + refreshingIcon: 'ion-ionic' + //refreshingText: 'Updating' + }) this.showSpinner = !util.isDefined(this.refreshingIcon) && this.spinner != 'none'; @@ -149,7 +152,7 @@ export class Refresher { start() { // startCallback this.isRefreshing = true; - this.refresh.next(); + this.refresh.next(this); //$scope.$onRefresh(); } @@ -164,6 +167,29 @@ export class Refresher { this.ele.classList.add('invisible'); } + tail() { + // tailCallback + this.ele.classList.add('refreshing-tail'); + } + + complete() { + setTimeout(() => { + raf(this.tail.bind(this)); + + // scroll back to home during tail animation + this.scrollTo(0, this.scrollTime, this.deactivate.bind(this)); + + // return to native scrolling after tail animation has time to finish + setTimeout(() => { + if(this.isOverscrolling) { + this.isOverscrolling = false; + this.setScrollLock(false); + } + }, this.scrollTime); + + }, this.scrollTime); + } + scrollTo(Y, duration, callback) { // scroll animation loop w/ easing // credit https://gist.github.com/dezinezync/5487119 diff --git a/ionic/components/scroll/test/pull-to-refresh/index.ts b/ionic/components/scroll/test/pull-to-refresh/index.ts index 564af9a419..a11aba8903 100644 --- a/ionic/components/scroll/test/pull-to-refresh/index.ts +++ b/ionic/components/scroll/test/pull-to-refresh/index.ts @@ -11,8 +11,12 @@ class MyApp { constructor() { console.log('IonicApp Start') } - doRefresh() { - console.log('DOREFRESH') + doRefresh(refresher) { + console.log('DOREFRESH', refresher) + + setTimeout(() => { + refresher.complete(); + }) } doStarting() { console.log('DOSTARTING'); diff --git a/ionic/components/scroll/test/pull-to-refresh/main.html b/ionic/components/scroll/test/pull-to-refresh/main.html index d0e156f529..651800e5e1 100644 --- a/ionic/components/scroll/test/pull-to-refresh/main.html +++ b/ionic/components/scroll/test/pull-to-refresh/main.html @@ -2,7 +2,7 @@ Pull To Refresh - + @@ -16,7 +16,6 @@