From 14bc7e36fd68f3af0ef04b70f0d419a7fb564473 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 28 May 2015 13:21:33 -0500 Subject: [PATCH] nav'r rooski --- ionic/components/app/structure.scss | 17 +++++++++++++- ionic/components/content/content.js | 23 +++---------------- ionic/components/content/content.scss | 13 ----------- ionic/components/nav/nav-base.js | 22 ++++++++---------- ionic/components/nav/nav-item.js | 1 + ionic/components/nav/nav.js | 6 +++-- .../{content => nav}/swipe-handle.js | 8 +++---- 7 files changed, 38 insertions(+), 52 deletions(-) rename ionic/components/{content => nav}/swipe-handle.js (92%) 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);