import {Component, ComponentRef, Compiler, ElementRef, Injector, bind, NgZone} from 'angular2/angular2'; import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader'; import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector'; import {AppViewManager} from 'angular2/src/core/compiler/view_manager'; import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; import {IonicApp} from '../app/app'; import {ViewController} from './view-controller'; import {Transition} from '../../transitions/transition'; import {SwipeBackGesture} from './swipe-back'; import * as util from 'ionic/util'; /** * NavController is the base class for navigation controller components like * [`Nav`](../Nav/) and [`Tab`](../../Tabs/Tab/). At a basic level, it is an array of * [views](#creating_views) representing a particular history (of a Tab for example). * This array can be manipulated to navigate throughout an app by pushing and * popping views or inserting and removing them at arbitrary indices. * * The current view is the last one in the array, or the top of the stack, if we think of it * that way. Pushing a new [view](#creating_views) onto the top of * the navigation stack causes the new view to be animated in, while popping the current * view will navigate to the previous view in the stack. * * For examples on the basic usage of NavController, check out the [Navigation section](../../../../components/#navigation) * of the Component docs. The following is a more in depth explanation of some * of the features of NavController. * * Unless you are using a directive like [NavPush](../NavPush/), or need a * specific NavController, most times you will inject and use a reference to the * nearest NavController to manipulate the navigation stack. * *

Injecting NavController

* Injecting NavController will always get you an instance of the nearest NavController, * regardless of whether it's a Tab or a Nav. * * Behind the scenes, when Ionic instantiates a new NavController, it creates an * injector with NavController bound to that instance (usually either a Nav or Tab) * and adds the injector to its own bindings. For more information on binding * and dependency injection, see [Binding and DI](). * * ```ts * // class NavController * //"this" is either Nav or Tab, both extend NavController * this.bindings = Injector.resolve([ * bind(NavController).toValue(this) * ]); * ``` * * That way you don't need to worry about getting a hold of the proper NavController * for [views](#creating_views) that may be used in either a Tab or a Nav: * * ```ts * class MyPage { * constructor(@Optional() tab: Tab, @Optional() nav: Nav) { * // Unhhhhh so much typinggggg * // What if we are in a nav that is in a tab, or vice versa, so these both resolve? * } * } * ``` * * Instead, you can inject NavController and know that it is the correct * navigation controller for most situations (for more advanced situations, see * [Menu](../../Menu/Menu/) and [Tab](../../Tab/Tab/)). * * ```ts * class MyComponent { * constructor(nav: NavController) { * this.nav = nav; * } * } * ``` * *

View creation

* Views are created when they are added to the navigation stack. For methods * like [push()](#push), the NavController takes any component class that is * decorated with [@IonicView](../../../config/IonicView/) as its first * argument. The NavController then [compiles]() that component, loads it in * a similar fashion to Angular's [DynamicComponentLoader](https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-interface.html), * and animates it into view. * * By default, views are cached and left in the DOM if they are navigated away from, but are * still in the navigation stack (on a `push()` for example). They are * destroyed when removed from the navigation stack (on [pop()](#pop) or [setRoot()](#setRoot)). * * *

Lifecycle events

* Lifecycle events are fired during various stages of navigation. They can be * defined in any `@IonicView` decorated component class. * * ```ts * @IonicView({ * template: 'Hello World' * }) * class HelloWorld { * onViewLoaded() { * console.log("I'm alive!"); * } * } * ``` * * - `onViewLoaded` - Runs when the view has loaded. This event only happens once per view being created and added to the DOM. If a view leaves but is cached, then this event will not fire again on a subsequent viewing. The `onViewLoaded` event is good place to put your setup code for the view. * - `onViewWillEnter` - Runs when the view is about to enter and become the active view. * - `onViewDidEnter` - Runs when the view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view. * - `onViewWillLeave` - Runs when the view is about to leave and no longer be the active view. * - `onViewDidLeave` - Runs when the view has finished leaving and is no longer the active view. * - `onViewWillUnload` - Runs when the view is about to be destroyed and have its elements removed. * - `onViewDidUnload` - Runs after the view has been destroyed and its elements have been removed. * */ export class NavController extends Ion { constructor( parentnavCtrl: NavController, injector: Injector, elementRef: ElementRef, zone: NgZone ) { let config = injector.get(IonicConfig); super(elementRef, config); this.parent = parentnavCtrl; this.compiler = injector.get(Compiler); this.loader = injector.get(DynamicComponentLoader); this.viewMngr = injector.get(AppViewManager); this.app = injector.get(IonicApp); this.config = config; this.zone = zone; this.views = []; this._sbTrans = null; this._sbEnabled = config.get('swipeBackEnabled') || false; this._sbThreshold = config.get('swipeBackThreshold') || 40; this.id = ++ctrlIds; this._ids = -1; // build a new injector for child ViewControllers to use this.bindings = Injector.resolve([ bind(NavController).toValue(this) ]); } /** * TODO * @param {TODO} componentType TODO * @param {TODO} [params={}] TODO * @param {TODO} [opts={}] TODO * @returns {Promise} TODO */ push(componentType, params = {}, opts = {}) { if (!componentType) { return Promise.reject(); } if (typeof componentType !== 'function') { throw 'Loading component must be a component class, not "' + componentType.toString() + '"'; } let resolve; let promise = new Promise(res => { resolve = res; }); // do not animate if this is the first in the stack if (!this.views.length) { opts.animate = false; } // default the direction to "forward" opts.direction = opts.direction || 'forward'; // the active view is going to be the leaving one (if one exists) let leavingView = this.getActive() || new ViewController(); leavingView.shouldCache = (util.isBoolean(opts.cacheleavingView) ? opts.cacheleavingView : true); leavingView.shouldDestroy = !leavingView.shouldCache; if (leavingView.shouldDestroy) { leavingView.willUnload(); } // create a new ViewController let enteringView = new ViewController(this, componentType, params); // add the view to the stack this.add(enteringView); if (this.router) { // notify router of the state change this.router.stateChange('push', enteringView, params); } // start the transition this.transition(enteringView, leavingView, opts, () => { resolve(); }); return promise; } /** * TODO * @param {TODO} [opts={}] TODO * @returns {Promise} TODO */ pop(opts = {}) { if (!this.canGoBack()) { return Promise.reject(); } let resolve; let promise = new Promise(res => { resolve = res; }); // default the direction to "back" opts.direction = opts.direction || 'back'; // get the active view and set that it is staged to be leaving // was probably the one popped from the stack let leavingView = this.getActive() || new ViewController(); leavingView.shouldCache = (util.isBoolean(opts.cacheleavingView) ? opts.cacheleavingView : false); leavingView.shouldDestroy = !leavingView.shouldCache; if (leavingView.shouldDestroy) { leavingView.willUnload(); } // the entering view is now the new last view // Note: we might not have an entering view if this is the // only view on the history stack. let enteringView = this.getPrevious(leavingView); if (enteringView) { if (this.router) { // notify router of the state change this.router.stateChange('pop', enteringView); } // start the transition this.transition(enteringView, leavingView, opts, () => { // transition completed, destroy the leaving view resolve(); }); } else { this._transComplete(); resolve(); } return promise; } /** * Pop to a specific view in the history stack * * @param view {Component} to pop to * @param opts {object} pop options */ popTo(view, opts = {}) { // Get the target index of the view to pop to let viewIndex = this.views.indexOf(view); let targetIndex = viewIndex + 1; let resolve; let promise = new Promise(res => { resolve = res; }); // Don't pop to the view if it wasn't found, or the target is beyond the view list if(viewIndex < 0 || targetIndex > this.views.length - 1) { resolve(); return; } opts.direction = opts.direction || 'back'; // get the views to auto remove without having to do a transiton for each // the last view (the currently active one) will do a normal transition out if (this.views.length > 1) { let autoRemoveItems = this.views.slice(targetIndex, this.views.length); for (let i = 0; i < autoRemoveItems.length; i++) { autoRemoveItems[i].shouldDestroy = true; autoRemoveItems[i].shouldCache = false; autoRemoveItems[i].willUnload(); } } let leavingView = this.views[this.views.length - 1]; let enteringView = view; if(this.router) { this.router.stateChange('pop', enteringView); } this.transition(enteringView, leavingView, opts, () => { resolve(); }); return promise; } /** * Pop to the root view. * @param opts extra animation options */ popToRoot(opts = {}) { this.popTo(this.views[0]); } /** * Inserts a view into the nav stack at the specified index. * @param {TODO} componentType TODO * @param {TODO} index TODO * @returns {Promise} TODO */ insert(componentType, index) { if (!componentType || index < 0) { return Promise.reject(); } // push it onto the end if (index >= this.views.length) { return this.push(componentType); } // create new ViewController, but don't render yet let viewCtrl = new ViewController(this, componentType); viewCtrl.state = CACHED_STATE; viewCtrl.shouldDestroy = false; viewCtrl.shouldCache = false; this._incrementId(viewCtrl); this.views.splice(index, 0, viewCtrl); } /** * Set the view stack to reflect the given component classes. * @param {TODO} components TODO * @param {TODO} [opts={}] TODO * @returns {Promise} TODO */ setViews(components, opts = {}) { if (!components || !components.length) { return Promise.resolve(); } // if animate has not been set then default to false opts.animate = opts.animate || false; // ensure leaving views are not cached, and should be destroyed opts.cacheleavingView = false; // get the views to auto remove without having to do a transiton for each // the last view (the currently active one) will do a normal transition out if (this.views.length > 1) { let autoRemoveItems = this.views.slice(0, this.views.length - 1); for (let i = 0; i < autoRemoveItems.length; i++) { autoRemoveItems[i].shouldDestroy = true; autoRemoveItems[i].shouldCache = false; autoRemoveItems[i].willUnload(); } } let componentObj = null; let componentType = null; let viewCtrl = null; // create the ViewControllers that go before the new active ViewController in the stack // but the previous views won't should render yet if (components.length > 1) { let newBeforeItems = components.slice(0, components.length - 1); for (let j = 0; j < newBeforeItems.length; j++) { componentObj = newBeforeItems[j]; if (componentObj) { // could be an object with a componentType property, or it is a componentType componentType = componentObj.componentType || componentObj; viewCtrl = new ViewController(this, componentType, componentObj.params); viewCtrl.state = CACHED_STATE; viewCtrl.shouldDestroy = false; viewCtrl.shouldCache = false; // add the item to the stack this.add(viewCtrl); } } } // get the component that will become the active item // it'll be the last one in the given components array componentObj = components[ components.length - 1 ]; componentType = componentObj.componentType || componentObj; // transition the leaving and entering return this.push(componentType, componentObj.params, opts); } /** * TODO * @param {TODO} componentType TODO * @param {TODO} [params={}] TODO * @param {TODO} [opts={}] TODO * @returns {Promise} TODO */ setRoot(componentType, params = {}, opts = {}) { return this.setViews([{ componentType, params }], opts); } /** * TODO * @param {TODO} enteringView TODO * @param {TODO} leavingView TODO * @param {TODO} opts TODO * @param {Function} callback TODO * @returns {any} TODO */ transition(enteringView, leavingView, opts, callback) { if (!enteringView || enteringView === leavingView) { return callback(); } if (!opts.animation) { opts.animation = this.config.get('viewTransition'); } // wait for the new view to complete setup enteringView.stage(() => { this.zone.runOutsideAngular(() => { enteringView.shouldDestroy = false; enteringView.shouldCache = false; enteringView.willEnter(); leavingView.willLeave(); // set that the new view pushed on the stack is staged to be entering/leaving // staged state is important for the transition to find the correct view enteringView.state = STAGED_ENTERING_STATE; leavingView.state = STAGED_LEAVING_STATE; // init the transition animation let transAnimation = Transition.create(this, opts); if (opts.animate === false) { // force it to not animate the elements, just apply the "to" styles transAnimation.duration(0); } let duration = transAnimation.duration(); if (duration > 64) { // block any clicks during the transition and provide a // fallback to remove the clickblock if something goes wrong this.app.setEnabled(false, duration); this.app.setTransitioning(true, duration); } // start the transition transAnimation.play().then(() => { // transition has completed, update each view's state enteringView.state = ACTIVE_STATE; leavingView.state = CACHED_STATE; // dispose any views that shouldn't stay around transAnimation.dispose(); enteringView.didEnter(); leavingView.didLeave(); // all done! this.zone.run(() => { this._transComplete(); callback(); }); }); }); }); } /** * @private * TODO */ compileView(componentType) { // create a new ion-view annotation let annotation = new Component({ selector: 'ion-view', host: { '[class.pane-view]': '_paneView' } }); let ionViewComponentType = DirectiveBinding.createFromType(componentType, annotation); // create a unique token that works as a cache key ionViewComponentType.token = 'ionView' + componentType.name; // compile the Component return this.compiler.compileInHost(ionViewComponentType); } /** * @private * TODO */ createViewComponetRef(hostProtoViewRef, contentContainerRef, viewCtrlBindings) { let bindings = this.bindings.concat(Injector.resolve(viewCtrlBindings)); // the same guts as DynamicComponentLoader.loadNextToLocation var hostViewRef = contentContainerRef.createHostView(hostProtoViewRef, -1, bindings); var newLocation = this.viewMngr.getHostElement(hostViewRef); var newComponent = this.viewMngr.getComponent(newLocation); var dispose = () => { var index = contentContainerRef.indexOf(hostViewRef); if (index !== -1) { contentContainerRef.remove(index); } }; return new ComponentRef(newLocation, newComponent, dispose); } /** * @private * TODO */ getBindings(viewCtrl) { // create bindings to this ViewController and its NavParams return this.bindings.concat(Injector.resolve([ bind(ViewController).toValue(viewCtrl), bind(NavParams).toValue(viewCtrl.params), ])); } /** * @private * TODO */ swipeBackStart() { if (!this.app.isEnabled() || !this.canSwipeBack()) { return; } // disables the app during the transition this.app.setEnabled(false); this.app.setTransitioning(true); // default the direction to "back" let opts = { direction: 'back' }; // get the active view and set that it is staged to be leaving // was probably the one popped from the stack let leavingView = this.getActive() || new ViewController(); leavingView.shouldDestroy = true; leavingView.shouldCache = false; leavingView.willLeave(); leavingView.willUnload(); // the entering view is now the new last view let enteringView = this.getPrevious(leavingView); enteringView.shouldDestroy = false; enteringView.shouldCache = false; enteringView.willEnter(); // wait for the new view to complete setup enteringView.stage(() => { this.zone.runOutsideAngular(() => { // set that the new view pushed on the stack is staged to be entering/leaving // staged state is important for the transition to find the correct view enteringView.state = STAGED_ENTERING_STATE; leavingView.state = STAGED_LEAVING_STATE; // init the swipe back transition animation this._sbTrans = Transition.create(this, opts); this._sbTrans.easing('linear').progressStart(); }); }); } /** * @private * TODO * @param {TODO} progress TODO */ swipeBackProgress(value) { if (this._sbTrans) { // continue to disable the app while actively dragging this.app.setEnabled(false, 4000); this.app.setTransitioning(true, 4000); // set the transition animation's progress this._sbTrans.progress(value); } } /** * @private * @param {TODO} completeSwipeBack Should the swipe back complete or not. * @param {number} rate How fast it closes */ swipeBackEnd(completeSwipeBack, rate) { if (!this._sbTrans) return; // disables the app during the transition this.app.setEnabled(false); this.app.setTransitioning(true); this._sbTrans.progressEnd(completeSwipeBack, rate).then(() => { this.zone.run(() => { // find the views that were entering and leaving let enteringView = this.getStagedEnteringView(); let leavingView = this.getStagedLeavingView(); if (enteringView && leavingView) { // finish up the animation if (completeSwipeBack) { // swipe back has completed navigating back // update each view's state enteringView.state = ACTIVE_STATE; leavingView.state = CACHED_STATE; enteringView.didEnter(); leavingView.didLeave(); if (this.router) { // notify router of the pop state change this.router.stateChange('pop', enteringView); } } else { // cancelled the swipe back, they didn't end up going back // return views to their original state leavingView.state = ACTIVE_STATE; enteringView.state = CACHED_STATE; leavingView.willEnter(); leavingView.didEnter(); enteringView.didLeave(); leavingView.shouldDestroy = false; enteringView.shouldDestroy = false; } } // empty out and dispose the swipe back transition animation this._sbTrans && this._sbTrans.dispose(); this._sbTrans = null; // all done! this._transComplete(); }); }); } /** * @private * TODO */ _runSwipeBack() { if (this.canSwipeBack()) { // it is possible to swipe back if (this.sbGesture) { // this is already an active gesture, don't create another one return; } let opts = { edge: 'left', threshold: this._sbThreshold }; this.sbGesture = new SwipeBackGesture(this.getNativeElement(), opts, this); console.debug('SwipeBackGesture listen'); this.sbGesture.listen(); } else if (this.sbGesture) { // it is not possible to swipe back and there is an // active sbGesture, so unlisten it console.debug('SwipeBackGesture unlisten'); this.sbGesture.unlisten(); this.sbGesture = null; } } /** * TODO * @param {TODO} val TODO * @returns {TODO} TODO */ isSwipeBackEnabled(val) { if (arguments.length) { this._sbEnabled = !!val; } return this._sbEnabled; } /** * If it's possible to use swipe back or not. If it's not possible * to go back, or swipe back is not enable then this will return false. * If it is possible to go back, and swipe back is enabled, then this * will return true. * @returns {boolean} */ canSwipeBack() { return (this._sbEnabled && this.canGoBack()); } /** * Returns `true` if there's a valid previous view that we can pop back to. * Otherwise returns false. * @returns {boolean} */ canGoBack() { let activeView = this.getActive(); if (activeView) { return activeView.enableBack(); } return false; } /** * @private */ _transComplete() { let destroys = []; this.views.forEach(view => { if (view) { if (view.shouldDestroy) { destroys.push(view); } else if (view.state === CACHED_STATE && view.shouldCache) { view.shouldCache = false; } } }); destroys.forEach(view => { this.remove(view); view.destroy(); }); // allow clicks again, but still set an enable time // meaning nothing with this view controller can happen for XXms this.app.setEnabled(true); this.app.setTransitioning(false); if (this.views.length === 1) { this.elementRef.nativeElement.classList.add('has-views'); } this._runSwipeBack(); } /** * TODO * @returns {TODO} TODO */ getActive() { for (let i = 0, ii = this.views.length; i < ii; i++) { if (this.views[i].state === ACTIVE_STATE) { return this.views[i]; } } return null; } /** * TODO * @param {TODO} instance TODO * @returns {TODO} TODO */ getByInstance(instance) { if (instance) { for (let i = 0, ii = this.views.length; i < ii; i++) { if (this.views[i].instance === instance) { return this.views[i]; } } } return null; } /** * TODO * @param {TODO} index TODO * @returns {TODO} TODO */ getByIndex(index) { if (index < this.views.length && index > -1) { return this.views[index]; } return null; } /** * TODO * @param {TODO} view TODO * @returns {TODO} TODO */ getPrevious(view) { if (view) { return this.views[ this.views.indexOf(view) - 1 ]; } return null; } /** * TODO * @returns {TODO} TODO */ getStagedEnteringView() { for (let i = 0, ii = this.views.length; i < ii; i++) { if (this.views[i].state === STAGED_ENTERING_STATE) { return this.views[i]; } } return null; } /** * TODO * @returns {TODO} TODO */ getStagedLeavingView() { for (let i = 0, ii = this.views.length; i < ii; i++) { if (this.views[i].state === STAGED_LEAVING_STATE) { return this.views[i]; } } return null; } /** * TODO * @param {TODO} nbContainer TODO * @returns {TODO} TODO */ navbarViewContainer(nbContainer) { if (nbContainer) { this._nbContainer = nbContainer; } if (this._nbContainer) { return this._nbContainer; } if (this.parent) { return this.parent.navbarViewContainer(); } } /** * TODO * @returns {TODO} TODO */ anchorElementRef() { if (arguments.length) { this._anchorER = arguments[0]; } return this._anchorER; } /** * TODO * @param {TODO} view TODO * @returns {TODO} TODO */ add(view) { this._incrementId(view); this.views.push(view); } _incrementId(view) { view.id = this.id + '-' + (++this._ids); } /** * TODO * @param {TODO} viewOrIndex TODO * @returns {TODO} TODO */ remove(viewOrIndex) { util.array.remove(this.views, viewOrIndex); } /** * First view in this nav controller's stack. This would * not return an view which is about to be destroyed. * @returns {TODO} TODO */ first() { for (let i = 0, l = this.views.length; i < l; i++) { if (!this.views[i].shouldDestroy) { return this.views[i]; } } return null; } /** * Last view in this nav controller's stack. This would * not return an view which is about to be destroyed. * @returns {TODO} TODO */ last() { for (let i = this.views.length - 1; i >= 0; i--) { if (!this.views[i].shouldDestroy) { return this.views[i]; } } return null; } /** * TODO * @param {TODO} view TODO * @returns {TODO} TODO */ indexOf(view) { return this.views.indexOf(view); } /** * Number of sibling views in the nav controller. This does * not include views which are about to be destroyed. * @returns {TODO} TODO */ length() { let len = 0; for (let i = 0, l = this.views.length; i < l; i++) { if (!this.views[i].shouldDestroy) { len++; } } return len; } /** * TODO * @returns {TODO} TODO */ instances() { let instances = []; for (let view of this.views) { if (view.instance) { instances.push(view.instance); } } return instances; } /** * TODO * @param {TODO} view TODO * @returns {TODO} TODO */ isActive(view) { return (view && view.state === ACTIVE_STATE); } /** * TODO * @param {TODO} view TODO * @returns {TODO} TODO */ isStagedEntering(view) { return (view && view.state === STAGED_ENTERING_STATE); } /** * TODO * @param {TODO} router TODO */ registerRouter(router) { this.router = router; } } const ACTIVE_STATE = 1; const CACHED_STATE = 2; const STAGED_ENTERING_STATE = 3; const STAGED_LEAVING_STATE = 4; let ctrlIds = -1; /** * TODO */ export class NavParams { /** * TODO * @param {TODO} data TODO */ constructor(data) { this.data = data || {}; } /** * TODO * @param {TODO} param TODO */ get(param) { return this.data[param]; } }