mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
nav progress
This commit is contained in:
@ -41,12 +41,14 @@ export class NavBase {
|
|||||||
|
|
||||||
// the active item is going to be the leaving one (if one exists)
|
// the active item is going to be the leaving one (if one exists)
|
||||||
let leavingItem = this.getActive() || {};
|
let leavingItem = this.getActive() || {};
|
||||||
|
leavingItem.shouldDestroy = false;
|
||||||
|
|
||||||
// create a new NavStackItem
|
// create a new NavStackItem
|
||||||
let enteringItem = new NavItem(this, Class, params);
|
let enteringItem = new NavItem(this, Class, params);
|
||||||
|
|
||||||
// set that this item is staged (it's not ready to be animated in yet)
|
// set that this item is staged (it's not ready to be animated in yet)
|
||||||
enteringItem.state = STAGED_STATE;
|
enteringItem.state = STAGED_STATE;
|
||||||
|
enteringItem.shouldDestroy = false;
|
||||||
|
|
||||||
// add the item to the stack
|
// add the item to the stack
|
||||||
this.items.push(enteringItem);
|
this.items.push(enteringItem);
|
||||||
@ -66,20 +68,18 @@ export class NavBase {
|
|||||||
// default the direction to "back"
|
// default the direction to "back"
|
||||||
opts.direction = opts.direction || 'back';
|
opts.direction = opts.direction || 'back';
|
||||||
|
|
||||||
// remove the last item
|
|
||||||
this.items.pop();
|
|
||||||
|
|
||||||
// the entering item is now the new last item
|
|
||||||
let enteringItem = this.last()
|
|
||||||
|
|
||||||
// get the active item and set that it is staged to be leaving
|
// get the active item and set that it is staged to be leaving
|
||||||
// was probably the one popped from the stack
|
// was probably the one popped from the stack
|
||||||
let leavingItem = this.getActive() || {};
|
let leavingItem = this.getActive() || {};
|
||||||
|
leavingItem.shouldDestroy = true;
|
||||||
|
|
||||||
|
// the entering item is now the new last item
|
||||||
|
let enteringItem = this.getPrevious(leavingItem);
|
||||||
|
enteringItem.shouldDestroy = false;
|
||||||
|
|
||||||
// start the transition
|
// start the transition
|
||||||
this.transition(enteringItem, leavingItem, opts).then(() => {
|
this.transition(enteringItem, leavingItem, opts).then(() => {
|
||||||
// transition completed, destroy the leaving item
|
// transition completed, destroy the leaving item
|
||||||
this._destroy(leavingItem);
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -127,6 +127,9 @@ export class NavBase {
|
|||||||
enteringItem.state = ACTIVE_STATE;
|
enteringItem.state = ACTIVE_STATE;
|
||||||
leavingItem.state = CACHED_STATE;
|
leavingItem.state = CACHED_STATE;
|
||||||
|
|
||||||
|
// destroy any items that shouldn't stay around
|
||||||
|
this.cleanup();
|
||||||
|
|
||||||
// allow clicks again
|
// allow clicks again
|
||||||
ClickBlock(false);
|
ClickBlock(false);
|
||||||
|
|
||||||
@ -142,6 +145,18 @@ export class NavBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
cleanup() {
|
||||||
|
for (let i = 0, ii = this.items.length; i < ii; i++) {
|
||||||
|
let item = this.items[i];
|
||||||
|
if (item && item.shouldDestroy) {
|
||||||
|
this.remove(item);
|
||||||
|
i = 0;
|
||||||
|
ii = this.items.length;
|
||||||
|
debugger
|
||||||
|
item.dispose && item.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
getActive() {
|
getActive() {
|
||||||
@ -196,43 +211,9 @@ export class NavBase {
|
|||||||
return this.items.length;
|
return this.items.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
popAll() {
|
|
||||||
while (this.items.length) {
|
|
||||||
const item = this.items.pop()
|
|
||||||
this._destroy(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pop from the current item to the item at the specified index.
|
|
||||||
// Removes every item in the stack between the current and the given index,
|
|
||||||
// then performs a normal pop.
|
|
||||||
popTo(index, opts = {}) {
|
|
||||||
// Abort if we're already here.
|
|
||||||
if (this.items.length <= index + 1) {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Save the current navItem, and remove all the other ones in front of our
|
|
||||||
// target nav item.
|
|
||||||
const current = this.items.pop()
|
|
||||||
while (this.items.length > index + 1) {
|
|
||||||
const item = this.items.pop()
|
|
||||||
this._destroy(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Now put the current navItem back on the stack and run a normal pop animation.
|
|
||||||
this.items.push(current)
|
|
||||||
return this.pop(opts)
|
|
||||||
}
|
|
||||||
|
|
||||||
remove(index) {
|
remove(index) {
|
||||||
const item = this.items[index];
|
const item = this.items[index];
|
||||||
this.items.splice(index, 1);
|
this.items.splice(index, 1);
|
||||||
this._destroy(item);
|
|
||||||
}
|
|
||||||
|
|
||||||
_destroy(navItem) {
|
|
||||||
util.array.remove(this.items, navItem);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getToolbars(pos: String) {
|
getToolbars(pos: String) {
|
||||||
|
@ -12,9 +12,18 @@ export class NavItem {
|
|||||||
this.Class = ComponentClass;
|
this.Class = ComponentClass;
|
||||||
this.params = params;
|
this.params = params;
|
||||||
this.id = util.nextUid();
|
this.id = util.nextUid();
|
||||||
|
this.created = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
|
if (!this.created) {
|
||||||
|
return this.create();
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
let resolve;
|
let resolve;
|
||||||
let promise = new Promise((res) => { resolve = res; });
|
let promise = new Promise((res) => { resolve = res; });
|
||||||
|
|
||||||
@ -26,13 +35,17 @@ export class NavItem {
|
|||||||
.then((componentRef) => {
|
.then((componentRef) => {
|
||||||
|
|
||||||
this.component = componentRef;
|
this.component = componentRef;
|
||||||
|
this.dispose = componentRef._dispose;
|
||||||
|
|
||||||
this.domElement = componentRef.location.domElement;
|
this.domElement = componentRef.location.domElement;
|
||||||
this.domElement.classList.add('nav-item');
|
this.domElement.classList.add('nav-item');
|
||||||
|
this.domElement.setAttribute('data-nav-item-id', this.id);
|
||||||
|
|
||||||
|
this.created = true;
|
||||||
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// let vc = new ViewContainerRef(this.nav.viewManager, this.nav.elementRef);
|
// let vc = new ViewContainerRef(this.nav.viewManager, this.nav.elementRef);
|
||||||
|
|
||||||
// debugger
|
// debugger
|
||||||
|
@ -17,6 +17,6 @@ export class FirstPage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
push() {
|
push() {
|
||||||
this.nav.push(SecondPage);
|
this.nav.push(SecondPage, { animation: 'none' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -20,6 +20,6 @@ export class SecondPage {
|
|||||||
this.nav.pop();
|
this.nav.pop();
|
||||||
}
|
}
|
||||||
push() {
|
push() {
|
||||||
this.nav.push(ThirdPage);
|
this.nav.push(ThirdPage, { animation: 'none' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user