PTR Sink

Author: mlynch

ionic/components/app/test/sink/index.ts

@@ -4,6 +4,7 @@ import {IonicApp, IonicView, Register} from 'ionic/ionic';
 
 import {ButtonPage} from './pages/button'
 import {NavPage} from './pages/nav'
+import {PullToRefreshPage} from './pages/pull-to-refresh'
 import {ListPage} from './pages/list'
 import {ListGroupPage} from './pages/list-group'
 import {CardPage} from './pages/card'
@@ -33,21 +34,22 @@ class MyApp {
 
     this.components = [
       { title: 'Navigation', component: NavPage },
+      { title: 'Tabs', component: TabsPage },
       { title: 'Buttons', component: ButtonPage },
       { title: 'Lists', component: ListPage },
       { title: 'List Groups', component: ListGroupPage },
+      { title: 'Modal', component: ModalPage },
+      { title: 'Pull to Refresh', component: PullToRefreshPage },
       { title: 'Cards', component: CardPage },
       { title: 'Forms', component: FormPage },
       { title: 'Segments', component: SegmentPage },
       { title: 'Search Bar', component: SearchBarPage },
       { title: 'Table Search', component: TableSearchPage },
       { title: 'Icons', component: IconsPage },
-      { title: 'Tabs', component: TabsPage },
       { title: 'Aside', component: AsidePage },
       { title: 'Animation', component: AnimationPage },
       { title: 'Slides', component: SlidePage},
       { title: 'Action Menu', component: ActionMenuPage },
-      { title: 'Modal', component: ModalPage }
     ];
 
     this.rootView = ButtonPage

ionic/components/app/test/sink/pages/pull-to-refresh.ts

@@ -0,0 +1,56 @@
+import {NgFor, Component, Directive, View} from 'angular2/angular2';
+
+import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Content, Refresher} from 'ionic/ionic';
+
+import {SinkPage} from '../sink-page';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Pull to Refresh</ion-title></ion-navbar>
+
+  <ion-content>
+    <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
+    </ion-refresher>
+    <ion-list inset>
+      <ion-item *ng-for="#item of items">
+        {{item.title}}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+  `,
+  directives: [NgFor, NavbarTemplate, Navbar, Content, List, Item, Refresher]
+})
+export class PullToRefreshPage extends SinkPage {
+  constructor(app: IonicApp) {
+    super(app);
+
+    this.items = [];
+    for(let i = 90; i < 100; i++) {
+      this.items.push({
+        title: i
+      });
+    }
+    this.i = 90;
+  }
+  doRefresh(refresher) {
+    console.log('DOREFRESH', refresher)
+
+    this.items.unshift({
+      title: (--i)
+    });
+
+    setTimeout(() => {
+      refresher.complete();
+    }, 1500)
+  }
+  doStarting() {
+    console.log('DOSTARTING');
+  }
+  doPulling(amt) {
+    console.log('DOPULLING', amt);
+  }
+}