Prevent thumb container from jumping around.

Author: devversion

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

@@ -59,10 +59,10 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   private _hasFocus: boolean = false;
   private _isMousedown: boolean = false;
   private _isInitialized: boolean = false;
-  private _domRenderer: MdSlideToggleRenderer = null;
+  private _slideRenderer: MdSlideToggleRenderer = null;
 
-  // Drag pointer, which holds information about the current drag.
-  private _dragPointer: {
+  // State of the current drag, which holds required variables for the drag.
+  private _dragState: {
     barWidth: number;
     percentage?: number;
   };
@@ -82,7 +82,7 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
 
   constructor(private _elementRef: ElementRef,
               private _renderer: Renderer) {
-    this._domRenderer = new MdSlideToggleRenderer(this._elementRef);
+    this._slideRenderer = new MdSlideToggleRenderer(this._elementRef);
   }
 
   /** TODO: internal */
@@ -105,7 +105,7 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
     event.stopPropagation();
 
     // Once a drag is currently in progress, we do not want to toggle the slide-toggle on a click.
-    if (!this.disabled && !this._dragPointer) {
+    if (!this.disabled && !this._dragState) {
       this.toggle();
     }
   }
@@ -221,55 +221,55 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   }
 
 
-  /** @internal */
+  /** TODO: internal */
   _onDragStart() {
-    if (this._dragPointer) {
+    if (this._dragState) {
       return;
     }
 
-    let thumbBarRect = this._domRenderer.getThumbBarClientRect();
-    let thumbRect = this._domRenderer.getThumbClientRect();
+    let thumbBarRect = this._slideRenderer.getThumbBarClientRect();
+    let thumbRect = this._slideRenderer.getThumbClientRect();
 
-    this._dragPointer = {
+    this._dragState = {
       barWidth: thumbBarRect.width - thumbRect.width
     };
 
-    this._domRenderer.toggleDragging(true);
+    this._slideRenderer.toggleDragging(true);
   }
 
-  /** @internal */
+  /** TODO: internal */
   _onDrag(event: HammerInput) {
-    if (!this._dragPointer) {
+    if (!this._dragState) {
       return;
     }
 
-    let barWidth = this._dragPointer.barWidth;
-    let distance = Math.max(-barWidth, Math.min(event.deltaX, barWidth));
-
-    let percentage = (distance / barWidth) * 100;
+    let percentage = (event.deltaX / this._dragState.barWidth) * 100;
 
-    if (percentage < 0) {
+    // When the slide-toggle was initially checked, then we have to start the drag at 100%
+    if (this.checked) {
       percentage += 100;
     }
 
-    this._domRenderer.updateThumbPosition(percentage);
-    this._dragPointer.percentage = percentage;
+    percentage = Math.max(0, Math.min(percentage, 100));
+
+    this._slideRenderer.updateThumbPosition(percentage);
+    this._dragState.percentage = percentage;
   }
 
-  /** @internal */
+  /** TODO: internal */
   _onDragEnd() {
-    if (!this._dragPointer) {
+    if (!this._dragState) {
       return;
     }
 
-    this.checked = this._dragPointer.percentage > 50;
+    this.checked = this._dragState.percentage > 50;
 
-    this._domRenderer.updateThumbPosition(null);
-    this._domRenderer.toggleDragging(false);
+    this._slideRenderer.updateThumbPosition(null);
+    this._slideRenderer.toggleDragging(false);
 
     // 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; }, 0);
+    setTimeout(() => { this._dragState = null; }, 0);
   }
 
 }