chore(nav): create nav-interfaces file

src/components.ts

@@ -30,7 +30,7 @@ export { Modal, ModalController } from './components/modal/modal';
 export { ModalOptions } from './components/modal/modal-options';
 export { Nav } from './components/nav/nav';
 export { NavController } from './components/nav/nav-controller';
-export { NavOptions } from './components/nav/nav-options';
+export { NavOptions } from './components/nav/nav-interfaces';
 export { NavParams } from './components/nav/nav-params';
 export { NavPop } from './components/nav/nav-pop';
 export { NavPush } from './components/nav/nav-push';

src/components/action-sheet/action-sheet.ts

@@ -4,7 +4,7 @@ import { ActionSheetCmp } from './action-sheet-component';
 import { ActionSheetOptions } from './action-sheet-options';
 import { App } from '../app/app';
 import { isPresent } from '../../util/util';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { ViewController } from '../nav/view-controller';
 
 /**

src/components/alert/alert.ts

@@ -4,7 +4,7 @@ import { App } from '../app/app';
 import { AlertCmp } from './alert-component';
 import { AlertOptions, AlertInputOptions } from './alert-options';
 import { isPresent } from '../../util/util';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { ViewController } from '../nav/view-controller';
 
 

src/components/app/app.ts

@@ -4,7 +4,7 @@ import { Title } from '@angular/platform-browser';
 import { ClickBlock } from '../../util/click-block';
 import { Config } from '../../config/config';
 import { NavController } from '../nav/nav-controller';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { NavPortal } from '../nav/nav-portal';
 import { Platform } from '../../platform/platform';
 

src/components/loading/loading.ts

@@ -5,7 +5,7 @@ import { Config } from '../../config/config';
 import { isPresent } from '../../util/util';
 import { LoadingCmp } from './loading-component';
 import { LoadingOptions } from './loading-options';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { ViewController} from '../nav/view-controller';
 
 /**

src/components/modal/modal.ts

@@ -4,7 +4,7 @@ import { App } from '../app/app';
 import { isPresent } from '../../util/util';
 import { ModalCmp } from './modal-component';
 import { ModalOptions } from './modal-options';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { ViewController } from '../nav/view-controller';
 
 

src/components/nav/nav-controller.ts

@@ -7,8 +7,8 @@ import { Ion } from '../ion';
 import { isBlank, pascalCaseToDashCase } from '../../util/util';
 import { Keyboard } from '../../util/keyboard';
 import { MenuController } from '../menu/menu-controller';
+import { NavOptions } from './nav-interfaces';
 import { NavParams } from './nav-params';
-import { NavOptions } from './nav-options';
 import { SwipeBackGesture } from './swipe-back';
 import { Transition } from '../../transitions/transition';
 import { ViewController } from './view-controller';
@@ -218,11 +218,6 @@ export class NavController extends Ion {
    */
   id: string;
 
-  /**
-   * @private
-   */
-  routers: any[] = [];
-
   /**
    * @private
    */
