diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index fb724f9ec0..844aa22392 100644
--- a/ionic/components/app/structure.scss
+++ b/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;
+}
diff --git a/ionic/components/content/content.js b/ionic/components/content/content.js
index 307dea5e20..8862e32b24 100644
--- a/ionic/components/content/content.js
+++ b/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: `
-
-
-
- `,
- directives: [SwipeHandle]
+ template: `
`
})
-export class Content {
- constructor(navItem: NavItem) {
- this.navItem = navItem;
- }
-
- get hideSwipeHandle() {
- return !this.navItem.enableBack;
- }
-}
+export class Content {}
diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss
index 22d5ab50f6..3e7cb2f97a 100644
--- a/ionic/components/content/content.scss
+++ b/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;
-}
diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js
index cad8880ed1..09429715c3 100644
--- a/ionic/components/nav/nav-base.js
+++ b/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() {
diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js
index ffeb853ec1..847aed1631 100644
--- a/ionic/components/nav/nav-item.js
+++ b/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,
diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js
index 9a5e98a4f5..58ff00fac0 100644
--- a/ionic/components/nav/nav.js
+++ b/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'
`,
- directives: [NavbarAnchor, ContentAnchor]
+ directives: [NavbarAnchor, ContentAnchor, SwipeHandle]
})
export class Nav extends NavBase {
constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
diff --git a/ionic/components/content/swipe-handle.js b/ionic/components/nav/swipe-handle.js
similarity index 92%
rename from ionic/components/content/swipe-handle.js
rename to ionic/components/nav/swipe-handle.js
index 08f1bdea32..00f294c5c2 100644
--- a/ionic/components/content/swipe-handle.js
+++ b/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);