feat(slide-toggle): add drag functionality to thumb

Author: devversion

src/components/slide-toggle/slide-toggle.html

@@ -1,7 +1,9 @@
 <label class="md-slide-toggle-label">
+
   <div class="md-slide-toggle-container">
     <div class="md-slide-toggle-bar"></div>
-    <div class="md-slide-toggle-thumb-container">
+
+    <div class="md-slide-toggle-thumb-container" #thumbContainer>
       <div class="md-slide-toggle-thumb">
         <div class="md-ink-ripple"></div>
       </div>

src/components/slide-toggle/slide-toggle.scss

@@ -129,6 +129,12 @@ $md-slide-toggle-margin: 16px !default;
 
   transition: $swift-linear;
   transition-property: transform;
+
+  // Once the thumb container is being dragged around, we remove the transition duration to
+  // make the drag feeling fast and not delayed.
+  &.md-dragging {
+    transition-duration: 0ms;
+  }
 }
 
 // The thumb will be elevated from the slide-toggle bar.

src/components/slide-toggle/slide-toggle.ts

@@ -7,7 +7,9 @@ import {
   Input,
   Output,
   EventEmitter,
-  AfterContentInit
+  AfterContentInit,
+  ViewChild,
+  AfterViewInit
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -46,7 +48,7 @@ let nextId = 0;
   providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
+export class MdSlideToggle implements AfterContentInit, AfterViewInit, ControlValueAccessor {
 
   private onChange = (_: any) => {};
   private onTouched = () => {};
@@ -59,6 +61,12 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   private _isMousedown: boolean = false;
   private _isInitialized: boolean = false;
 
+  // Thumb Container Element, which is required for the dragging functionality.
+  @ViewChild('thumbContainer') private _thumbContainerRef: ElementRef;
+
+  // Pointer Object for the dragging functionality of the thumb.
+  private _dragPointer: any;
+
   @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() name: string = null;
   @Input() id: string = this._uniqueId;
@@ -84,6 +92,23 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
     this._isInitialized = true;
   }
 
+  /** TODO: internal */
+  ngAfterViewInit() {
+    let hammerManager = new Hammer(this._thumbContainerRef.nativeElement);
+
+    // The Pan / Drag recognition should immediately detect the starting drag event, without
+    // waiting for the drag to exceed the elements width.
+    hammerManager.add(new Hammer.Pan({
+      threshold: 0,
+      pointers: 0,
+      direction: Hammer.DIRECTION_HORIZONTAL
+    }));
+
+    hammerManager.on('panstart', this._onDragStart.bind(this));
+    hammerManager.on('panmove', this._onDrag.bind(this));
+    hammerManager.on('panend', this._onDragEnd.bind(this));
+  }
+
   /**
    * The onChangeEvent method will be also called on click.
    * This is because everything for the slide-toggle is wrapped inside of a label,
@@ -96,7 +121,8 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
     // emit its event object to the component's `change` output.
     event.stopPropagation();
 
-    if (!this.disabled) {
+    // Once a drag is currently in progress, we do not want to toggle the slide-toggle on a click.
+    if (!this.disabled && !this._dragPointer) {
       this.toggle();
     }
   }
@@ -214,6 +240,54 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
     this._change.emit(event);
   }
 
+
+  private _onDragStart() {
+    if (this._dragPointer) {
+      return;
+    }
+
+    let thumbBarEl = this._elementRef.nativeElement.querySelector('.md-slide-toggle-bar');
+
+    this._dragPointer = {
+      barWidth: thumbBarEl.getBoundingClientRect().width
+    };
+
+    // Mark the thumb container with the `md-dragging` class to remove the duration of
+    // transform transition.
+    this._thumbContainerRef.nativeElement.classList.add('md-dragging');
+  }
+
+  private _onDrag(event: HammerInput) {
+    if (!this._dragPointer) {
+      return;
+    }
+
+    let percentage = (event.deltaX / this._dragPointer.barWidth) * 100;
+
+    // When the `slide-toggle` is currently checked, we invert the percentage, because it
+    // starts from the right.
+    percentage = this.checked ? 100 + percentage : percentage;
+    percentage = Math.max(0, Math.min(percentage, 100));
+
+    this._dragPointer.percentage = percentage;
+    this._thumbContainerRef.nativeElement.style.transform = `translate3d(${percentage}%, 0, 0)`;
+  }
+
+  private _onDragEnd() {
+    if (!this._dragPointer) {
+      return;
+    }
+
+    this.checked = this._dragPointer.percentage > 50;
+
+    this._thumbContainerRef.nativeElement.style.transform = '';
+    this._thumbContainerRef.nativeElement.classList.remove('md-dragging');
+
+    // We have to clear the drag after one tick, because otherwise
+    // the click event will fire and toggle the slide-toggle again.
+    setTimeout(() => { this._dragPointer = null; }, 1);
+  }
+
 }
 
 export const MD_SLIDE_TOGGLE_DIRECTIVES = [MdSlideToggle];