@@ -241,7 +236,7 @@ export class NavController extends Ion {
   /**
    * @private
    */
-  _trnsTime: number = 0;
+  trnsTime: number = 0;
 
   constructor(
     parent: any,
@@ -325,7 +320,7 @@ export class NavController extends Ion {
     }
 
     // set the nav direction to "back" if it wasn't set
-    opts.direction = opts.direction || 'back';
+    opts.direction = opts.direction || DIRECTION_BACK;
 
     let resolve: any;
     let promise = new Promise(res => { resolve = res; });
@@ -493,7 +488,7 @@ export class NavController extends Ion {
       view.state = STATE_INACTIVE;
 
       // give this inserted view an ID
-      this._incId(view);
+      view.id = this.id + '-' + (++this._ids);
 
       // insert the entering view into the correct index in the stack
       this._views.splice(insertIndex + i, 0, view);
@@ -584,7 +579,7 @@ export class NavController extends Ion {
     }
 
     // default the direction to "back"
-    opts.direction = opts.direction || 'back';
+    opts.direction = opts.direction || DIRECTION_BACK;
 
     // figure out the states of each view in the stack
     let leavingView = this._remove(startIndex, removeCount);
@@ -989,6 +984,7 @@ export class NavController extends Ion {
         // so just update the local transitioning information
         let duration = parentTransitionEndTime - Date.now();
         this.setTransitioning(true, duration);
+
       } else {
         // this is the only active transition (for now), so disable the app
         let keyboardDurationPadding = 0;
@@ -1151,16 +1147,9 @@ export class NavController extends Ion {
         this._app && this._app.setEnabled(true);
       }
 
+      // update that this nav is not longer actively transitioning
       this.setTransitioning(false);
 
-      if (direction !== null && hasCompleted && !this.isPortal) {
-        // notify router of the state change if a direction was provided
-        // multiple routers can exist and each should be notified
-        this.routers.forEach(router => {
-          router.stateChange(direction, enteringView);
-        });
-      }
-
       // see if we should add the swipe back gesture listeners or not
       this._sbCheck();
 
@@ -1332,7 +1321,7 @@ export class NavController extends Ion {
   swipeBackStart() {
     // default the direction to "back"
     let opts: NavOptions = {
-      direction: 'back',
+      direction: DIRECTION_BACK,
       progressAnimation: true
     };
 
@@ -1440,15 +1429,19 @@ export class NavController extends Ion {
    * Returns if the nav controller is actively transitioning or not.
    * @return {boolean}
    */
-  isTransitioning(): boolean {
-    return (this._trnsTime > Date.now());
+  isTransitioning(includeAncestors?: boolean): boolean {
+    let now = Date.now();
+    if (includeAncestors && this._getLongestTrans(now) > 0) {
+      return true;
+    }
+    return (this.trnsTime > now);
   }
 
   /**
    * @private
    */
   setTransitioning(isTransitioning: boolean, fallback: number = 700) {
-    this._trnsTime = (isTransitioning ? Date.now() + fallback : 0);
+    this.trnsTime = (isTransitioning ? Date.now() + fallback : 0);
   }
 
   /**
@@ -1459,13 +1452,13 @@ export class NavController extends Ion {
    * thus giving us the longest transition duration
    */
    private _getLongestTrans(now: number) {
-     let parentNav: NavController = <NavController> this.parent;
-     let transitionEndTime: number = -1;
+     let parentNav = <NavController>this.parent;
+     let transitionEndTime = -1;
      while (parentNav) {
-       if (parentNav._trnsTime > transitionEndTime) {
-         transitionEndTime = parentNav._trnsTime;
+       if (parentNav.trnsTime > transitionEndTime) {
+         transitionEndTime = parentNav.trnsTime;
        }
-       parentNav = <NavController> parentNav.parent;
+       parentNav = parentNav.parent;
      }
      // only check if the transitionTime is greater than the current time once
      return transitionEndTime > 0 && transitionEndTime > now ? transitionEndTime : 0;
@@ -1591,20 +1584,6 @@ export class NavController extends Ion {
     });
   }
 
-  /**
-   * @private
-   */
-  registerRouter(router: any) {
-    this.routers.push(router);
-  }
-
-  /**
-   * @private
-   */
-  private _incId(view: ViewController) {
-    view.id = this.id + '-' + (++this._ids);
-  }
-
   /**
    * @private
    */
@@ -1626,7 +1605,7 @@ export class NavController extends Ion {
           enteringView.setZIndex(this.isPortal ? PORTAL_ZINDEX : INIT_ZINDEX, this._renderer);
         }
 
-      } else if (direction === 'back') {
+      } else if (direction === DIRECTION_BACK) {
         // moving back
         enteringView.setZIndex(leavingView.zIndex - 1, this._renderer);
 
@@ -1650,7 +1629,10 @@ const STATE_REMOVE_AFTER_TRANS = 8;
 const STATE_CANCEL_ENTER = 9;
 const STATE_FORCE_ACTIVE = 10;
 
+export const DIRECTION_BACK = 'back';
+export const DIRECTION_FORWARD = 'forward';
+
 const INIT_ZINDEX = 100;
 const PORTAL_ZINDEX = 9999;
 
-let ctrlIds = -1;
+let ctrlIds = -1;

src/components/nav/nav-interfaces.ts

@@ -5,6 +5,7 @@ export interface NavOptions {
   direction?: string;
   duration?: number;
   easing?: string;
+  id?: string;
   keyboardClose?: boolean;
   preload?: boolean;
   transitionDelay?: number;

src/components/nav/nav-pop.ts

@@ -1,7 +1,7 @@
 import { Directive, Optional } from '@angular/core';
-
 import { NavController } from './nav-controller';
 
+
 /**
  * @name NavPop
  * @description
@@ -10,10 +10,11 @@ import { NavController } from './nav-controller';
  * @usage
  * ```html
  * <ion-content>
- *  <div block button nav-pop>go back</div>
+ *
+ *  <button navPop>Go Back</button>
+ *
  * </ion-content>
  * ```
- * This will go back one page in the navigation stack
  *
  * Similar to {@link /docs/v2/api/components/nav/NavPush/ `NavPush` }
  * @demo /docs/v2/demos/navigation/
@@ -34,6 +35,7 @@ export class NavPop {
       console.error('nav-pop must be within a NavController');
     }
   }
+
   /**
    * @private
    */

src/components/nav/test/nav-controller.spec.ts

@@ -1556,7 +1556,7 @@ export function run() {
       it('should return 0 when transition end time is less than now', () => {
         // arrange
         nav.parent = {
-          _trnsTime: Date.now() - 5
+          trnsTime: Date.now() - 5
         };
         // act
         let returnedValue = nav._getLongestTrans(Date.now());
@@ -1567,7 +1567,7 @@ export function run() {
       it('should return 0 when parent transition time not set', () => {
         // arrange
         nav.parent = {
-          _trnsTime: undefined
+          trnsTime: undefined
         };
         // act
         let returnedValue = nav._getLongestTrans(Date.now());
@@ -1579,7 +1579,7 @@ export function run() {
         // arrange
         let expectedReturnValue = Date.now() + 100;
         nav.parent = {
-          _trnsTime: expectedReturnValue
+          trnsTime: expectedReturnValue
         };
         // act
         let returnedValue = nav._getLongestTrans(Date.now());
@@ -1591,16 +1591,16 @@ export function run() {
         // arrange
         let expectedReturnValue = Date.now() + 100;
         let firstParent = {
-          _trnsTime: expectedReturnValue
+          trnsTime: expectedReturnValue
         };
         let secondParent = {
-          _trnsTime: Date.now() + 50
+          trnsTime: Date.now() + 50
         };
         let thirdParent = {
-          _trnsTime: Date.now()
+          trnsTime: Date.now()
         };
         let fourthParent = {
-          _trnsTime: Date.now() + 20
+          trnsTime: Date.now() + 20
         };
         firstParent.parent = secondParent;
         secondParent.parent = thirdParent;
@@ -1616,16 +1616,16 @@ export function run() {
         // arrange
         let expectedReturnValue = Date.now() + 100;
         let firstParent = {
-          _trnsTime: Date.now()
+          trnsTime: Date.now()
         };
         let secondParent = {
-          _trnsTime: Date.now() + 50
+          trnsTime: Date.now() + 50
         };
         let thirdParent = {
-          _trnsTime: expectedReturnValue
+          trnsTime: expectedReturnValue
         };
         let fourthParent = {
-          _trnsTime: Date.now() + 20
+          trnsTime: Date.now() + 20
         };
         firstParent.parent = secondParent;
         secondParent.parent = thirdParent;
@@ -1641,16 +1641,16 @@ export function run() {
         // arrange
         let expectedReturnValue = Date.now() + 100;
         let firstParent = {
-          _trnsTime: Date.now()
+          trnsTime: Date.now()
         };
         let secondParent = {
-          _trnsTime: Date.now() + 50
+          trnsTime: Date.now() + 50
         };
         let thirdParent = {
-          _trnsTime: Date.now() + 20
+          trnsTime: Date.now() + 20
         };
         let fourthParent = {
-          _trnsTime: expectedReturnValue
+          trnsTime: expectedReturnValue
         };
         firstParent.parent = secondParent;
         secondParent.parent = thirdParent;

src/components/nav/view-controller.ts

@@ -4,7 +4,7 @@ import { Footer, Header } from '../toolbar/toolbar';
 import { isPresent, merge } from '../../util/util';
 import { Navbar } from '../navbar/navbar';
 import { NavController } from './nav-controller';
-import { NavOptions } from './nav-options';
+import { NavOptions } from './nav-interfaces';
 import { NavParams } from './nav-params';
 
 

src/components/picker/picker.ts

@@ -2,7 +2,7 @@ import { EventEmitter, Injectable, Output } from '@angular/core';
 
 import { App } from '../app/app';
 import { isPresent } from '../../util/util';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { PickerCmp } from './picker-component';
 import { PickerOptions, PickerColumn } from './picker-options';
 import { ViewController } from '../nav/view-controller';

src/components/popover/popover.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { App } from '../app/app';
 import { isPresent } from '../../util/util';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { PopoverCmp } from './popover-component';
 import { PopoverOptions } from './popover-options';
 import { ViewController } from '../nav/view-controller';

src/components/tabs/tab-button.ts

@@ -11,7 +11,7 @@ import { Tab } from './tab';
   selector: '.tab-button',
   host: {
     '[attr.id]': 'tab._btnId',
-    '[attr.aria-controls]': 'tab._panelId',
+    '[attr.aria-controls]': 'tab._tabId',
     '[attr.aria-selected]': 'tab.isSelected',
     '[class.has-title]': 'hasTitle',
     '[class.has-icon]': 'hasIcon',

src/components/tabs/tab.ts

@@ -5,8 +5,8 @@ import { Config } from '../../config/config';
 import { isTrueProperty} from '../../util/util';
 import { Keyboard} from '../../util/keyboard';
 import { MenuController } from '../menu/menu-controller';
-import { NavController} from '../nav/nav-controller';
-import { NavOptions} from '../nav/nav-options';
+import { NavController } from '../nav/nav-controller';
+import { NavOptions} from '../nav/nav-interfaces';
 import { TabButton} from './tab-button';
 import { Tabs} from './tabs';
 import { ViewController} from '../nav/view-controller';
@@ -121,7 +121,7 @@ import { ViewController} from '../nav/view-controller';
   selector: 'ion-tab',
   host: {
     '[class.show-tab]': 'isSelected',
-    '[attr.id]': '_panelId',
+    '[attr.id]': '_tabId',
     '[attr.aria-labelledby]': '_btnId',
     'role': 'tabpanel'
   },
@@ -132,7 +132,7 @@ export class Tab extends NavController {
   private _isInitial: boolean;
   private _isEnabled: boolean = true;
   private _isShown: boolean = true;
-  private _panelId: string;
+  private _tabId: string;
   private _btnId: string;
   private _loaded: boolean;
   private _loadTmr: any;
@@ -240,7 +240,7 @@ export class Tab extends NavController {
       this._sbEnabled = parent.rootNav.isSwipeBackEnabled();
     }
 
-    this._panelId = 'tabpanel-' + this.id;
+    this._tabId = 'tabpanel-' + this.id;
     this._btnId = 'tab-' + this.id;
   }
 

src/components/tabs/tabs.ts

@@ -9,7 +9,7 @@ import { Icon } from '../icon/icon';
 import { Ion } from '../ion';
 import { isBlank, isTrueProperty } from '../../util/util';
 import { nativeRaf } from '../../util/dom';
-import { NavController } from '../nav/nav-controller';
+import { NavController, DIRECTION_FORWARD } from '../nav/nav-controller';
 import { Platform } from '../../platform/platform';
 import { Tab } from './tab';
 import { TabButton } from './tab-button';
@@ -234,7 +234,7 @@ export class Tabs extends Ion {
 
   constructor(
     @Optional() parent: NavController,
-    @Optional() viewCtrl: ViewController,
+    @Optional() public viewCtrl: ViewController,
     private _app: App,
     private _config: Config,
     private _elementRef: ElementRef,
@@ -326,6 +326,14 @@ export class Tabs extends Ion {
       });
     }
 
+    this.initTabs();
+  }
+
+  /**
+   * @private
+   */
+  initTabs() {
+    // first check if preloadTab is set as an input @Input, then check the config
     let preloadTabs = (isBlank(this.preloadTabs) ? this._config.getBoolean('preloadTabs') : isTrueProperty(this.preloadTabs));
 
     // get the selected index
@@ -397,7 +405,7 @@ export class Tabs extends Ion {
       return this._touchActive(selectedTab);
     }
 
-    console.debug('Tabs, select', selectedTab.id);
+    console.debug(`Tabs, select: ${selectedTab.id}`);
 
     let opts = {
       animate: false
@@ -413,7 +421,6 @@ export class Tabs extends Ion {
     selectedPage && selectedPage.fireWillEnter();
 
     selectedTab.load(opts, (initialLoad: boolean) => {
-
       selectedTab.ionSelect.emit(selectedTab);
       this.ionChange.emit(selectedTab);
 

src/components/toast/toast.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { App } from '../app/app';
 import { isPresent } from '../../util/util';
-import { NavOptions } from '../nav/nav-options';
+import { NavOptions } from '../nav/nav-interfaces';
 import { ToastOptions } from './toast-options';
 import { ToastCmp } from './toast-component';
 import { ViewController } from '../nav/view-controller';