Add avoid-super-tabs attribute

README.md

@@ -24,6 +24,7 @@ To see this in action, checkout the [example project here](https://github.com/zy
   - [`super-tab` Component](#super-tab-component)
   - [`SuperTabsController` Provider](#super-tabs-controller-provider)
   - [Colors](#colors)
+  - [Avoid swipe event](#avoid-swipe-event)
 - [Examples](#examples)
 - [Project goals](#project-goals)
 
@@ -270,6 +271,12 @@ All color inputs takes color names like any other Ionic 2 component. Your color
 
 <br><br><br>
 
+## Avoid swipe event
+Set `avoid-super-tabs="true"` attribute in HTML element for avoid swipe event.<br/>
+Example when using the horizontal scroll bar inner [`super-tab` Component](#super-tab-component)
+
+<br><br><br>
+
 # Examples
 
 ## Basic example

src/super-tabs-pan-gesture.ts

@@ -25,10 +25,12 @@ export class SuperTabsPanGesture {
 
   private listeners: Function[] = [];
 
-  constructor(private plt: Platform,
-              private el: HTMLElement,
-              private config: SuperTabsConfig,
-              private rnd: Renderer2) {
+  constructor(
+    private plt: Platform,
+    private el: HTMLElement,
+    private config: SuperTabsConfig,
+    private rnd: Renderer2
+  ) {
 
     this.listeners.push(
       rnd.listen(el, 'touchstart', this._onStart.bind(this)),
@@ -51,6 +53,20 @@ export class SuperTabsPanGesture {
   }
 
   private _onStart(ev: TouchEvent) {
+    // check avoid this element
+    var avoid = false;
+    var element: any = ev.target;
+    if (element) {
+      do {
+        if (element.getAttribute && element.getAttribute('avoid-super-tabs')) avoid = true;
+        element = element.parentElement;
+      } while (element && !avoid);
+    }
+    if (avoid) {
+      this.shouldCapture = false;
+      return;
+    }
+
     const coords: PointerCoordinates = pointerCoord(ev),
       vw = this.plt.width();
 
@@ -75,12 +91,12 @@ export class SuperTabsPanGesture {
     if (!this.isDragging) {
 
       if (typeof this.shouldCapture !== 'boolean')
-      // we haven't decided yet if we want to capture this gesture
+        // we haven't decided yet if we want to capture this gesture
         this.checkGesture(coords);
 
 
       if (this.shouldCapture === true)
-      // gesture is good, let's capture all next onTouchMove events
+        // gesture is good, let's capture all next onTouchMove events
         this.isDragging = true;
       else
         return;
@@ -127,6 +143,7 @@ export class SuperTabsPanGesture {
   }
 
   private checkGesture(newCoords: PointerCoordinates) {
+    if (!this.initialCoords) return;
 
     const radians = this.config.maxDragAngle * (Math.PI / 180),
       maxCosine = Math.cos(radians),