diff --git a/src/components/super-tabs-container.ts b/src/components/super-tabs-container.ts index f8e1025..9452e3d 100644 --- a/src/components/super-tabs-container.ts +++ b/src/components/super-tabs-container.ts @@ -58,6 +58,20 @@ export class SuperTabsContainer implements AfterViewInit, OnDestroy { @Output() onDrag: EventEmitter = new EventEmitter(); + /** + * Notifies when the container has started being dragged + * @type {EventEmitter} + */ + @Output() + onDragStart: EventEmitter = new EventEmitter(); + + /** + * Notifies when the container has stopped being dragged + * @type {EventEmitter} + */ + @Output() + onDragEnd: EventEmitter = new EventEmitter(); + // View bindings /** @@ -163,6 +177,10 @@ export class SuperTabsContainer implements AfterViewInit, OnDestroy { this.gesture = new SuperTabsPanGesture(this.plt, this.config, this.container.nativeElement, this.rnd); + this.gesture.onStart = ()=>{ + this.onDragStart.emit(); + } + this.gesture.onMove = (delta: number) => { if (this.globalSwipeEnabled === false) return; if (this.swipeEnabledPerTab[this.selectedTabIndex] === false) return; @@ -200,6 +218,7 @@ export class SuperTabsContainer implements AfterViewInit, OnDestroy { ); } else this.setSelectedTab(tabIndex); + this.onDragEnd.emit(); }; } diff --git a/src/components/super-tabs.ts b/src/components/super-tabs.ts index 3881433..e2942b6 100644 --- a/src/components/super-tabs.ts +++ b/src/components/super-tabs.ts @@ -84,7 +84,7 @@ export interface SuperTabsConfig { [selectedTab]="selectedTabIndex" (tabSelect)="onToolbarTabSelect($event)"> + (tabSelect)="onContainerTabSelect($event)" (onDrag)="onDrag()" (onDragStart)="tabDragStart.emit()" (onDragEnd)="tabDragEnd.emit()"> `, @@ -136,6 +136,12 @@ export class SuperTabsComponent @Input() name: string; + + /** + * Allow Ionic NavController lifecycle events to pass through to child tabs + */ + @Input() passthroughLifecycle: boolean; + /** * Height of the tabs */ @@ -181,6 +187,18 @@ export class SuperTabsComponent */ @Input() tabsPlacement = 'top'; + /** + * Emits event when tab dragging is activated + */ + @Output() + tabDragStart: EventEmitter = new EventEmitter(); + + /** + * Emits event when tab dragging is stopped (when a user lets go) + */ + @Output() + tabDragEnd: EventEmitter = new EventEmitter(); + /** * Emits the tab index when the selected tab changes * @type {EventEmitter} @@ -281,6 +299,7 @@ export class SuperTabsComponent if (viewCtrl) { obsToMerge.push(viewCtrl.didEnter); + // This causes lifecycle events to be passed through to the active tab } // re-adjust the height of the slider when the orientation changes @@ -327,6 +346,21 @@ export class SuperTabsComponent 'tabs-placement-bottom' ); } + + if(this.passthroughLifecycle && this.viewCtrl) { + this.viewCtrl.willEnter.subscribe(() => { + this.fireLifecycleEvent(['willEnter']); + }); + this.viewCtrl.didEnter.subscribe(() => { + this.fireLifecycleEvent(['didEnter']); + }); + this.viewCtrl.willLeave.subscribe(() => { + this.fireLifecycleEvent(['willLeave']); + }); + this.viewCtrl.didLeave.subscribe(() => { + this.fireLifecycleEvent(['didLeave']); + }); + } } ngAfterContentInit() { @@ -596,22 +630,24 @@ export class SuperTabsComponent private fireLifecycleEvent(events: string[]) { const activeView = this.getActiveTab().getActive(); - events.forEach((event: string) => { - switch (event) { - case 'willEnter': - activeView._willEnter(); - break; - case 'didEnter': - activeView._didEnter(); - break; - case 'willLeave': - activeView._willLeave(false); - break; - case 'didLeave': - activeView._didLeave(); - break; - } - }); + if (activeView) { + events.forEach((event: string) => { + switch (event) { + case 'willEnter': + activeView._willEnter(); + break; + case 'didEnter': + activeView._didEnter(); + break; + case 'willLeave': + activeView._willLeave(false); + break; + case 'didLeave': + activeView._didLeave(); + break; + } + }); + } } private refreshTabStates() { @@ -755,6 +791,14 @@ export class SuperTabsComponent } } + private tabDragStarted() { + this.tabDragStart.emit(); + } + + private tabDragStopped() { + this.tabDragEnd.emit(); + } + getTabIndexById(tabId: string): number { return this._tabs.findIndex((tab: SuperTabComponent) => tab.tabId === tabId); } diff --git a/src/super-tabs-pan-gesture.ts b/src/super-tabs-pan-gesture.ts index 36d62b0..7c6f6a0 100644 --- a/src/super-tabs-pan-gesture.ts +++ b/src/super-tabs-pan-gesture.ts @@ -5,6 +5,8 @@ import { pointerCoord, PointerCoordinates } from 'ionic-angular/util/dom'; import { SuperTabsConfig } from './components/super-tabs'; export class SuperTabsPanGesture { + onStart: () => void; + onMove: (delta: number) => void; onEnd: (shortSwipe: boolean, shortSwipeDelta?: number) => void; @@ -98,6 +100,9 @@ export class SuperTabsPanGesture { if (this.shouldCapture === true) { // gesture is good, let's capture all next onTouchMove events this.isDragging = true; + + // emit value + this.onStart && this.onStart(); } else { return; }