diff --git a/src/components.ts b/src/components.ts index 8526034e73..081c25322d 100644 --- a/src/components.ts +++ b/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'; diff --git a/src/components/action-sheet/action-sheet.ts b/src/components/action-sheet/action-sheet.ts index 41550208e0..24e7254eeb 100644 --- a/src/components/action-sheet/action-sheet.ts +++ b/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'; /** diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index ddc9835ded..be30bba1a6 100644 --- a/src/components/alert/alert.ts +++ b/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'; diff --git a/src/components/app/app.ts b/src/components/app/app.ts index 8ce0ed24ff..a505688982 100644 --- a/src/components/app/app.ts +++ b/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'; diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts index daf1b581e8..71183325cd 100644 --- a/src/components/loading/loading.ts +++ b/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'; /** diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 9f0102eab3..ab0e8d379d 100644 --- a/src/components/modal/modal.ts +++ b/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'; diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts index b2b384e0e8..abe56111dc 100644 --- a/src/components/nav/nav-controller.ts +++ b/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 = this.parent; - let transitionEndTime: number = -1; + let parentNav = this.parent; + let transitionEndTime = -1; while (parentNav) { - if (parentNav._trnsTime > transitionEndTime) { - transitionEndTime = parentNav._trnsTime; + if (parentNav.trnsTime > transitionEndTime) { + transitionEndTime = parentNav.trnsTime; } - parentNav = 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; \ No newline at end of file diff --git a/src/components/nav/nav-options.ts b/src/components/nav/nav-interfaces.ts similarity index 94% rename from src/components/nav/nav-options.ts rename to src/components/nav/nav-interfaces.ts index 076478540c..6337470c28 100644 --- a/src/components/nav/nav-options.ts +++ b/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; diff --git a/src/components/nav/nav-pop.ts b/src/components/nav/nav-pop.ts index e3973288fc..6a3bbed73b 100644 --- a/src/components/nav/nav-pop.ts +++ b/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 * - *
go back
+ * + * + * * * ``` - * 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 */ diff --git a/src/components/nav/test/nav-controller.spec.ts b/src/components/nav/test/nav-controller.spec.ts index c81213f3cf..213a1238e0 100644 --- a/src/components/nav/test/nav-controller.spec.ts +++ b/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; diff --git a/src/components/nav/view-controller.ts b/src/components/nav/view-controller.ts index 43f273d69e..a82e59dbc2 100644 --- a/src/components/nav/view-controller.ts +++ b/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'; diff --git a/src/components/picker/picker.ts b/src/components/picker/picker.ts index 8a65ad0fa7..96d493df75 100644 --- a/src/components/picker/picker.ts +++ b/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'; diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index 50a5be2599..a8683f3319 100644 --- a/src/components/popover/popover.ts +++ b/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'; diff --git a/src/components/tabs/tab-button.ts b/src/components/tabs/tab-button.ts index 66e34ccde1..508e0d25bf 100644 --- a/src/components/tabs/tab-button.ts +++ b/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', diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index fc59358419..a91aeb9166 100644 --- a/src/components/tabs/tab.ts +++ b/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; } diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 37eb2e5500..50b129c124 100644 --- a/src/components/tabs/tabs.ts +++ b/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); diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index 05b525d9b1..0b7ee2dcd5 100644 --- a/src/components/toast/toast.ts +++ b/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';