feat(gesture): Introducing new gesture controller

ionic-team · Jul 13, 2016 · 9f19023 · 9f19023
1 parent d6f62bc
commit 9f19023
Show file tree

Hide file tree

Showing 25 changed files with 1,032 additions and 121 deletions.
diff --git a/src/components/app/test/gesture-collision/e2e.ts b/src/components/app/test/gesture-collision/e2e.ts
diff --git a/src/components/app/test/gesture-collision/index.ts b/src/components/app/test/gesture-collision/index.ts
@@ -0,0 +1,70 @@
+import { Component, ViewChild } from '@angular/core';
+import { ionicBootstrap, MenuController, NavController, AlertController, Nav, Refresher } from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'page1.html'
+})
+class Page1 {
+  constructor(private nav: NavController, private alertCtrl: AlertController) {}
+
+  presentAlert() {
+    let alert = this.alertCtrl.create({
+      title: 'New Friend!',
+      message: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
+      cssClass: 'my-alert',
+      buttons: ['Ok']
+    });
+    alert.present();
+  }
+
+  goToPage1() {
+    this.nav.push(Page1);
+  }
+
+  doRefresh(refresher: Refresher) {
+    setTimeout(() => {
+      refresher.complete();
+    }, 1000);
+  }
+}
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  rootPage: any;
+  changeDetectionCount: number = 0;
+  pages: Array<{title: string, component: any}>;
+  @ViewChild(Nav) nav: Nav;
+
+  constructor(private menu: MenuController) {
+    this.rootPage = Page1;
+
+    this.pages = [
+      { title: 'Page 1', component: Page1 },
+      { title: 'Page 2', component: Page1 },
+      { title: 'Page 3', component: Page1 },
+    ];
+  }
+
+  openPage(page: any) {
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    this.nav.setRoot(page.component).then(() => {
+      // wait for the root page to be completely loaded
+      // then close the menu
+      this.menu.close();
+    });
+  }
+}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+class E2EApp {
+  rootPage = E2EPage;
+}
+
+ionicBootstrap(E2EApp);
diff --git a/src/components/app/test/gesture-collision/main.html b/src/components/app/test/gesture-collision/main.html
@@ -0,0 +1,159 @@
+<ion-menu [content]="content" side="left" persistent="true">
+
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+
+    <ion-list>
+
+      <ion-item-sliding *ngFor="let p of pages">
+        <button ion-item (click)="openPage(p)">
+          {{p.title}}
+        </button>
+        <ion-item-options side="left">
+          <button>Test</button>
+        </ion-item-options>
+        <ion-item-options>
+          <button>Test</button>
+        </ion-item-options>
+      </ion-item-sliding>
+
+      <button ion-item menuClose="left" class="e2eCloseLeftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+  <ion-footer>
+    <ion-toolbar secondary>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+
+</ion-menu>
+
+
+<ion-menu [content]="content" side="right">
+
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Right Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
+        {{p.title}}
+      </button>
+
+      <button ion-item menuClose="right" class="e2eCloseRightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+    </ion-list>
+
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>
diff --git a/src/components/app/test/gesture-collision/page1.html b/src/components/app/test/gesture-collision/page1.html
@@ -0,0 +1,84 @@
+<ion-header>
+
+  <ion-navbar>
+
+    <button menuToggle="left">
+      <ion-icon name="menu"></ion-icon>
+    </button>
+
+    <ion-title>
+      Menu
+    </ion-title>
+
+    <button menuToggle="right" right secondary>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+  <ion-refresher (ionRefresh)="doRefresh($event)">
+
+    <ion-refresher-content
+      pullingText="Pull to refresh..."
+      refreshingSpinner="bubbles"
+      refreshingText="Refreshing...">
+    </ion-refresher-content>
+
+  </ion-refresher>
+
+  <h3>Page 1</h3>
+
+  <ion-list padding>
+    <ion-item-sliding>
+      <button ion-item class="e2eContentToggleLeftMenu" menuToggle="left">Toggle Left Menu</button>
+
+      <ion-item-options side="left">
+        <button>Test</button>
+      </ion-item-options>
+      <ion-item-options>
+        <button>Test</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+  </ion-list>
+  <ion-list>
+
+    <ion-item-sliding>
+      <button ion-item class="e2eContentToggleRightMenu" menuToggle="right">Toggle Right Menu</button>
+
+      <ion-item-options side="left">
+        <button>Test</button>
+      </ion-item-options>
+      <ion-item-options>
+        <button>Test</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <button ion-item (click)="goToPage1()">Push same page</button>
+
+    <ion-item>
+      <ion-label>RANGE</ion-label>
+      <ion-range></ion-range>
+    </ion-item>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>SLIDING ITEM + RANGE</ion-label>
+        <ion-range></ion-range>
+      </ion-item>
+      <ion-item-options side="left">
+        <button>Test</button>
+      </ion-item-options>
+      <ion-item-options>
+        <button>Test</button>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>
diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts
@@ -25,10 +25,9 @@ export class ItemReorderGesture {
 
   private events: UIEventManager = new UIEventManager(false);
 
-  constructor(public list: ItemReorder) {
-    let element = this.list.getNativeElement();
+  constructor(public reorderList: ItemReorder) {
     this.events.pointerEvents({
-      element: element,
+      element: this.reorderList.getNativeElement(),
       pointerDown: this.onDragStart.bind(this),
       pointerMove: this.onDragMove.bind(this),
       pointerUp: this.onDragEnd.bind(this)
@@ -46,7 +45,7 @@ export class ItemReorderGesture {
       console.error('ion-reorder does not contain $ionComponent');
       return false;
     }
-    this.list.reorderPrepare();
+    this.reorderList.reorderPrepare();
 
     let item = reorderMark.getReorderNode();
     if (!item) {
@@ -62,13 +61,13 @@ export class ItemReorderGesture {
     this.lastToIndex = indexForItem(item);
 
     this.windowHeight = window.innerHeight - AUTO_SCROLL_MARGIN;
-    this.lastScrollPosition = this.list.scrollContent(0);
+    this.lastScrollPosition = this.reorderList.scrollContent(0);
 
     this.offset = pointerCoord(ev);
     this.offset.y += this.lastScrollPosition;
 
     item.classList.add(ITEM_REORDER_ACTIVE);
-    this.list.reorderStart();
+    this.reorderList.reorderStart();
     return true;
   }
 
@@ -96,7 +95,7 @@ export class ItemReorderGesture {
           this.lastToIndex = toIndex;
           this.lastYcoord = posY;
           this.emptyZone = false;
-          this.list.reorderMove(fromIndex, toIndex, this.selectedItemHeight);
+          this.reorderList.reorderMove(fromIndex, toIndex, this.selectedItemHeight);
         }
       } else {
         this.emptyZone = true;
@@ -127,7 +126,7 @@ export class ItemReorderGesture {
     } else {
       reorderInactive();
     }
-    this.list.reorderEmit(fromIndex, toIndex);
+    this.reorderList.reorderEmit(fromIndex, toIndex);
   }
 
   private itemForCoord(coord: Coordinates): HTMLElement {
@@ -136,9 +135,9 @@ export class ItemReorderGesture {
 
   private scroll(posY: number): number {
     if (posY < AUTO_SCROLL_MARGIN) {
-      this.lastScrollPosition = this.list.scrollContent(-SCROLL_JUMP);
+      this.lastScrollPosition = this.reorderList.scrollContent(-SCROLL_JUMP);
     } else if (posY > this.windowHeight) {
-      this.lastScrollPosition = this.list.scrollContent(SCROLL_JUMP);
+      this.lastScrollPosition = this.reorderList.scrollContent(SCROLL_JUMP);
     }
     return this.lastScrollPosition;
   }
@@ -150,7 +149,7 @@ export class ItemReorderGesture {
     this.onDragEnd();
     this.events.unlistenAll();
     this.events = null;
-    this.list = null;
+    this.reorderList = null;
   }
 }