Passthrough lifecycle (depends on PR#352)

src/components/super-tabs-container.ts

@@ -58,6 +58,20 @@ export class SuperTabsContainer implements AfterViewInit, OnDestroy {
   @Output()
   onDrag: EventEmitter<TouchEvent> = new EventEmitter<TouchEvent>();
 
+  /**
+   * Notifies when the container has started being dragged
+   * @type {EventEmitter<TouchEvent>}
+   */
+  @Output()
+  onDragStart: EventEmitter<void> = new EventEmitter<void>();
+
+  /**
+   * Notifies when the container has stopped being dragged
+   * @type {EventEmitter<void>}
+   */
+  @Output()
+  onDragEnd: EventEmitter<void> = new EventEmitter<void>();
+
   // 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();
     };
   }
 

src/components/super-tabs.ts

@@ -84,7 +84,7 @@ export interface SuperTabsConfig {
                         [selectedTab]="selectedTabIndex"
                         (tabSelect)="onToolbarTabSelect($event)"></super-tabs-toolbar>
     <super-tabs-container [config]="config" [tabsCount]="_tabs.length" [selectedTabIndex]="selectedTabIndex"
-                          (tabSelect)="onContainerTabSelect($event)" (onDrag)="onDrag()">
+                          (tabSelect)="onContainerTabSelect($event)" (onDrag)="onDrag()" (onDragStart)="tabDragStart.emit()" (onDragEnd)="tabDragEnd.emit()">
       <ng-content></ng-content>
     </super-tabs-container>
   `,
@@ -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<void> = new EventEmitter<void>();
+
+  /**
+   * Emits event when tab dragging is stopped (when a user lets go)
+   */
+  @Output()
+  tabDragEnd: EventEmitter<void> = new EventEmitter<void>();
+
   /**
    * Emits the tab index when the selected tab changes
    * @type {EventEmitter<Object>}
@@ -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);
   }

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;
       }