fix(nav): ion-nav inside ion-content work properly

This commit is contained in:
Manu Mtz.-Almeida
2016-10-15 02:59:57 +02:00
parent 3283347149
commit ba557acb4f
8 changed files with 60 additions and 21 deletions

View File

@ -173,8 +173,8 @@ export class Content extends Ion {
this._sbPadding = config.getBoolean('statusbarPadding', false);
if (viewCtrl) {
viewCtrl._setContent(this);
viewCtrl._setContentRef(elementRef);
viewCtrl._setIONContent(this);
viewCtrl._setIONContentRef(elementRef);
}
}

View File

@ -40,7 +40,7 @@ export class MyCmpTest {}
<button ion-item [navPush]="'FirstPage'">Push w/ [navPush] and string view name</button>
<button ion-item (click)="setPages()">setPages() (Go to PrimaryHeaderPage)</button>
<button ion-item (click)="setRoot()">setRoot(PrimaryHeaderPage) (Go to PrimaryHeaderPage)</button>
<button ion-item (click)="navCtrl.pop()">Pop</button>
<button ion-item (click)="pop()">Pop</button>
<ion-item>
<ion-label>Toggle Can Leave</ion-label>
<ion-toggle (click)="canLeave = !canLeave"></ion-toggle>
@ -174,6 +174,10 @@ export class FirstPage {
}, 250);
}
pop() {
this.navCtrl.pop().catch(() => {});
}
viewDismiss() {
this.viewCtrl.dismiss();
}

View File

@ -27,12 +27,15 @@ export class E2EApp {
})
export class LandingPage {
constructor(public navCtrl: NavController) {
}
constructor(public navCtrl: NavController) {}
goToPage() {
this.navCtrl.push(FirstPage);
}
ionViewDidLoad() {
this.goToPage();
}
}
@Component({

View File

@ -421,8 +421,8 @@ export class Tabs extends Ion implements AfterViewInit {
// to refresh the tabbar and content dimensions to be sure
// they're lined up correctly
if (alreadyLoaded && selectedPage) {
let content = <Content>selectedPage.getContent();
if (content && content instanceof Content) {
let content = <Content>selectedPage.getIONContent();
if (content) {
content.resize();
}
}

View File

@ -175,20 +175,17 @@ export class NavControllerBase extends Ion implements NavController {
}
ti.resolve = (hasCompleted: boolean, isAsync: boolean, enteringName: string, leavingName: string, direction: string) => {
this.setTransitioning(false);
// transition has successfully resolved
this._trnsId = null;
resolve && resolve(hasCompleted, isAsync, enteringName, leavingName, direction);
this._sbCheck();
// let's see if there's another to kick off
this.setTransitioning(false);
this._nextTrns();
};
ti.reject = (rejectReason: any, trns: Transition) => {
this.setTransitioning(false);
// rut row raggy, something rejected this transition
this._trnsId = null;
this._queue.length = 0;
@ -209,6 +206,7 @@ export class NavControllerBase extends Ion implements NavController {
reject && reject(false, false, rejectReason);
this.setTransitioning(false);
this._nextTrns();
};
@ -248,6 +246,8 @@ export class NavControllerBase extends Ion implements NavController {
if (!ti) {
return false;
}
// set that this nav is actively transitioning
this.setTransitioning(true);
// Get entering and leaving views
const leavingView = this.getActive();
@ -325,7 +325,6 @@ export class NavControllerBase extends Ion implements NavController {
_postViewInit(enteringView: ViewController, leavingView: ViewController, ti: TransitionInstruction, resolve: TransitionResolveFn) {
const opts = ti.opts || {};
const insertViews = ti.insertViews;
const removeStart = ti.removeStart;
@ -822,8 +821,8 @@ export class NavControllerBase extends Ion implements NavController {
swipeBackProgress(stepValue: number) {
if (this._sbTrns && this._sbGesture) {
// continue to disable the app while actively dragging
this._app.setEnabled(false, ACTIVE_TRANSITION_MAX_TIME);
this.setTransitioning(true, ACTIVE_TRANSITION_MAX_TIME);
this._app.setEnabled(false, ACTIVE_TRANSITION_DEFAULT);
this.setTransitioning(true);
// set the transition animation's progress
this._sbTrns.progressStep(stepValue);
@ -890,7 +889,7 @@ export class NavControllerBase extends Ion implements NavController {
return (this._trnsTm > Date.now());
}
setTransitioning(isTransitioning: boolean, durationPadding: number = 2000) {
setTransitioning(isTransitioning: boolean, durationPadding: number = ACTIVE_TRANSITION_DEFAULT) {
this._trnsTm = (isTransitioning ? (Date.now() + durationPadding + ACTIVE_TRANSITION_OFFSET) : 0);
}
@ -962,5 +961,5 @@ export class NavControllerBase extends Ion implements NavController {
let ctrlIds = -1;
const DISABLE_APP_MINIMUM_DURATION = 64;
const ACTIVE_TRANSITION_MAX_TIME = 5000;
const ACTIVE_TRANSITION_DEFAULT = 5000;
const ACTIVE_TRANSITION_OFFSET = 2000;

View File

@ -6,6 +6,7 @@ import { Navbar } from '../components/navbar/navbar';
import { NavControllerBase } from './nav-controller-base';
import { NavOptions, ViewState } from './nav-util';
import { NavParams } from './nav-params';
import { Content } from '../components/content/content';
/**
@ -28,6 +29,8 @@ import { NavParams } from './nav-params';
export class ViewController {
private _cntDir: any;
private _cntRef: ElementRef;
private _ionCntDir: Content;
private _ionCntRef: ElementRef;
private _hdrDir: Header;
private _ftrDir: Footer;
private _isHidden: boolean = false;
@ -308,7 +311,7 @@ export class ViewController {
/**
* @returns {component} Returns the Page's Content component reference.
*/
getContent() {
getContent(): any {
return this._cntDir;
}
@ -326,6 +329,36 @@ export class ViewController {
return this._cntRef;
}
/**
* @private
*/
_setIONContent(content: Content) {
this._setContent(content);
this._ionCntDir = content;
}
/**
* @private
*/
getIONContent(): Content {
return this._ionCntDir;
}
/**
* @private
*/
_setIONContentRef(elementRef: ElementRef) {
this._setContentRef(elementRef);
this._ionCntRef = elementRef;
}
/**
* @private
*/
getIONContentRef(): ElementRef {
return this._ionCntRef;
}
/**
* @private
*/

View File

@ -24,8 +24,8 @@ export class PageTransition extends Transition {
* DOM READ
*/
readDimensions() {
const content = <Content>this.enteringView.getContent();
if (content && content instanceof Content) {
const content = <Content>this.enteringView.getIONContent();
if (content) {
content.readDimensions();
}
}
@ -34,8 +34,8 @@ export class PageTransition extends Transition {
* DOM WRITE
*/
writeDimensions() {
const content = <Content>this.enteringView.getContent();
if (content && content instanceof Content) {
const content = <Content>this.enteringView.getIONContent();
if (content) {
content.writeDimensions();
}
}