a swipe back named desire

ionic/components/app/z-index.scss

@@ -4,6 +4,8 @@
 
 
 $z-index-content:                1 !default;
+$z-index-swipe-handle:           5 !default;
+$z-index-button:                 10 !default;
 $z-index-toolbar-border:         20 !default;
 $z-index-list-border:            50 !default;
 $z-index-aside-overlay:          80 !default;

ionic/components/button/button.scss

@@ -32,6 +32,7 @@ $button-small-icon-size:          2.1rem !default;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
+  z-index: $z-index-button;
 
   margin: $button-margin;
   line-height: 1;

ionic/components/content/content.js

@@ -2,23 +2,27 @@ import {Renderer, ElementRef} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
+import {SwipeHandle} from './swipe-handle';
+import {NavItem} from '../nav/nav-item';
+
 
 @Component({
-  selector: 'ion-content',
+  selector: 'ion-content'
-  // hostProperties: {
-  //   contentClass: 'class.content'
-  // }
 })
 @View({
   template: `
     <div class="scroll-content">
       <content></content>
-    </div>`
+    </div>
+    <swipe-handle [hidden]="hideSwipeHandle"></swipe-handle>`,
+  directives: [SwipeHandle]
 })
 export class Content {
-  constructor(elementRef: ElementRef) {
+  constructor(navItem: NavItem) {
-    this.domElement = elementRef.domElement;
+    this.navItem = navItem;
-    //this.contentClass = true;
+  }
-    console.log('Content!');
+
+  get hideSwipeHandle() {
+    return !this.navItem.enableBack;
   }
 }

ionic/components/content/content.scss

@@ -3,8 +3,21 @@
 // --------------------------------------------------
 
 $content-background-color:         #fff !default;
+$swipe-handle-width:               20px !default;
 
 
 .nav-item-container {
   background-color: $content-background-color;
 }
+
+swipe-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: $swipe-handle-width;
+  height: 100%;
+  z-index: $z-index-swipe-handle;
+  background: red;
+  opacity: 0.5;
+}

ionic/components/content/swipe-handle.js

@@ -0,0 +1,45 @@
+import {ElementRef} from 'angular2/angular2'
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Directive} from 'angular2/src/core/annotations_impl/annotations';
+
+import {Gesture} from 'ionic/gestures/gesture';
+import {NavItem} from '../nav/nav-item';
+
+
+@Directive({
+  selector: 'swipe-handle'
+})
+export class SwipeHandle {
+  constructor(@Ancestor() navItem: NavItem, elementRef: ElementRef) {
+    let nav = navItem.nav;
+
+    let gesture = new Gesture(elementRef.domElement);
+
+    gesture.listen();
+
+    gesture.on('panend', onDragEnd);
+    gesture.on('panleft', onDragHorizontal);
+    gesture.on('panright', onDragHorizontal);
+
+    let navWidth = 0;
+
+    function onDragEnd(ev) {
+      let completeSwipeBack = (ev.gesture.center.x / navWidth) > 0.5;
+
+      nav.swipeBackEnd(completeSwipeBack);
+
+      navWidth = 0;
+    }
+
+    function onDragHorizontal(ev) {
+      if (navWidth === 0) {
+        navWidth = nav.width();
+        nav.swipeBackStart();
+      }
+
+      nav.swipeBackProgress( ev.gesture.center.x / navWidth );
+    }
+
+  }
+
+}

ionic/components/nav/nav-base.js

@@ -222,4 +222,18 @@ export class NavBase {
     util.array.remove(this.items, itemOrIndex);
   }
 
+  swipeBackStart() {
+    console.log('swipeBackStart')
+  }
+
+  swipeBackEnd(completeSwipeBack) {
+    console.log('swipeBackEnd, completeSwipeBack:', completeSwipeBack)
+  }
+
+  swipeBackProgress(value) {
+    value = Math.min(1, Math.max(0, value));
+
+    console.log('swipeBackProgress', value)
+  }
+
 }

ionic/components/nav/nav.js

@@ -32,6 +32,10 @@ export class Nav extends NavBase {
     super(loader, injector);
     this.domElement = elementRef.domElement;
   }
+
+  width() {
+    return this.domElement.offsetWidth;
+  }
 }
 
 

ionic/components/nav/test/basic/pages/first-page.html

@@ -11,7 +11,7 @@
   <p>First Page: {{ val }}</p>
 
   <p>
-    <button (click)="push()">Push (Go to 2nd)</button>
+    <button class="button" (click)="push()">Push (Go to 2nd)</button>
   </p>
 
 </ion-content>

ionic/components/nav/test/basic/pages/first-page.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, HeaderTemplate, Toolbar} from 'ionic/ionic';
+import {NavController, HeaderTemplate, Toolbar, Content} from 'ionic/ionic';
 import {SecondPage} from './second-page';
 
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/first-page.html',
-  directives: [HeaderTemplate, Toolbar]
+  directives: [HeaderTemplate, Toolbar, Content]
 })
 export class FirstPage {
   constructor(

ionic/components/nav/test/basic/pages/second-page.html

@@ -9,11 +9,11 @@
 <ion-content class="padding">
 
   <p>
-    <button (click)="pop()">Pop (Go back to 1st)</button>
+    <button class="button" (click)="pop()">Pop (Go back to 1st)</button>
   </p>
 
   <p>
-    <button (click)="push()">Push (Go to 3rd)</button>
+    <button class="button" (click)="push()">Push (Go to 3rd)</button>
   </p>
 
 </ion-content>

ionic/components/nav/test/basic/pages/second-page.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, NavParams, HeaderTemplate, Toolbar} from 'ionic/ionic';
+import {NavController, NavParams, HeaderTemplate, Toolbar, Content} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
 @Component()
 @View({
   templateUrl: 'pages/second-page.html',
-  directives: [HeaderTemplate, Toolbar]
+  directives: [HeaderTemplate, Toolbar, Content]
 })
 export class SecondPage {
   constructor(

ionic/components/nav/test/basic/pages/third-page.html

@@ -9,7 +9,7 @@
 <ion-content class="padding">
 
   <p>
-    <button (click)="pop()">Pop (Go back to 2nd)</button>
+    <button class="button" (click)="pop()">Pop (Go back to 2nd)</button>
   </p>
 
 </ion-content>

ionic/components/nav/test/basic/pages/third-page.js

@@ -1,13 +1,13 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, HeaderTemplate, Toolbar} from 'ionic/ionic';
+import {NavController, HeaderTemplate, Toolbar, Content} from 'ionic/ionic';
 
 
 @Component()
 @View({
   templateUrl: 'pages/third-page.html',
-  directives: [HeaderTemplate, Toolbar]
+  directives: [HeaderTemplate, Toolbar, Content]
 })
 export class ThirdPage {
   constructor(