feat(tabs): add swipe events

src/lib/core/core.ts

@@ -58,7 +58,7 @@ export * from '@angular/cdk/overlay';
 export {GestureConfig} from './gestures/gesture-config';
 // Explicitly specify the interfaces which should be re-exported, because if everything
 // is re-exported, module bundlers may run into issues with treeshaking.
-export {HammerInput, HammerManager} from './gestures/gesture-annotations';
+export {HammerInput, HammerManager, HammerDirection} from './gestures/gesture-annotations';
 
 // Ripple
 export * from './ripple/index';

src/lib/core/gestures/gesture-annotations.ts

@@ -9,17 +9,25 @@
 /**
  * Stripped-down HammerJS annotations to be used within Material, which are necessary,
  * because HammerJS is an optional dependency. For the full annotations see:
- * https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/hammerjs
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/hammerjs
  */
 
 /** @docs-private */
 export interface HammerInput {
   preventDefault: () => {};
   deltaX: number;
+  direction: HammerDirection;
+  type: string;
   deltaY: number;
   center: { x: number; y: number; };
 }
 
+/** @docs-private */
+export enum HammerDirection {
+  Left = 2,
+  Right = 4
+}
+
 /** @docs-private */
 export interface HammerStatic {
   new(element: HTMLElement | SVGElement, options?: any): HammerManager;

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core/testing';
 import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
 import {MdSlideToggle, MdSlideToggleChange, MdSlideToggleModule} from './index';
-import {TestGestureConfig} from '../slider/test-gesture-config';
+import {TestGestureConfig} from '../core/gestures/test-gesture-config';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '../core/ripple/ripple-renderer';
 

src/lib/slider/slider.spec.ts

@@ -3,7 +3,7 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {MdSlider, MdSliderModule} from './index';
-import {TestGestureConfig} from './test-gesture-config';
+import {TestGestureConfig} from '../core/gestures/test-gesture-config';
 import {BidiModule} from '../core/bidi/index';
 import {
   DOWN_ARROW,

src/lib/tabs/tab-body.html

@@ -1,4 +1,7 @@
+<!-- touch-action workaround for https://github.com/angular/material2/issues/6484 -->
 <div class="mat-tab-body-content" #content
+     (swipe)="onSwipe.emit($event)"
+     [style.touch-action]="'pan-y'"
      [@translateTab]="_position"
      (@translateTab.start)="_onTranslateTabStarted($event)"
      (@translateTab.done)="_onTranslateTabComplete($event)">

src/lib/tabs/tab-body.ts

@@ -27,10 +27,10 @@ import {
   transition,
   AnimationEvent,
 } from '@angular/animations';
+import {HammerInput} from '../core';
 import {TemplatePortal, PortalHostDirective} from '@angular/cdk/portal';
 import {Directionality, Direction} from '@angular/cdk/bidi';
 
-
 /**
  * These position states are used internally as animation states for the tab body. Setting the
  * position state to left, right, or center will transition the tab body from its current
@@ -97,6 +97,9 @@ export class MdTabBody implements OnInit, AfterViewChecked {
   /** Event emitted when the tab completes its animation towards the center. */
   @Output() onCentered: EventEmitter<void> = new EventEmitter<void>(true);
 
+  /** Event emitted when the tab body is swiped left/right */
+  @Output() onSwipe: EventEmitter<HammerInput> = new EventEmitter<HammerInput>();
+
   /** The tab body content to display. */
   @Input('content') _content: TemplatePortal;
 

src/lib/tabs/tab-group.html

@@ -33,6 +33,7 @@
                [content]="tab.content"
                [position]="tab.position"
                [origin]="tab.origin"
+               (onSwipe)="_bodyContentSwiped($event)"
                (onCentered)="_removeTabBodyWrapperHeight()"
                (onCentering)="_setTabBodyWrapperHeight($event)">
   </md-tab-body>

src/lib/tabs/tab-group.spec.ts

@@ -1,14 +1,17 @@
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {By} from '@angular/platform-browser';
+import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {ViewportRuler} from '@angular/cdk/overlay';
 import {dispatchFakeEvent, FakeViewportRuler} from '@angular/cdk/testing';
 import {Observable} from 'rxjs/Observable';
 import {MdTab, MdTabGroup, MdTabHeaderPosition, MdTabsModule} from './index';
-
+import {TestGestureConfig} from '../core/gestures/test-gesture-config';
+import {HammerDirection} from '../core';
 
 describe('MdTabGroup', () => {
+  let gestureConfig: TestGestureConfig;
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdTabsModule, NoopAnimationsModule],
@@ -22,6 +25,10 @@ describe('MdTabGroup', () => {
       ],
       providers: [
         {provide: ViewportRuler, useClass: FakeViewportRuler},
+        {provide: HAMMER_GESTURE_CONFIG, useFactory: () => {
+          gestureConfig = new TestGestureConfig();
+          return gestureConfig;
+        }},
       ]
     });
 
@@ -170,6 +177,41 @@ describe('MdTabGroup', () => {
         .toBe(0, 'Expected no ripple to show up on label mousedown.');
     });
 
+    it('should change tabs on body swipe', () => {
+      let component = fixture.debugElement.componentInstance;
+      component.selectedIndex = 0;
+      checkSelectedIndex(0, fixture);
+
+      // select the second tab
+      const body =
+          fixture.nativeElement.querySelector('.mat-tab-body-active .mat-tab-body-content');
+
+      dispatchSwipeEvent(body, HammerDirection.Left, gestureConfig);
+      checkSelectedIndex(1, fixture);
+
+      dispatchSwipeEvent(body, HammerDirection.Right, gestureConfig);
+      checkSelectedIndex(0, fixture);
+    });
+
+    it('should change tabs to next non-disabled on body swipe', () => {
+      let disabledFixture = TestBed.createComponent(DisabledTabsTestApp);
+      disabledFixture.detectChanges();
+
+      let component = disabledFixture.debugElement.componentInstance;
+      component.selectedIndex = 0;
+      checkSelectedIndex(0, disabledFixture);
+
+      // select the second tab
+      const body =
+        disabledFixture.nativeElement.querySelector('.mat-tab-body-active .mat-tab-body-content');
+
+      dispatchSwipeEvent(body, HammerDirection.Left, gestureConfig);
+      checkSelectedIndex(2, disabledFixture);
+
+      dispatchSwipeEvent(body, HammerDirection.Right, gestureConfig);
+      checkSelectedIndex(0, disabledFixture);
+    });
+
     it('should set the isActive flag on each of the tabs', () => {
       fixture.detectChanges();
 
@@ -308,6 +350,16 @@ describe('MdTabGroup', () => {
     });
   });
 
+  function dispatchSwipeEvent(bodyElement: HTMLElement,
+                              direction: HammerDirection,
+                              config: TestGestureConfig): void {
+    config.emitEventForElement('swipe', bodyElement, {
+      deltaX: direction === HammerDirection.Left ? -100 : 100,
+      direction: direction,
+      srcEvent: {preventDefault: jasmine.createSpy('preventDefault')}
+    });
+  }
+
   /**
    * Checks that the `selectedIndex` has been updated; checks that the label and body have their
    * respective `active` classes

src/lib/tabs/tab-group.ts

@@ -22,7 +22,10 @@ import {
   AfterContentInit,
   AfterContentChecked,
   OnDestroy,
+  Optional,
 } from '@angular/core';
+import {HammerInput, HammerDirection} from '../core';
+import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {map} from '@angular/cdk/rxjs';
 import {Observable} from 'rxjs/Observable';
@@ -143,7 +146,8 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
 
   constructor(_renderer: Renderer2,
               elementRef: ElementRef,
-              private _changeDetectorRef: ChangeDetectorRef) {
+              private _changeDetectorRef: ChangeDetectorRef,
+              @Optional() private _dir: Directionality) {
     super(_renderer, elementRef);
     this._groupId = nextId++;
   }
@@ -185,7 +189,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
     }
   }
 
-  ngAfterContentInit() {
+  ngAfterContentInit(): void {
     this._subscribeToTabLabels();
 
     // Subscribe to changes in the amount of tabs, in order to be
@@ -196,7 +200,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
     });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this._tabsSubscription) {
       this._tabsSubscription.unsubscribe();
     }
@@ -214,7 +218,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
     this._isInitialized = true;
   }
 
-  _focusChanged(index: number) {
+  _focusChanged(index: number): void {
     this.focusChange.emit(this._createChangeEvent(index));
   }
 
@@ -233,7 +237,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
    * binding to be updated, we need to subscribe to changes in it and trigger change detection
    * manually.
    */
-  private _subscribeToTabLabels() {
+  private _subscribeToTabLabels(): void {
     if (this._tabLabelSubscription) {
       this._tabLabelSubscription.unsubscribe();
     }
@@ -276,4 +280,42 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
     this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight;
     this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', '');
   }
+
+  /** Body content was swiped left/right */
+  _bodyContentSwiped(event: HammerInput): void {
+    if (this.selectedIndex === null) {
+      this.selectedIndex = 0;
+    }
+
+    if (event.direction === HammerDirection.Left || event.direction === HammerDirection.Right) {
+      let direction = event.direction;
+      if (this._dir.value === 'rtl') {
+        direction =
+          direction === HammerDirection.Left ? HammerDirection.Right : HammerDirection.Left;
+      }
+
+      if (this.selectedIndex !== 0 && direction === HammerDirection.Right) {
+        this._setActiveItemByIndex(this.selectedIndex - 1, -1);
+      } else if (this.selectedIndex < this._tabs.length && direction === HammerDirection.Left) {
+        this._setActiveItemByIndex(this.selectedIndex + 1, 1);
+      }
+    }
+  }
+
+  /**
+   * Sets the active item to the first enabled item starting at the index specified. If the
+   * item is disabled, it will move in the fallbackDelta direction until it either
+   * finds an enabled item or encounters the end of the list.
+   */
+  private _setActiveItemByIndex(index: number,
+                                fallbackDelta: number,
+                                items = this._tabs.toArray()): void {
+    if (!items[index]) { return; }
+    while (items[index].disabled) {
+      index += fallbackDelta;
+      if (!items[index]) { return; }
+    }
+    this.selectedIndex = index;
+  }
+
 }

src/lib/tabs/tab-header.html

@@ -7,6 +7,8 @@
 </div>
 
 <div class="mat-tab-label-container" #tabListContainer
+     (swipe)="_handleSwipeDrag($event)"
+     (drag)="_handleSwipeDrag($event)"
      (keydown)="_handleKeydown($event)">
   <div class="mat-tab-list" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
     <div class="mat-tab-labels">

src/lib/tabs/tab-header.spec.ts

@@ -3,7 +3,7 @@ import {
 } from '@angular/core/testing';
 import {Component, ViewChild, ViewContainerRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {By} from '@angular/platform-browser';
+import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {PortalModule} from '@angular/cdk/portal';
 import {ViewportRuler} from '@angular/cdk/overlay';
@@ -14,14 +14,15 @@ import {MdRippleModule} from '../core/ripple/index';
 import {MdInkBar} from './ink-bar';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
 import {Subject} from 'rxjs/Subject';
-
+import {TestGestureConfig} from '../core/gestures/test-gesture-config';
 
 
 describe('MdTabHeader', () => {
   let dir: Direction = 'ltr';
   let change = new Subject();
   let fixture: ComponentFixture<SimpleTabHeaderApp>;
   let appComponent: SimpleTabHeaderApp;
+  let gestureConfig: TestGestureConfig;
 
   beforeEach(async(() => {
     dir = 'ltr';
@@ -36,6 +37,10 @@ describe('MdTabHeader', () => {
       providers: [
         {provide: Directionality, useFactory: () => ({value: dir, change: change.asObservable()})},
         {provide: ViewportRuler, useClass: FakeViewportRuler},
+        {provide: HAMMER_GESTURE_CONFIG, useFactory: () => {
+          gestureConfig = new TestGestureConfig();
+          return gestureConfig;
+        }}
       ]
     });
 
@@ -214,6 +219,21 @@ describe('MdTabHeader', () => {
           .toBe(0, 'Expected no ripple to show up after mousedown');
       });
 
+      it('should update pagination on swipe', () => {
+        appComponent.addTabsForScrolling();
+        fixture.detectChanges();
+
+        expect(appComponent.mdTabHeader.scrollDistance).toBe(0);
+
+        let tabListContainer = appComponent.mdTabHeader._tabListContainer.nativeElement;
+
+        dispatchSwipeEvent(tabListContainer, 100, gestureConfig);
+        fixture.detectChanges();
+
+        expect(appComponent.mdTabHeader.scrollDistance)
+          .toBe(appComponent.mdTabHeader._getMaxScrollDistance());
+      });
+
     });
 
     describe('rtl', () => {
@@ -336,3 +356,15 @@ class SimpleTabHeaderApp {
     this.tabs.push({label: 'new'}, {label: 'new'}, {label: 'new'}, {label: 'new'});
   }
 }
+
+function dispatchSwipeEvent(headerElement: HTMLElement, percent: number,
+                            gestureConfig: TestGestureConfig): void {
+  let trackElement = headerElement.querySelector('.mat-tab-list')!;
+  let dimensions = trackElement.getBoundingClientRect();
+  let x = dimensions.left + (dimensions.width * percent);
+
+  gestureConfig.emitEventForElement('swipe', headerElement, {
+    deltaX: x * -1,
+    srcEvent: { preventDefault: jasmine.createSpy('preventDefault') }
+  });
+}

src/lib/tabs/tab-header.ts

@@ -24,6 +24,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
 } from '@angular/core';
+import {HammerInput} from '../core';
 import {Directionality, Direction} from '@angular/cdk/bidi';
 import {RIGHT_ARROW, LEFT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
 import {auditTime, startWith} from '@angular/cdk/rxjs';
@@ -320,6 +321,13 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
   }
   get scrollDistance(): number { return this._scrollDistance; }
 
+  /** Handle swipe events scrolling the tabs */
+  _handleSwipeDrag(event: HammerInput): void {
+    const curDistance = this.scrollDistance || 0;
+    this.scrollDistance = curDistance - event.deltaX;
+    this._updateTabScrollPosition();
+  }
+
   /**
    * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
    * the end of the list, respectively). The distance to scroll is computed to be a third of the
@@ -430,4 +438,5 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
 
     this._inkBar.alignToElement(selectedLabelWrapper);
   }
+
 }