feat(): allow elements inside tabs to be dragged/scrolled before tabs swipe event is triggered (#243)

* Allow elements to scroll inside tabs

* Allow elements to scroll inside tabs

* Allow elements to scroll inside tabs

* Allow element scroll

Author: eduardoRoth

README.md

@@ -131,6 +131,7 @@ _(optional)_ Advanced configuration.
 Param | Description | Default
 --- | --- | ---
 `dragThreshold` | The number of pixels that the user must swipe through before the drag event triggers. | `20`
+`allowElementScroll` | Allow elements inside tabs to be dragged before triggering the tab swipe event. | `false`
 `maxDragAngle` | The maximum angle that the user can drag at for the drag event to trigger. | `40`
 `transitionEase` | The transition timing function to use in animations. | `'cubic-bezier(0.35, 0, 0.25, 1)'`
 `transitionDuration` | The duration of animations in milliseconds. | `300`

src/components/super-tabs.ts

@@ -27,6 +27,10 @@ export interface SuperTabsConfig {
    * Defaults to 20
    */
   dragThreshold?: number;
+  /**
+   * Allows elements inside tabs to be dragged, defaults to false
+   */
+  allowElementScroll?: boolean;
   /**
    * Defaults to ease-in-out
    */
@@ -287,6 +291,7 @@ export class SuperTabs implements OnInit, AfterContentInit, AfterViewInit, OnDes
   ngOnInit() {
     const defaultConfig: SuperTabsConfig = {
       dragThreshold: 10,
+      allowElementScroll: false,
       maxDragAngle: 40,
       sideMenuThreshold: 50,
       transitionDuration: 300,
@@ -299,6 +304,12 @@ export class SuperTabs implements OnInit, AfterContentInit, AfterViewInit, OnDes
     }
 
     this.config = defaultConfig;
+    
+    if(this.config.allowElementScroll === true){
+      if(this.config.dragThreshold < 110){
+        this.config.dragThreshold = 110; 
+      }
+    }
 
     this.id = this.id || `super-tabs-${++superTabsIds}`;
     this.superTabsCtrl.registerInstance(this);

src/super-tabs-pan-gesture.ts

@@ -90,8 +90,10 @@ export class SuperTabsPanGesture {
     }
 
     // stop anything else from capturing these events, to make sure the content doesn't slide
-    ev.stopPropagation();
-    ev.preventDefault();
+    if(this.config.allowElementScroll !== true){
+      ev.stopPropagation();
+      ev.preventDefault();
+    }
 
     // get delta X
     const deltaX: number = this.lastPosX - coords.x;