fix(switch): fix switch drag functionality.

This fixes the complete switch drag functionality.
Fix ported from my previous work at material2 (https://github.com/angular/material2/pull/7/files)

Fixes #4719 Fixes #2338

Closes #6715

Author: devversion

src/components/checkbox/checkbox.js

@@ -172,7 +172,9 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
       }
 
       function listener(ev) {
-        if (element[0].hasAttribute('disabled')) {
+        // skipToggle boolean is used by the switch directive to prevent the click event
+        // when releasing the drag. There will be always a click if releasing the drag over the checkbox
+        if (element[0].hasAttribute('disabled') || scope.skipToggle) {
           return;
         }
 

src/components/switch/switch.js

@@ -46,7 +46,7 @@ angular.module('material.components.switch', [
  *
  * </hljs>
  */
-function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdGesture) {
+function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdGesture, $timeout) {
   var checkboxDirective = mdCheckboxDirective[0];
 
   return {
@@ -138,11 +138,17 @@ function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdG
 
         // We changed if there is no distance (this is a click a click),
         // or if the drag distance is >50% of the total.
-        var isChanged = ngModel.$viewValue ? drag.translate > 0.5 : drag.translate < 0.5;
+        var isChanged = ngModel.$viewValue ? drag.translate < 0.5 : drag.translate > 0.5;
         if (isChanged) {
           applyModelValue(!ngModel.$viewValue);
         }
         drag = null;
+
+        // Wait for incoming mouse click
+        scope.skipToggle = true;
+        $timeout(function() {
+          scope.skipToggle = false;
+        }, 1);
       }
 
       function applyModelValue(newValue) {

src/components/switch/switch.spec.js

@@ -65,4 +65,18 @@ describe('<md-switch>', function() {
     parentScope.$apply();
     expect(element.attr('tabindex')).toEqual('-1');
   });
+
+  it('should skip click event if releasing drag over element', function() {
+    var checkbox = $compile('<md-switch></md-switch>')(parentScope);
+    var scope = checkbox.scope();
+
+    // skipToggle is used here to imitate an ending drag, same behavior as in the component.
+    scope.skipToggle = true;
+    scope.$apply();
+
+    checkbox.triggerHandler('click');
+
+    expect(checkbox[0]).not.toHaveClass('md-checked');
+
+  });
 });