nav'r rooski

ionic/components/app/structure.scss

@@ -61,7 +61,8 @@ ion-navbar {
   }
 }
 
-ion-view {
+ion-view,
+.ion-view {
   position: absolute;
   top: 0;
   left: 0;
@@ -101,3 +102,17 @@ ion-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
+
+$swipe-handle-width:               20px !default;
+
+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/content.js

@@ -1,28 +1,11 @@
-import {Renderer, ElementRef} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} 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'
 })
 @View({
-  template: `
-    <div class="scroll-content">
-      <content></content>
-    </div>
-    <swipe-handle [hidden]="hideSwipeHandle"></swipe-handle>`,
-  directives: [SwipeHandle]
+  template: `<div class="scroll-content"><content></content></div>`
 })
-export class Content {
-  constructor(navItem: NavItem) {
-    this.navItem = navItem;
-  }
-
-  get hideSwipeHandle() {
-    return !this.navItem.enableBack;
-  }
-}
+export class Content {}

ionic/components/content/content.scss

@@ -3,21 +3,8 @@
 // --------------------------------------------------
 
 $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/nav/nav-base.js

@@ -132,14 +132,11 @@ export class NavBase {
           enteringItem.state = ACTIVE_STATE;
           leavingItem.state = CACHED_STATE;
 
-          // destroy any items that shouldn't stay around
-          this.cleanup();
-
-          // dispose all references
+          // dispose any items that shouldn't stay around
           transAnimation.dispose();
 
-          // allow clicks again
-          ClickBlock(false);
+          // all done!
+          this.transitionComplete();
 
           // resolve that this push has completed
           resolve();
@@ -208,9 +205,6 @@ export class NavBase {
             enteringItem.state = ACTIVE_STATE;
             leavingItem.state = CACHED_STATE;
 
-            // destroy any items that shouldn't stay around
-            this.cleanup();
-
           } else {
             // cancelled the swipe back, return items to original state
             leavingItem.state = ACTIVE_STATE;
@@ -220,8 +214,8 @@ export class NavBase {
             enteringItem.shouldDestroy = false;
           }
 
-          // allow clicks again
-          ClickBlock(false);
+          // all done!
+          this.transitionComplete();
 
         });
 
@@ -263,7 +257,8 @@ export class NavBase {
     }
   }
 
-  cleanup() {
+  transitionComplete() {
+
     this.items.forEach((item) => {
       if (item) {
         if (item.shouldDestroy) {
@@ -275,6 +270,9 @@ export class NavBase {
         }
       }
     });
+
+    // allow clicks again
+    ClickBlock(false);
   }
 
   isTransitioning() {

ionic/components/nav/nav-item.js

@@ -54,6 +54,7 @@ export class NavItem {
         this.disposals.push(componentRef.dispose);
 
         this.viewEle = componentRef.location.domElement;
+        this.viewEle.classList.add('ion-view');
 
         let context = {
           boundElementIndex: 0,

ionic/components/nav/nav.js

@@ -7,7 +7,8 @@ import {Injector} from 'angular2/di';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
 import {NavBase} from './nav-base';
-import {IonicComponent} from 'ionic/config/component'
+import {SwipeHandle} from './swipe-handle';
+import {IonicComponent} from '../../config/component';
 
 
 @Component({
@@ -23,9 +24,10 @@ import {IonicComponent} from 'ionic/config/component'
     </header>
     <section class="content-container">
       <template content-anchor></template>
+      <swipe-handle></swipe-handle>
     </section>
   `,
-  directives: [NavbarAnchor, ContentAnchor]
+  directives: [NavbarAnchor, ContentAnchor, SwipeHandle]
 })
 export class Nav extends NavBase {
   constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {

ionic/components/nav/swipe-handle.js

@@ -3,18 +3,18 @@ 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';
+import {Nav} from './nav';
 
 
 @Directive({
   selector: 'swipe-handle'
 })
 export class SwipeHandle {
-  constructor(@Ancestor() navItem: NavItem, elementRef: ElementRef) {
-    let nav = navItem.nav;
-
+  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
     let gesture = new Gesture(elementRef.domElement);
 
+    this.hidden = true;
+
     gesture.listen();
 
     gesture.on('panend', onDragEnd);