Support tabDragStart/tabDragStop events

Author: lincolnthree

Diff for: 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();
     };
   }
 

Diff for: 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>
   `,
@@ -181,6 +181,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>}
@@ -755,6 +767,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 for: 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;
@@ -84,6 +86,9 @@ export class SuperTabsPanGesture {
       this.initialTimestamp = Date.now();
     }
     this.lastPosX = coords.x;
+
+    // emit value
+    this.onStart && this.onStart();
   }
 
   private _onMove(ev: TouchEvent) {